Javascript 侧边栏折叠和解压时如何设置间距

我试图实现当侧边栏折叠时，身体将为侧边栏留出空间，当侧边栏打开时

这就是侧边栏打开时的样子

这就是边栏崩溃时的样子

从“React”导入React；
进口侧导航{
切换，
导航，
纳维坦，
纳维孔，
导航文本，
}来自“@trendmicro/react sidenav”；
导入“@trendmicro/react sidenav/dist/react sidenav.css”；
导出常量边栏=（）=>{
返回(
{
//在这里添加您的代码
}}
>
家
图表
折线图
条形图
);
};
导出默认边栏；

这是在App.js上实现的

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Nav from './components/NavBar';
import Home from './screens/Home';
import Login from './screens/Login';
import Register from './screens/Register';
import SideBar from './components/SideBar';
import { GlobalProvider } from './context/GlobalState';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  return (
    <GlobalProvider>
      <Router>
          <Nav />
          <SideBar />

          <Switch>
            <Route path='/' component={Home} exact />
            {/* <Route path='/login' component={Login} exact /> */}
            <Route path='/login' component={Login} exact />
            <Route path='/register' component={Register} exact />
          </Switch>
      </Router>
    </GlobalProvider>
  );
}

export default App;

从“React”导入React；
导入'bootstrap/dist/css/bootstrap.min.css'；
从“./components/NavBar”导入导航；
从“/screens/Home”导入主页；
从“/screens/Login”导入登录名；
从“./screens/Register”导入寄存器；
从“./components/SideBar”导入侧栏；
从“./context/GlobalState”导入{GlobalProvider}；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
函数App（）{
返回(
{/*  */}
);
}
导出默认应用程序；

我试着在身体上增加边距，但当你打开时它看起来并不好看，因为还有更多的空间。对不起，如果这不对的话

我想要这样的东西

我是新来的，如果你能帮助我，我会非常感激 提前感谢

如果您查看内容，他们会在内容上添加边距。这是模块已经推荐的一种方法。您可以添加一些CSS转换属性，使其与侧边栏的展开/折叠一样平滑。如果侧边栏被展开，只需增加更多的边距。利用侧边栏的事件根据需要设置状态

App.js

const [sideNavExpanded, setSideNavExpanded] = React.useState(false);

const contentStyle = {
    marginLeft: sideNavExpanded ? "250px" : "70px", // arbitrary values
    transition: "margin 0.2s ease"
};

return (
    <div>
        <SideBar
            setSideNavExpanded={setSideNavExpanded}
            sideNavExpanded={sideNavExpanded}
        />
        <div style={contentStyle}>Some Content</div>
    </div>
)

const[sideNavExpanded，setSideNavExpanded]=React.useState（false）；
常量contentStyle={
marginLeft:sideNavExpanded？“250px”：“70px”，//任意值
过渡：“0.2秒宽”
};
返回(
一些内容
)

Sidebar.js

export const SideBar = ({ sideNavExpanded, setSideNavExpanded }) => {
  return (
    <>
      <SideNav
        onToggle={() => {
          setSideNavExpanded(!sideNavExpanded);
        }}
      >
      ...

export const边栏=（{sideNavExpanded，setSideNavExpanded}）=>{
返回(
{
setSideNavExpanded（！sideNavExpanded）；
}}
>
...

---

CodeSandBox:

谢谢，它起作用了，但我在手机响应时遇到了一个问题，如何禁用汉堡菜单的点击看起来像这样，而且它一直在进行水平滚动如何修复您可以选择在过孔内检测视口。根据需要调整边距-我会在组件上执行视口检测nt。您还可以选择在小屏幕上的汉堡包按钮上添加

disabled

属性（根据需要设置样式），并将

sideNavExpanded

设置为

false

，以便在小屏幕上折叠它，如果您不想扩展它，可以在您的答案上执行吗

export const SideBar = ({ sideNavExpanded, setSideNavExpanded }) => {
  return (
    <>
      <SideNav
        onToggle={() => {
          setSideNavExpanded(!sideNavExpanded);
        }}
      >
      ...