React Sidebar
npm install sidebar-ui-reactReact Sidebar
npm i sidebar-ui-react
yarn add sidebar-ui-react
https://github.com/Roxiler/sidebar-ui-react/assets/97351159/2fffcbc8-0e09-40fb-ac8c-ffdf76c89acb
import {Sidebar} from "react-sidebar"
const menus = [
{
title: 'Home',
icon: ,
path: '/home',
},
{
title: 'Chats',
icon: ,
path: '/chats',
subMenu: [
{
value: 'Chat 1',
subPath: '/chats/chat1',
},
{
value: 'Chat 2',
subPath: '/chats/chat2',
},
],
},
{
title: 'Analytics',
icon: ,
path: '/analytics',
},
];
export default function App() {
return (
);
}
`
For theme, dark and light ,profile data with header image :
`
menus={menus}
avatar={profilelogo}
headerImage='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmg6VbQr7k4bE8m1sGjODK19nEZn-UKVChBg&usqp=CA'
heading='Sidebar'
theme='light'
email='jhondoe@gmail.com' name='Jhon Doe'collapse={toggle} dividerColor='white'
/>
`
# Usage of burger Icon and Close Icon :
`
setToggle(!toggle)}>
menus={menus}
avatar={profilelogo}
headerImage='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmg6VbQr7k4bE8m1sGjODK19nEZn-UKVChBg&usqp=CA'
heading='Sidebar'
theme='light' email='jhondoe@gmail.com' name='Jhon Doe'collapse={toggle} dividerColor='white'
/>
``