30 lines
834 B
Svelte
30 lines
834 B
Svelte
<script lang="ts">
|
|
import type {Component} from "svelte"
|
|
import {fade} from "@lib/transition"
|
|
|
|
type Props = {
|
|
onClose?: any
|
|
active?: boolean
|
|
children: {
|
|
component: Component
|
|
props: Record<string, any>
|
|
}
|
|
}
|
|
|
|
const {onClose, active = true, children}: Props = $props()
|
|
</script>
|
|
|
|
<div
|
|
inert={!active}
|
|
class="drawer fixed inset-x-0 top-0 z-modal bottom-[calc(var(--mobile-nav-height)+var(--saib))] md:bottom-0">
|
|
<button
|
|
aria-label="Close drawer"
|
|
class="absolute inset-0 cursor-pointer bg-black opacity-50"
|
|
transition:fade
|
|
onclick={onClose}>
|
|
</button>
|
|
<div
|
|
class="pt-sai pl-sai border-line absolute bottom-0 left-0 top-0 flex w-full overflow-hidden border-r border-solid shadow-xl md:w-80 md:pb-sai lg:w-96">
|
|
<children.component {...children.props} />
|
|
</div>
|
|
</div>
|