# Drawer

A drawer component that slides in from the edge of the screen.

- Install: `php artisan blatui:add drawer`
- Source: https://blatui.remix-it.com/r/drawer.json
- Composer: `composer require gehrisandro/tailwind-merge-laravel`
- npm: `npm install -D @alpinejs/focus`

## resources/views/components/ui/drawer.blade.php

```blade
@props(['direction' => 'bottom'])

<div
    data-slot="drawer"
    data-vaul-drawer-direction="{{ $direction }}"
    x-data="{ open: false, direction: @js($direction) }"
    x-id="['blat-drawer']"
    {{ $attributes }}
>
    {{ $slot }}
</div>
```

## resources/views/components/ui/drawer-close.blade.php

```blade
<span @click="open = false" data-slot="drawer-close" {{ $attributes->twMerge('inline-block') }}>
    {{ $slot }}
</span>
```

## resources/views/components/ui/drawer-content.blade.php

```blade
@props(['direction' => null])

@php
    $sideClasses = [
        'bottom' => 'inset-x-0 bottom-0 mt-24 max-h-[80vh] rounded-t-lg border-b-0',
        'top' => 'inset-x-0 top-0 mb-24 max-h-[80vh] rounded-b-lg border-t-0',
        'right' => 'inset-y-0 right-0 w-3/4 border-l sm:max-w-sm',
        'left' => 'inset-y-0 left-0 w-3/4 border-r sm:max-w-sm',
    ];
    $enterStart = [
        'bottom' => 'translate-y-full',
        'top' => '-translate-y-full',
        'right' => 'translate-x-full',
        'left' => '-translate-x-full',
    ];
@endphp

<template x-teleport="body">
    <div x-show="open" x-cloak class="fixed inset-0 z-50">
        <div
            x-show="open"
            @click="open = false"
            role="presentation"
            aria-hidden="true"
            data-slot="drawer-overlay"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            class="fixed inset-0 z-50 bg-black/50"
        ></div>

        <div
            x-show="open"
            x-trap.noscroll.inert="open"
            @keydown.escape.window="open = false"
            :id="$id('blat-drawer')"
            x-blat-labelledby="{ label: '[data-slot=drawer-title]', description: '[data-slot=drawer-description]' }"
            role="dialog"
            aria-modal="true"
            tabindex="-1"
            data-slot="drawer-content"
            :data-vaul-drawer-direction="direction"
            x-bind:class="{
                'inset-x-0 bottom-0 mt-24 max-h-[80vh] rounded-t-lg border-b-0': direction === 'bottom',
                'inset-x-0 top-0 mb-24 max-h-[80vh] rounded-b-lg border-t-0': direction === 'top',
                'inset-y-0 right-0 w-3/4 border-l sm:max-w-sm': direction === 'right',
                'inset-y-0 left-0 w-3/4 border-r sm:max-w-sm': direction === 'left'
            }"
            x-transition:enter="transition ease-in-out duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100 translate-x-0 translate-y-0"
            x-transition:leave="transition ease-in-out duration-200"
            x-transition:leave-start="opacity-100 translate-x-0 translate-y-0"
            x-transition:leave-end="opacity-0"
            {{ $attributes->twMerge('bg-background group/drawer-content fixed z-50 flex h-auto flex-col border') }}
        >
            <div
                x-show="direction === 'bottom'"
                aria-hidden="true"
                class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
            ></div>
            {{ $slot }}
        </div>
    </div>
</template>
```

## resources/views/components/ui/drawer-description.blade.php

```blade
<p data-slot="drawer-description" {{ $attributes->twMerge('text-muted-foreground text-sm') }}>{{ $slot }}</p>
```

## resources/views/components/ui/drawer-footer.blade.php

```blade
<div data-slot="drawer-footer" {{ $attributes->twMerge('mt-auto flex flex-col gap-2 p-4') }}>
    {{ $slot }}
</div>
```

## resources/views/components/ui/drawer-header.blade.php

```blade
<div data-slot="drawer-header" {{ $attributes->twMerge('flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left') }}>
    {{ $slot }}
</div>
```

## resources/views/components/ui/drawer-title.blade.php

```blade
<h2 data-slot="drawer-title" {{ $attributes->twMerge('text-foreground font-semibold') }}>{{ $slot }}</h2>
```

## resources/views/components/ui/drawer-trigger.blade.php

```blade
<span
    @click="open = true"
    x-blat-trigger="{ haspopup: 'dialog', controls: $id('blat-drawer') }"
    data-slot="drawer-trigger"
    {{ $attributes->twMerge('inline-block') }}
>
    {{ $slot }}
</span>
```