@mozaic-ds/vue/src/components/sidebar/README.md

Mozaic-Vue is the Vue.js implementation of ADEO Design system

# MSidebar

A sidebar is a vertical navigation component that provides quick access to key sections and functionalities within an application or website. It contains expandable menus, and shortcuts, allowing users to navigate efficiently while keeping the main content area uncluttered. Sidebars can be collapsible or persistent, adapting to different screen sizes and user preferences. They are commonly used in dashboards, content management systems, and productivity tools.


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `modelValue*` | the state of the expanded sidebar, bound via v-model. | `boolean` | - |
| `divider` | Whether to display a right border on the sidebar. | `boolean` | - |

## Slots

| Name | Description |
| --- | --- |
| `header` | Slot for the sidebar header. Should contain an `MSidebarHeader` component. |
| `shortcuts` | Slot for sidebar shortcuts. Should contain an `MSidebarShortcuts` component
with one or more `MSidebarShortcutItem` components inside. |
| `nav` | Slot for the main navigation items. Should contain one or more `MSidebarNavItem` components. |
| `footer` | Slot for the sidebar footer. Should contain an `MSidebarFooter` component. |

## Events

| Name | Description | Type |
| --- | --- | --- |
| `update:modelValue` | Emits when the sidebar state changes. | [value: boolean] |
| `close` | Emits when the sidebar close button is clicked (mobile only). | [] |

## Dependencies

### Depends on

- [MIconButton](../iconbutton)

### Graph

```mermaid
graph TD;
  MSidebar --> MIconButton
style MSidebar fill:#008240,stroke:#333,stroke-width:4px
```

### Used By

- [DefaultCase.stories](stories)
- [WithExpandOnly.stories](stories)
- [WithProfileInfoOnly.stories](stories)
- [WithSingleLevel.stories](stories)

### Graph

```mermaid
graph TD;
  DefaultCase.stories --> MSidebar
  WithExpandOnly.stories --> MSidebar
  WithProfileInfoOnly.stories --> MSidebar
  WithSingleLevel.stories --> MSidebar
style MSidebar fill:#008240,stroke:#333,stroke-width:4px
```