CODEWITHSUNDEEP
reactjsmaterial-uireact-bootstrap
sandeep pradhan
sandeep pradhan

Reputation: 271

React pro sidebar

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

Upvotes: 2

Views: 15436

Answers (3)

HarshitChopra
HarshitChopra

Reputation: 41

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

Upvotes: 1

mionnaise
mionnaise

Reputation: 307

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';

Upvotes: 2

ghazouan badr
ghazouan badr

Reputation: 486

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>

Upvotes: 2

Related Questions