2024-05-15 12:28:03 +02:00
|
|
|
<template x-teleport="body">
|
2024-05-23 16:51:55 +02:00
|
|
|
<div x-cloak
|
|
|
|
|
x-data="{ show: false }"
|
|
|
|
|
class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 justify-center items-center w-full md:inset-0 h-screen max-h-full flex backdrop-blur-md bg-white/30 dark:bg-gray-800/30"
|
2024-05-15 12:28:03 +02:00
|
|
|
:class="{ 'translate-y-full': !show }"
|
2024-06-01 03:10:30 +02:00
|
|
|
@click.self="$dispatch('drawer-close-{{ $name }}')"
|
|
|
|
|
x-on:touchstart.self="$dispatch('drawer-close-{{ $name }}')"
|
2024-05-15 12:28:03 +02:00
|
|
|
>
|
2024-05-23 16:51:55 +02:00
|
|
|
<div
|
|
|
|
|
id="drawer-{{ $name }}"
|
|
|
|
|
tabindex="-1"
|
|
|
|
|
class="fixed z-40 w-full overflow-y-auto bg-white border-t border-gray-200 rounded-t-lg dark:border-gray-700 dark:bg-gray-800 transition-all max-xl:left-0 max-xl:right-0 max-xl:bottom-0 max-h-full xl:m-auto xl:relative xl:p-4 xl:w-max xl:max-w-7xl xl:rounded-lg xl:border"
|
|
|
|
|
aria-labelledby="drawer-{{ $name }}"
|
|
|
|
|
@drawer-open-{{ $name }}.window="$dispatch('menu-hide'); show = true"
|
|
|
|
|
@drawer-close-{{ $name }}.window="show = false; $dispatch('menu-show')"
|
|
|
|
|
:class="{ 'translate-y-full': !show, 'xl:-bottom-full': !show }"
|
|
|
|
|
>
|
|
|
|
|
<div
|
2024-06-01 03:10:30 +02:00
|
|
|
class="p-4 cursor-pointer max-xl:hover:bg-gray-50 max-xl:dark:hover:bg-gray-700 xl:border-b dark:border-gray-600 xl:flex xl:items-center xl:justify-between xl:p-4">
|
|
|
|
|
<span
|
|
|
|
|
class="xl:hidden absolute w-8 h-1 -translate-x-1/2 bg-gray-300 rounded-lg top-3 left-1/2 dark:bg-gray-600"
|
|
|
|
|
@click="$dispatch('drawer-close-{{ $name }}')"
|
|
|
|
|
x-on:touchstart="$dispatch('drawer-close-{{ $name }}')"
|
|
|
|
|
>
|
2024-05-23 16:51:55 +02:00
|
|
|
</span>
|
|
|
|
|
<h5 class="inline-flex items-center text-base text-gray-500 dark:text-gray-400 font-medium">
|
|
|
|
|
{{ $title }}
|
|
|
|
|
</h5>
|
2024-06-01 03:10:30 +02:00
|
|
|
<button
|
|
|
|
|
class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
|
|
|
|
|
@click="$dispatch('drawer-close-{{ $name }}')"
|
|
|
|
|
x-on:touchstart="$dispatch('drawer-close-{{ $name }}')"
|
|
|
|
|
>
|
2024-05-23 16:51:55 +02:00
|
|
|
<svg class="max-xl:hidden w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
|
|
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
{{ $content }}
|
2024-05-15 12:28:03 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
