32 lines
886 B
Svelte
32 lines
886 B
Svelte
<script lang="ts">
|
|
import { Menu } from 'lucide-svelte';
|
|
|
|
import { navigation } from '$lib/config';
|
|
|
|
import MobileNavItem from './mobile-nav-item.svelte';
|
|
|
|
import * as Drawer from '$lib/components/ui/drawer';
|
|
import Button from '$lib/components/ui/button/button.svelte';
|
|
</script>
|
|
|
|
<Drawer.Root>
|
|
<Drawer.Trigger asChild let:builder aria-label="open mobile menu">
|
|
<Button class="sm:hidden" builders={[builder]} variant="outline" size="icon"
|
|
><Menu class="h-4 w-4" /></Button
|
|
>
|
|
</Drawer.Trigger>
|
|
<Drawer.Content>
|
|
<div class="container mx-auto">
|
|
<Drawer.Title class="sr-only mb-4 font-medium">Navigation</Drawer.Title>
|
|
<nav class="py-4">
|
|
<ul class="flex w-full flex-col justify-center gap-4">
|
|
{#each navigation as navItem}
|
|
<li>
|
|
<MobileNavItem {navItem} />
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</Drawer.Content>
|
|
</Drawer.Root>
|