npm package: @licuido-ui/ui_sidebar
Description: Sidebar is an expandable and collapsible component that typically acts as a side container to place primary or secondary content alongside the main content.
Latest version: 0.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](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_sidebar
```

## Import component

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

## Usage

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

## Image

![alt text](./sideDrawer.png)

## Sample Code

```jsx
<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

| **Name**            | **Description**                                                                                                      | **Default** | **Control**            |
| ------------------- | -------------------------------------------------------------------------------------------------------------------- | ----------- | ---------------------- |
| **id**              | string                                                                                                               | string      | string                 |
| **openSideBar**     | boolean                                                                                                              | false       | False `or` True        |
| **logoDetails**     | \{ logoImage: string; logoImageStyle?: SxProps&lt;\{\}&gt;; version?: string; versionStyle?: SxProps&lt;\{\}&gt;; \} | \-          | {}                     |
| **drawerWidth**     | number                                                                                                               | 271         |
| **menuData**        | ListItemProps\[\]                                                                                                    | \[\]        | []                     |
| **bottomMenuData**  | ListItemProps\[\]                                                                                                    | \[\]        | bottomMenuData         |
| **drawerProps**     | DrawerProps                                                                                                          | \-          | drawerProps : \{\}     |
| **rootStyle**       | SxProps&lt;\{\}&gt;                                                                                                  | \{ \}       | rootStyle : \{\}       |
| **listStyle**       | SxProps&lt;\{\}&gt;                                                                                                  | \{ \}       | listStyle : \{\}       |
| **listItemStyle**   | SxProps&lt;\{\}&gt;                                                                                                  | \{ \}       | listItemStyle : \{\}   |
| **listButtonStyle** | SxProps&lt;\{\}&gt;                                                                                                  | \{ \}       | listButtonStyle : \{\} |
| **listIconStyle**   | SxProps&lt;\{\}&gt;                                                                                                  | \{ \}       | listIconStyle : \{\}   |
| **listTextStyle**   | SxProps&lt;\{\}&gt;                                                                                                  | \{ \}       | listTextStyle : \{\}   |
| **className**       | string                                                                                                               | ""          | Set string             |
| **sx**              | SxProps&lt;Theme&gt;                                                                                                 | \{ \}       | Set object             |