React Sidebar

Table of contents

1. Installation
2. Demo
3. Basic Usage

Installation

- Using NPM
npm i sidebar-ui-react

- Using Yarn
yarn add sidebar-ui-react

Checkout the below video for refrence.

!Recording 2023-08-09 190611


# Basic Usage of Sidebar


``

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

``

## props

| Accepted props | type | Description |
| ------------------------ | -------------- | ---------------------------------------------------------------------------- |
| headerImage | string | header image url on the top |
| heading | string | heading of the app or website on top |
| avatar | string | user avatar/image |
| name | string | name/username of user |
| email | string | email of user |
| menus | [object] | pass the pops and menus for adding the menus and submenus respectively |
| collapse | boolean | sets if you want to collapse the sidebar or not |
| fontColor | string | to change the whole font color as per the user's choice |
| backgroundColor | string | to change the background color of sidebar |
| hoverContainerBackground | string | choose the hover container of sidebar |
| theme | string | choose from dark or light theme |
| hideToggleIcon | boolean | to hide and unhide the toggle icon |
| dividerColor | string | color of the divider between header and profile contents |