React-sidebar-pro NPM

React Sidebar Pro

<Sidebar className="sidebar_custom">
    <SidebarHeader>
        <SidebarLogo img={pathOfLogo}/>
    </SidebarHeader>
    <SidebarBody>
        <MenuBar>
            <MenuItem
                to='/'
                text='Dashboard'
            />
            <MenuItem
                to='/'
                text='My Project Tasks'
            />
            <SubMenuBar 
                label="More Options"
            >
                <MenuItem
                    to='/'
                    text='First Option'
                />
                <MenuItem
                    to='/'
                    text='Second Option'
                />
            </SubMenuBar>
        </MenuBar>
    </SidebarBody>
    <SidebarFooter>
        content of footer
    </SidebarFooter>
</Sidebar>

Props Provided

Sidebar `<Sidebar> </Sidebar>`

Props	Type	Description
className	string	class name of sidebar

SidebarHeader `<SidebarHeader></SidebarHeader>`

Props	Type	Description
className	string	class name of sidebar header

SidebarLogo `<SidebarLogo props />`

Props	Description
img	set image as logo on sidebar

MenuItem `<MenuItem props />`

Props	Type	Description	Optional
to	string	navigation link	False
leftIcon	any	icon on the left side of label of menuitem	True
text	string	main text of menu item	False
rightIcon	any	icon on the right side of label of menuitem	True

SubMenuBar `<SubMenuBar props></SubMenuBar>`

Props	Type	Description	Optional
labelLeftIcon	string	Icon on the left side of label of menuitem	True
label	string	label for the submenubar	False
labelRightIcon	any	change icon on right side of label (default is downIcon)	True
children	any	all children pass in the component	False