Files
flotilla/src/lib/components/Drawer.svelte
T
2024-10-09 12:59:14 -07:00

38 lines
786 B
Svelte

<script lang="ts">
import {randomId} from "@welshman/lib"
const id = randomId()
let input: any
let label: any
export const open = () => {
if (!input.checked) {
label.click()
}
}
export const close = () => {
if (input.checked) {
label.click()
}
}
export const toggle = () => {
label.click()
}
</script>
<div class="drawer drawer-end">
<input {id} type="checkbox" class="drawer-toggle" bind:this={input} />
<div class="drawer-content">
<label for={id} bind:this={label} />
</div>
<div class="drawer-side z-modal">
<label for={id} aria-label="close sidebar" class="drawer-overlay"></label>
<div class="menu overflow-auto h-full w-80 bg-base-200 p-0 text-base-content">
<slot />
</div>
</div>
</div>