Slideovers

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <x-lb.element.slideover>
 
        <x-slot name="trigger">
            <x-lb.element.button.primary>
                Open Right Slideover
            </x-lb.element.button.primary>
        </x-slot>
 
        <x-lb.element.slideover.panel direction="right" width="max-w-lg" height="h-full">
            <x-lb.template.placeholder.background-pattern />
        </x-lb.element.slideover.panel>
 
    </x-lb.element.slideover>
 
    <x-lb.element.slideover>
 
        <x-slot name="trigger">
            <x-lb.element.button.primary>
                Open Left Slideover
            </x-lb.element.button.primary>
        </x-slot>
 
        <x-lb.element.slideover.panel direction="left" width="max-w-lg" height="h-full">
            <x-lb.template.placeholder.background-pattern />
        </x-lb.element.slideover.panel>
 
    </x-lb.element.slideover>
 
    <x-lb.element.slideover>
 
        <x-slot name="trigger">
            <x-lb.element.button.primary>
                Open Bottom Slideover
            </x-lb.element.button.primary>
        </x-slot>
 
        <x-lb.element.slideover.panel direction="bottom" width="w-full" height="h-96">
            <x-lb.template.placeholder.background-pattern />
        </x-lb.element.slideover.panel>
 
    </x-lb.element.slideover>
 
    <x-lb.element.slideover>
 
        <x-slot name="trigger">
            <x-lb.element.button.primary>
                Open Top Slideover
            </x-lb.element.button.primary>
        </x-slot>
 
        <x-lb.element.slideover.panel direction="top" width="w-full" height="h-96">
            <x-lb.template.placeholder.background-pattern />
        </x-lb.element.slideover.panel>
 
    </x-lb.element.slideover>
</div>

@props([
    'data' => 'slideoverOpen',
])
 
<div x-data="{ '{{ $data }}': false }" @keydown.escape.window="$dispatch('close-slideover-panel')"
    x-on:close-slideover-panel.window="{{ $data }} = false">
 
    @isset($trigger)
        <div @click="slideoverOpen=true">
            {{ $trigger }}
        </div>
    @endisset
 
    {{ $slot }}
</div>

@props([
    'width' => 'max-w-lg',
    'height' => 'h-full',
    'rounded' => 'lg',
    'custom' => '',
    'data' => 'slideoverOpen',
    'direction' => 'right',
])
 
@php
    $roundedClass = ' sm:rounded-' . $rounded;
 
    $directions = [
        'right' => [
            'enter' => 'transform transition ease-in-out duration-500 sm:duration-700',
            'enter-start' => 'translate-x-full',
            'enter-end' => 'translate-x-0',
            'leave' => 'transform transition ease-in-out duration-500 sm:duration-700',
            'leave-start' => 'translate-x-0',
            'leave-end' => 'translate-x-full',
            'side' => 'right-0 inset-y-0',
        ],
        'left' => [
            'enter' => 'transform transition ease-in-out duration-500 sm:duration-700',
            'enter-start' => '-translate-x-full',
            'enter-end' => 'translate-x-0',
            'leave' => 'transform transition ease-in-out duration-500 sm:duration-700',
            'leave-start' => 'translate-x-0',
            'leave-end' => '-translate-x-full',
            'side' => 'left-0 inset-y-0',
        ],
        'bottom' => [
            'enter' => 'transition ease-out duration-500 sm:duration-700',
            'enter-start' => 'translate-y-full',
            'enter-end' => 'translate-y-0',
            'leave' => 'transition ease-in duration-500 sm:duration-700',
            'leave-start' => 'translate-y-0',
            'leave-end' => 'translate-y-full',
            'side' => 'bottom-0 ',
        ],
        'top' => [
            'enter' => 'transform transition ease-in-out duration-500 sm:duration-700',
            'enter-start' => '-translate-y-full',
            'enter-end' => 'translate-y-0',
            'leave' => 'transform transition ease-in-out duration-500 sm:duration-700',
            'leave-start' => 'translate-y-0',
            'leave-end' => '-translate-y-full',
            'side' => 'top-0 inset-y-0',
        ],
    ];
 
    $classes = $roundedClass . ' ' . $custom . ' ' . $width . ' ' . $height . ' ' . $directions[$direction]['side'];
 
@endphp
 
<template x-teleport="body">
    <div x-show="{{ $data }}" @keydown.window.escape="$dispatch('close-slideover-panel')" class="relative z-[99]"
        x-trap.noscroll.inert="{{ $data }}" style="display:none">
        <div x-show="{{ $data }}" x-transition.opacity.duration.600ms @click="$dispatch('close-slideover-panel')"
            class="fixed inset-0 bg-black bg-opacity-10"></div>
        <div class="fixed inset-0">
            <div class="absolute inset-0">
                <div class="fixed flex max-w-full {{ $classes }}">
                    <div x-show="{{ $data }}" @click.away="$dispatch('close-slideover-panel')"
                        x-transition:enter="{{ $directions[$direction]['enter'] }}"
                        x-transition:enter-start="{{ $directions[$direction]['enter-start'] }}"
                        x-transition:enter-end="{{ $directions[$direction]['enter-end'] }}"
                        x-transition:leave="{{ $directions[$direction]['leave'] }}"
                        x-transition:leave-start="{{ $directions[$direction]['leave-start'] }}"
                        x-transition:leave-end="{{ $directions[$direction]['leave-end'] }}" class="w-screen">
                        <div
                            class="flex flex-col h-full  l bg-white border-l shadow-lg border-neutral-100/70 scrollbar-design">
                            {{ $slot }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>