<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>
