How to Put Spacing when SideBar collapse and uncollapse on React

Question

Im trying to achieve when a sidebar collapse the body will make space for the sidebar and when it uncollapse

This is what it looks like when the sidebar uncollapse

enter image description here

and this is what it looks like when the sidebar collapse

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;

and this on 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;

I tried adding margin in the body but it dosent look nice when you uncollapse because theres still more space. Sorry if this is not right

I want something like this enter image description here

I'm kinda new and would really appreciate if you could help me Thanks in advance !!!

Answer 1

If you look at the 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 event of the sidebar to set the state as needed.

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);
        }}
      >
      ...

CodeSandBox: https://codesandbox.io/s/so-trend-micro-sidebar-fjo9r?file=/src/App.js