# Drawer

A panel that slides in from the edge of the screen to display supplementary content.

```twig
<div style="min-height: 400px">
    <twig:Drawer id="drawer-demo">
        <twig:Drawer:Trigger>
            <twig:Button variant="outline" {{ ...drawer_trigger_attrs }}>Open Drawer</twig:Button>
        </twig:Drawer:Trigger>
        <twig:Drawer:Content>
            <div class="mx-auto w-full max-w-sm">
                <twig:Drawer:Header>
                    <twig:Drawer:Title>Move Goal</twig:Drawer:Title>
                    <twig:Drawer:Description>Set your daily activity goal.</twig:Drawer:Description>
                </twig:Drawer:Header>
                <div class="p-4 pb-0">
                    <p class="text-muted-foreground text-sm">Adjust the target you want to reach each day.</p>
                </div>
                <twig:Drawer:Footer>
                    <twig:Button>Submit</twig:Button>
                    <twig:Drawer:Close>
                        <twig:Button variant="outline" {{ ...drawer_close_attrs }}>Cancel</twig:Button>
                    </twig:Drawer:Close>
                </twig:Drawer:Footer>
            </div>
        </twig:Drawer:Content>
    </twig:Drawer>
</div>
```

## Installation

```shell
php bin/console ux:install drawer --kit shadcn
```
## Usage

```twig
<twig:Drawer id="drawer">
    <twig:Drawer:Trigger>
        <twig:Button variant="outline" {{ ...drawer_trigger_attrs }}>Open</twig:Button>
    </twig:Drawer:Trigger>
    <twig:Drawer:Content>
        <twig:Drawer:Header>
            <twig:Drawer:Title>Are you absolutely sure?</twig:Drawer:Title>
            <twig:Drawer:Description>This action cannot be undone.</twig:Drawer:Description>
        </twig:Drawer:Header>
        <twig:Drawer:Footer>
            <twig:Button>Submit</twig:Button>
            <twig:Drawer:Close>
                <twig:Button variant="outline" {{ ...drawer_close_attrs }}>Cancel</twig:Button>
            </twig:Drawer:Close>
        </twig:Drawer:Footer>
    </twig:Drawer:Content>
</twig:Drawer>
```

## Examples

### Directions

Use the `direction` prop to set the edge the drawer slides in from: `top`, `right`, `bottom` (default) or `left`.

```twig
<div class="flex flex-wrap gap-2" style="min-height: 400px">
    {% for direction in ['top', 'right', 'bottom', 'left'] %}
        <twig:Drawer id="drawer-direction-{{ direction }}" direction="{{ direction }}">
            <twig:Drawer:Trigger>
                <twig:Button variant="outline" class="capitalize" {{ ...drawer_trigger_attrs }}>{{ direction }}</twig:Button>
            </twig:Drawer:Trigger>
            <twig:Drawer:Content class="data-[direction=bottom]:max-h-[50vh] data-[direction=top]:max-h-[50vh]">
                <twig:Drawer:Header>
                    <twig:Drawer:Title>Move Goal</twig:Drawer:Title>
                    <twig:Drawer:Description>Set your daily activity goal.</twig:Drawer:Description>
                </twig:Drawer:Header>
                <div class="min-h-0 flex-1 overflow-y-auto px-4">
                    {% for i in 1..8 %}
                        <p class="mb-2 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    {% endfor %}
                </div>
                <twig:Drawer:Footer>
                    <twig:Button>Submit</twig:Button>
                    <twig:Drawer:Close>
                        <twig:Button variant="outline" {{ ...drawer_close_attrs }}>Cancel</twig:Button>
                    </twig:Drawer:Close>
                </twig:Drawer:Footer>
            </twig:Drawer:Content>
        </twig:Drawer>
    {% endfor %}
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div style="min-height: 400px">
    <twig:Drawer id="drawer-rtl" dir="rtl">
        <twig:Drawer:Trigger>
            <twig:Button variant="outline" {{ ...drawer_trigger_attrs }}>فتح</twig:Button>
        </twig:Drawer:Trigger>
        <twig:Drawer:Content>
            <div class="mx-auto w-full max-w-sm">
                <twig:Drawer:Header>
                    <twig:Drawer:Title>تعديل الهدف</twig:Drawer:Title>
                    <twig:Drawer:Description>حدد هدف نشاطك اليومي.</twig:Drawer:Description>
                </twig:Drawer:Header>
                <twig:Drawer:Footer>
                    <twig:Button>إرسال</twig:Button>
                    <twig:Drawer:Close>
                        <twig:Button variant="outline" {{ ...drawer_close_attrs }}>إلغاء</twig:Button>
                    </twig:Drawer:Close>
                </twig:Drawer:Footer>
            </div>
        </twig:Drawer:Content>
    </twig:Drawer>
</div>
```

## API Reference

### `<twig:Drawer>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `id` | `string` | - | Unique identifier used to generate internal Drawer IDs. |
| `direction` | `'top'\|'right'\|'bottom'\|'left'` | `'bottom'` | Which edge the drawer slides in from. |
| `open` | `boolean` | `false` | Whether the drawer is open on initial render. |

| Block | Description |
|:------|:------------|
| `content` | The drawer structure, typically includes `Drawer:Trigger` and `Drawer:Content`. |
### `<twig:Drawer:Close>`

| Block | Description |
|:------|:------------|
| `content` | The close trigger element (e.g., a `Button`) that closes the drawer when clicked. |
### `<twig:Drawer:Content>`

| Block | Description |
|:------|:------------|
| `content` | The drawer content, typically includes `Drawer:Header` and optionally `Drawer:Footer`. |
### `<twig:Drawer:Description>`

| Block | Description |
|:------|:------------|
| `content` | The descriptive text explaining the drawer purpose. |
### `<twig:Drawer:Footer>`

| Block | Description |
|:------|:------------|
| `content` | The footer area, typically contains action buttons. |
### `<twig:Drawer:Header>`

| Block | Description |
|:------|:------------|
| `content` | The header area, typically contains `Drawer:Title` and `Drawer:Description`. |
### `<twig:Drawer:Title>`

| Block | Description |
|:------|:------------|
| `content` | The title text of the drawer. |
### `<twig:Drawer:Trigger>`

| Block | Description |
|:------|:------------|
| `content` | The trigger element (e.g., a `Button`) that opens the drawer when clicked. |