sidebar-ui-react v0.0.3

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.

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: <Home/>,
    path: '/home',
  },
  {
    title: 'Chats',
    icon: <Chats/>,
    path: '/chats',
    subMenu: [
      {
        value: 'Chat 1',
        subPath: '/chats/chat1',
      },
      {
        value: 'Chat 2',
        subPath: '/chats/chat2',
      },
    ],
  },
  {
    title: 'Analytics',
    icon: <Analytics/>,
    path: '/analytics',
  },
];


 export default function App() {
    return (
      <div>
        <Sidebar menus={menus}/>
      </div>
    );
  }

For theme, dark and light ,profile data with header image :

<Sidebar
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 :

<div className="sidebarContainer">

      <div className={toggle === true ? 'hideToggleicon' : 'showToggleicon'}><div onClick={() => setToggle(!toggle)}><Hamburger /></div></div>

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

      <div className={toggle === true ? 'righthamburger' : 'lefthamburger'}>
        <div className={toggle === true ? 'burgerContainer' : 'burgerContainer active'} onClick={handleToggle}>
          <BurgerIcon hideToggleIcon={false} />
        </div>
      </div>




</div>

props