| 1 | <script lang="ts"> |
| 2 | import Sidebar from './Sidebar.svelte'; |
| 3 | import type { NavSection } from '$lib/nav'; |
| 4 | |
| 5 | let { open = $bindable(false), sections }: { open: boolean; sections: NavSection[] } = $props(); |
| 6 | |
| 7 | function close() { |
| 8 | open = false; |
| 9 | } |
| 10 | </script> |
| 11 | |
| 12 | {#if open} |
| 13 | <!-- Backdrop --> |
| 14 | <div class="fixed inset-0 z-40 bg-black/50 lg:hidden" role="presentation"> |
| 15 | <button class="absolute inset-0 cursor-default" onclick={close} aria-label="Close navigation" |
| 16 | ></button> |
| 17 | </div> |
| 18 | |
| 19 | <!-- Drawer --> |
| 20 | <div |
| 21 | class="fixed inset-y-0 left-0 z-50 w-72 overflow-y-auto border-r border-border bg-background p-6 lg:hidden" |
| 22 | > |
| 23 | <div class="mb-6 flex items-center justify-between"> |
| 24 | <span class="text-lg font-bold text-gray-900 dark:text-white">Portal Docs</span> |
| 25 | <button |
| 26 | onclick={close} |
| 27 | class="rounded-lg p-1 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800" |
| 28 | aria-label="Close navigation" |
| 29 | > |
| 30 | ✕ |
| 31 | </button> |
| 32 | </div> |
| 33 | <!-- svelte-ignore event_directive_deprecated --> |
| 34 | <div onclick={close} onkeydown={close} role="presentation"> |
| 35 | <Sidebar {sections} /> |
| 36 | </div> |
| 37 | </div> |
| 38 | {/if} |