当 SideBar 在 React 上折叠和展开时如何放置间距

Question

我试图在侧边栏折叠时实现主体将为侧边栏腾出空间以及何时展开

这是侧边栏展开时的样子

enter image description here

这就是侧边栏折叠时的样子

enter image description here

import React from 'react';
import SideNav, {
  Toggle,
  Nav,
  NavItem,
  NavIcon,
  NavText,
} from '@trendmicro/react-sidenav';
import '@trendmicro/react-sidenav/dist/react-sidenav.css';

export const SideBar = () => {
  return (
    <>
      <SideNav
        onSelect={(selected) => {
          // Add your code here
        }}
      >
        <SideNav.Toggle />
        <SideNav.Nav defaultSelected='home'>
          <NavItem eventKey='home'>
            <NavIcon>
              <i className='fa fa-fw fa-home' style={{ fontSize: '1.75em' }} />
            </NavIcon>
            <NavText>Home</NavText>
          </NavItem>
          <NavItem eventKey='charts'>
            <NavIcon>
              <i
                className='fa fa-fw fa-line-chart'
                style={{ fontSize: '1.75em' }}
              />
            </NavIcon>
            <NavText>Charts</NavText>
            <NavItem eventKey='charts/linechart'>
              <NavText>Line Chart</NavText>
            </NavItem>
            <NavItem eventKey='charts/barchart'>
              <NavText>Bar Chart</NavText>
            </NavItem>
          </NavItem>
        </SideNav.Nav>
      </SideNav>
    </>
  );
};

export default SideBar;

这在 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;

我尝试在正文中添加边距，但是当您展开折叠时它看起来不错，因为还有更多空间。如有不对请见谅

我想要这样的东西 enter image description here

我是个新手，如果你能帮助我，我将不胜感激 提前致谢！！！

Answer 1

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

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>
)

Sidebar.js

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

代码沙盒：https://codesandbox.io/s/so-trend-micro-sidebar-fjo9r?file=/src/App.js