javascript - 反应：如果侧边栏打开，则推送内容

Question

如果我打开侧边栏，内容向左推，有什么方法吗？或者如果这适用于类似的东西，也许使用 CSS“样式化组件”会更好。

Sidebar.js

...imports...

export const SideBar = ({ open }) => {
  const history = useHistory();

  return (
    <StyledSideBar style={{ visibility: 'visible' }} variant="persistent" open={open} >
      <ModuleButton onClick={() => history.push('/dashboard')}>
        <Tooltip title="Dashdoard" placement="right" arrow >
          <FontAwesomeIcon icon={faTachometerAltFast} />
        </Tooltip >
      </ModuleButton>
      <ModuleButton onClick={() => history.push('/chat')}>
        <Tooltip title="Chat" placement="right" arrow>
          <FontAwesomeIcon icon={faCommentsAlt} />
        </Tooltip>
      </ModuleButton>
      <ModuleButton onClick={() => history.push('/calendar')}>
        <Tooltip title="Calendar" placement="right" arrow>
          <FontAwesomeIcon icon={faCalendarAlt} />
        </Tooltip>
      </ModuleButton>
    </StyledSideBar>
  );
}

export default SideBar;

仪表板.js

...imports...
export const Dashboard = () => {
    return (
        <DashContent>
            <div>
                <Typography color={textEmphasis} variant="h1">Welcome</Typography>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr...
    </div>
        </DashContent>
    )
};

export default Dashboard;

标签： javascriptreactjs