React pro sidebar

user_13497334 0
Viewed 6758

Has anyone used react pro sidebar. Can someone tell me how to use sass sidebar components and how to increase the length of the sidebar. are there any other libraries with examples of how to use their sidebar. Here is the react pro sidebar example.

<ProSidebar>
        <SidebarHeader>
          {
           Dashboard}
        </SidebarHeader>
        <Menu iconShape="square">
          <MenuItem>Dashboard</MenuItem>
          <SubMenu title="Components">
            <MenuItem>Component 1</MenuItem>
            <MenuItem>Component 2</MenuItem>
          </SubMenu>
          <SubMenu title="Reports">
            <MenuItem>My Report</MenuItem>
            <MenuItem>MIS Report</MenuItem>
          </SubMenu>
        </Menu>
      </ProSidebar>
      ;

Please help

react-bootstrap material-ui reactjs
3 Answers

To increase Sidebar (react-pro-sidebar) component height, just wrap the sidebare in div tag and add style to that div as below:

.sidebar {
      height: 60vh !important;
  }

<div className='sidebar'>
<ProSidebar>
        <SidebarHeader>
          {
           Dashboard}
        </SidebarHeader>
        <Menu iconShape="square">
          <MenuItem>Dashboard</MenuItem>
          <SubMenu title="Components">
            <MenuItem>Component 1</MenuItem>
            <MenuItem>Component 2</MenuItem>
          </SubMenu>
          <SubMenu title="Reports">
            <MenuItem>My Report</MenuItem>
            <MenuItem>MIS Report</MenuItem>
          </SubMenu>
        </Menu>
      </ProSidebar>

</div>
user_79999930

To install sass, run

npm install node-sass

Then you just have to create a .scss file and import it to your react file.

import './custom.scss';

Your custom.scss could be as simple as:

$sidebar-width: 323px;
@import '~react-pro-sidebar/dist/scss/styles.scss';

Note: if you used css for react-pro-sidebar, remember to remove

import 'react-pro-sidebar/dist/css/styles.css';
user_50682090

The Pro Sidebar uses nested classes namely(in-oder)

  • Section-1(Main)
  1. pro_sidebar= This the wrapper class which bring all the whole structure together.
  2. pro_sidebar_inner= This class is used to provide background.
  3. pro_sidebar_layout= This class is used to provide the layout for the menu items.
  • Section-2(Content Based)
  1. pro_sidebar_header= Add a header for the sidebar such as logo.
  2. pro_sidebar_content= Add the content of the sidebar such as menus.
  3. pro_sidebar_footer= Add a footer for the sidebar such as copyright.

More here-https://www.npmjs.com/package/react-pro-sidebar

So to increase the height of the sidebar use

.pro-sidebar {
  position: absolute;
  height: 100%;
}

If you want to explore more just use the web-developer tools to find out more

user_149222700
Related