@licuido-ui/ui_sidebar v0.0.6

Sidebar

Sidebar is an expandable and collapsible component that typically acts as a side container to place primary or secondary content alongside the main content.

Author

• @author Hariharan hariharan@crayond.co

Link

Story Book Link Layout

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_sidebar

Import component

import { Sidebar } from '@licuido-ui/ui_sidebar';

Usage

<Sidebar menuData={[]} bottomMenuData={[]} />

Image

Sample Code

<Sidebar
  openSideBar={false}
  logoDetails={{ logoImage: '/crayondLogo.png', version: 'V 1.0.1' }}
  drawerWidth={271}
  drawerProps={{}}
  rootStyle={{}}
  listStyle={{}}
  listItemStyle={{}}
  listButtonStyle={{}}
  listIconStyle={{}}
  listTextStyle={{}}
  menuData={[
    {
      primaryText: 'Dashboard',
      // secondaryText: '',
      icon: <HomeWorkIcon />,
      onClick: () => {
        console.log('clk');
      },
      subMenu: [
        {
          primaryText: 'Super Admin',
          // secondaryText: 'info',
          icon: <DashboardIcon />,
          subMenu: [
            {
              primaryText: 'Admin',
              // secondaryText: 'info',
              icon: <Leads />,
              onClick: () => {
                console.log('clk');
              },
              subMenu: [
                {
                  primaryText: 'User',
                  // secondaryText: 'info',
                  icon: <Leads />,
                  onClick: () => {
                    console.log('clk');
                  },
                  subMenu: [
                    {
                      primaryText: 'Public',
                      // secondaryText: 'info',
                      icon: <Leads />,
                      onClick: () => {
                        console.log('clk');
                      },
                    },
                  ],
                },
              ],
            },
          ],
          onClick: () => {
            console.log('clk');
          },
        },
      ],
    },
    {
      primaryText: 'Contact',
      // secondaryText: 'info',
      icon: <Leads />,
      onClick: () => {
        console.log('clk');
      },
      subMenu: [
        {
          primaryText: 'Mobile',
          secondaryText: 'India only',
          icon: <Leads />,
          onClick: () => {
            console.log('clk');
          },

          subMenu: [
            {
              primaryText: 'Primary',
              secondaryText: '9875346587',
              icon: <Leads />,
              onClick: () => {
                console.log('clk');
              },
            },
          ],
        },
      ],
    },
    {
      primaryText: 'Docs',
      icon: <HomeWorkIcon />,
      onClick: () => {
        console.log('clk');
      },
    },
    {
      primaryText: 'About',
      icon: <HomeWorkIcon />,
      onClick: () => {
        console.log('clk');
      },
    },
  ]}
  bottomMenuData={[
    {
      primaryText: 'Hariharan',
      secondaryText: 'Developer',
      icon: <Leads sx={{ padding: '8px' }} />,
      onClick: () => {
        console.log('clk');
      },
      listIconStyle: { padding: '0' },
    },
  ]}
/>

Props