# `m-sidebar`

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 |
|------|-------------|------|---------|
| `expanded*` | Defines the sidebar state | `boolean` | `$bindable(true)` |
| `onexpanded` | Callback to trigger when the sidebar state changes. | `(value: boolean) => void` |   |
| `onclose` | Callback to trigger when the close button is clicked (mobile only). | `() => void` |   |

## 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:expanded` | Emits when the sidebar state changes. | `CustomEvent<void>` |
| `close` | Emits when the sidebar is closed (mobile only). | `CustomEvent<void>` |

## Dependencies

### Depends on

- [m-icon-button](../iconbutton/README.md)

### Graph

```mermaid
graph TD;
  m-sidebar --> m-icon-button
style m-sidebar fill:#008240,stroke:#333,stroke-width:4px
```

