63 lines
2.1 KiB
Svelte
63 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { Dialog, DialogOverlay, Transition, TransitionChild } from "$lib";
|
|
import { XIcon } from "@rgossiaux/svelte-heroicons/outline";
|
|
import Sidebar from "./Sidebar.svelte";
|
|
export let sidebarOpen = false;
|
|
</script>
|
|
|
|
<Transition show={sidebarOpen}>
|
|
<Dialog
|
|
class="fixed inset-0 flex z-40 md:hidden"
|
|
on:close={() => (sidebarOpen = false)}
|
|
>
|
|
<TransitionChild
|
|
enter="transition-opacity ease-linear duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="transition-opacity ease-linear duration-300"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<DialogOverlay class="absolute inset-0 bg-gray-600 bg-opacity-75" />
|
|
</TransitionChild>
|
|
<TransitionChild
|
|
enter="transition ease-in-out duration-300 transform"
|
|
enterFrom="-translate-x-full"
|
|
enterTo="translate-x-0"
|
|
leave="transition ease-in-out duration-300 transform"
|
|
leaveFrom="translate-x-0"
|
|
leaveTo="-translate-x-full"
|
|
>
|
|
<div
|
|
class="relative flex-1 flex flex-col max-w-xs w-full h-full bg-white"
|
|
>
|
|
<TransitionChild
|
|
enter="ease-in-out duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="ease-in-out duration-300"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<div class="absolute top-0 right-0 -mr-12 pt-2">
|
|
<button
|
|
type="button"
|
|
class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
|
on:click={() => (sidebarOpen = false)}
|
|
>
|
|
<span class="sr-only">Close sidebar</span>
|
|
<XIcon class="h-6 w-6 text-white" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
</TransitionChild>
|
|
<div class="mt-5 flex-1 h-0 overflow-y-auto">
|
|
<Sidebar />
|
|
</div>
|
|
</div>
|
|
</TransitionChild>
|
|
<div class="flex-shrink-0 w-14" aria-hidden="true">
|
|
<!-- Dummy element to force sidebar to shrink to fit close icon -->
|
|
</div>
|
|
</Dialog>
|
|
</Transition>
|