Navigation Menu

<script lang="ts">
	import * as NavigationMenu from '$lib/components/ui/navigation-menu';
</script>

<NavigationMenu.Root>
	<NavigationMenu.List>
		<NavigationMenu.Item>
			<NavigationMenu.Trigger>Components</NavigationMenu.Trigger>
			<NavigationMenu.Content>
				<ul class="grid w-[22rem] gap-2 p-3">
					<li><NavigationMenu.Link href="/components/accordion">Accordion</NavigationMenu.Link></li>
					<li><NavigationMenu.Link href="/components/tabs">Tabs</NavigationMenu.Link></li>
				</ul>
			</NavigationMenu.Content>
		</NavigationMenu.Item>
	</NavigationMenu.List>
</NavigationMenu.Root>

<script lang="ts">
	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
	import { cn } from '$lib/utils.js';
	import NavigationMenuViewport from './navigation-menu-viewport.svelte';

	let {
		ref = $bindable(null),
		class: className,
		viewport = true,
		children,
		...restProps
	}: NavigationMenuPrimitive.RootProps & {
		viewport?: boolean;
	} = $props();
</script>

<NavigationMenuPrimitive.Root
	bind:ref
	data-slot="navigation-menu"
	data-viewport={viewport}
	class={cn(
		'group/navigation-menu relative flex max-w-max max-w-max flex-1 items-center justify-center',
		className
	)}
	{...restProps}
>
	{@render children?.()}
	{#if viewport}
		<NavigationMenuViewport />
	{/if}
</NavigationMenuPrimitive.Root>

<NavigationMenu.Link href="/dashboard">
	<Icon name="layout-grid-line" size="1rem" class="size-4" />
	<div>
		<div class="font-medium text-foreground">Dashboard</div>
		<div class="text-xs text-muted-foreground">Live overview</div>
	</div>
</NavigationMenu.Link>