# Sidebar

TODO: describe what the Sidebar component does and when to use it.

## Installation

Install the sidebar, the theme package, and **the font package matching your project's brand**:

**Leroy Merlin projects**

    npm install @ptlm-azulejo/sidebar @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
    # or
    yarn add @ptlm-azulejo/sidebar @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin

**Adeo projects**

    npm install @ptlm-azulejo/sidebar @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
    # or
    yarn add @ptlm-azulejo/sidebar @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo

## Styles & theming

The component reads theme CSS variables, so it needs `@ptlm-azulejo/themes`. Import a
brand preset (it bundles the base tokens) and the component styles, then set the
brand class on the root element:

```js
import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // or /presets/adeo.css
import '@ptlm-azulejo/sidebar/style.css'
```

```html
<html class="preset-lm" data-theme="dark">
```

> Without a preset **and** the `.preset-*` class, the component renders uncolored.
> See the [themes package](../themes/README.md) for brand switching, dark mode,
> and custom brands.

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| — | — | — | TODO: document the component props. |

## Slots

| Name | Description |
| --- | --- |
| `default` | The content displayed in the component. |

## Basic Usage

```vue
<script setup>
import { AzSidebar } from '@ptlm-azulejo/sidebar'
</script>

<template>
  <AzSidebar>Content</AzSidebar>
</template>
```