# `m-drawer`

A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.

## Props

| Name | Description | Type | Default |
|------|-------------|------|---------|
| `open` | If `true`, display the drawer. | `boolean` |   |
| `position` | Position of the drawer. | `'left'` `'right'` |   |
| `extended` | If `true`, the drawer have a bigger width. | `boolean` |   |
| `back` | If `true`, display the back button. | `boolean` |   |
| `title*` | Title of the drawer. | `string` |   |
| `contentTitle` | Title of the content of the drawer. | `string` |   |
| `onUpdateOpen` | Callback fired when the drawer open state changes. | `(open: boolean) => void` |   |
| `onBack` | Callback fired when the back button is clicked. | `() => void` |   |

## Slots

| Name | Description |
|------|-------------|
| `default` | Use this slot to insert the content of the drawer |
| `footer` | Use this slot to insert buttons in the footer |

## Events

| Name | Description | Type |
|------|------|-------------|
| `update:open` | Emits when the drawer open state changes. | `CustomEvent<boolean>` |
| `back` | Emits when click back button of the drawer. | `CustomEvent<void>` |

