import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { sideBarMock, sideBarMultipleSectionMock } from '../../../../mocks/components/sideBar';
import SideBar from '../SideBar';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';

<Meta title="Atoms/Side Bar" component={SideBar} />

# Side Bar
<br />

## `SideBars` are used to display a left aligned menu generated from the data provided.

### Default
<Canvas>
    <Story name="Default">
        <SideBar navItems={sideBarMock} />
    </Story>
</Canvas>

### Multiple sections
<Canvas>
    <Story name="Multiple sections">
        <SideBar navItems={sideBarMultipleSectionMock} />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="content"
    code={sideBarMock}
/>

```jsx
import SideBar from '@appdirect/sfb-theme-components/src/atoms/side-bar/SideBar'

<SideBar navItems={sideBarData} />

```
## Props
<ArgsTable of={SideBar} />
