import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { sideBarMock, sideBarMultipleSectionMock } from '../../../../mocks/components/sideBar';
import SideBar from '../SideBar';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import * as SideBarStories from './SideBar.stories';

<Meta of={SideBarStories} />

# Side Bar

<br />

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

### Default

<Canvas>
  <Story of={SideBarStories.Default} />
</Canvas>

### Multiple sections

<Canvas>
  <Story of={SideBarStories.MultipleSections} />
</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} />
