flotilla/src/lib/components/Drawer.svelte

20 lines
524 B
Svelte
Raw Normal View History

2024-09-25 22:49:17 +00:00
<script lang="ts">
2024-10-17 21:26:53 +00:00
import {fade, translate} from "@lib/transition"
2024-09-25 22:49:17 +00:00
2024-10-15 22:52:30 +00:00
export let onClose
2024-09-25 22:49:17 +00:00
</script>
2024-10-24 22:48:45 +00:00
<div class="drawer fixed inset-0 z-modal">
2024-10-15 22:52:30 +00:00
<button
2025-02-03 23:01:42 +00:00
aria-label="Close drawer"
2024-10-15 22:52:30 +00:00
class="absolute inset-0 cursor-pointer bg-black opacity-50"
transition:fade
2025-02-03 23:01:42 +00:00
on:click={onClose}>
</button>
2024-10-15 22:52:30 +00:00
<div
2025-02-01 01:40:14 +00:00
class="scroll-container saiy sair absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
2024-10-17 21:26:53 +00:00
transition:translate={{axis: "x", duration: 300}}>
2024-10-15 22:52:30 +00:00
<slot />
2024-09-25 22:49:17 +00:00
</div>
</div>