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

Question

我正在尝试实现当侧边栏折叠时正文将为侧边栏制作 space 并且当它展开时

侧边栏展开后的样子

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;

我尝试在正文中添加边距，但当你展开时它看起来不错，因为还有更多 space。对不起，如果这不对

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

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

Answer 1

如果你看侧边栏的Trend Micro demo page they do add margins on the content. That is one approach that is already recommended by the module. You can add some CSS transition property so that it is as smooth as the expanding/collapsing of the sidebar. Just add more margin if the sidebar is expanded. Utilize the 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

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

How to Put Spacing when SideBar collapse and uncollapse on React

javascript

reactjs

layout

navbar

sidebar