yarn add react-pro-sidebar

npm install react-pro-sidebar

import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
<Sidebar>
  <Menu>
    <SubMenu label="Charts">
      <MenuItem> Pie charts </MenuItem>
      <MenuItem> Line charts </MenuItem>
    </SubMenu>
    <MenuItem> Documentation </MenuItem>
    <MenuItem> Calendar </MenuItem>
  </Menu>
</Sidebar>;

import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';
import { NavLink } from 'react-router-dom';
<Sidebar>
  <Menu
    menuItemStyles={{
      button: {
        // NavLink adds the active class automatically,
        // so we can use it to style the active menu item
        [`&.active`]: {
          backgroundColor: '#13395e',
          color: '#b6c8d9',
        },
      },
    }}
  >
    <MenuItem component={<NavLink to="/documentation" />}> Documentation</MenuItem>
    <MenuItem component={<NavLink to="/calendar" />}> Calendar</MenuItem>
    <MenuItem component={<NavLink to="/e-commerce" />}> E-commerce</MenuItem>
  </Menu>
</Sidebar>;

<Sidebar
  rootStyles={{
    [`.${sidebarClasses.container}`]: {
      backgroundColor: 'red',
    },
  }}
>
  // ...
</Sidebar>

interface MenuItemStyles {
  root?: ElementStyles;
  button?: ElementStyles;
  label?: ElementStyles;
  prefix?: ElementStyles;
  suffix?: ElementStyles;
  icon?: ElementStyles;
  subMenuContent?: ElementStyles;
  SubMenuExpandIcon?: ElementStyles;
}
type ElementStyles = CSSObject | ((params: MenuItemStylesParams) => CSSObject | undefined);

<Sidebar>
  <Menu
    menuItemStyles={{
      button: ({ level, active, disabled }) => {
        // only apply styles on first level elements of the tree
        if (level === 0)
          return {
            color: disabled ? '#f5d9ff' : '#d359ff',
            backgroundColor: active ? '#eecef9' : undefined,
          };
      },
    }}
  >
    //...
  </Menu>
</Sidebar>