Should be mostly working, doing some additional QOL

fictionarchive-web-astro/src/lib/components/Navbar.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
+	import * as NavigationMenu from '$lib/components/ui/navigation-menu';
 	import AuthenticationDisplay from './AuthenticationDisplay.svelte';
+
+	let pathname = $state(typeof window !== 'undefined' ? window.location.pathname : '/');
+
+	function isActive(href: string): boolean {
+		if (href === '/') {
+			return pathname === '/';
+		}
+		return pathname.startsWith(href);
+	}
 </script>
 
 <header class="sticky top-0 z-10 border-b bg-white/80 backdrop-blur dark:bg-gray-900/80">
@@ -10,12 +19,15 @@
 			<span class="rounded bg-primary px-2 py-1 font-bold text-white">FA</span>
 			<span class="font-semibold">FictionArchive</span>
 		</a>
-		<a href="/">
-			<Button variant="ghost">Novels</Button>
-		</a>
-		<div class="flex-1">
-			<Input type="search" placeholder="Search..." class="max-w-xs" />
-		</div>
+		<NavigationMenu.Root viewport={false}>
+			<NavigationMenu.List>
+				<NavigationMenu.Item>
+					<NavigationMenu.Link href="/novels" active={isActive('/novels')}>Novels</NavigationMenu.Link>
+				</NavigationMenu.Item>
+			</NavigationMenu.List>
+		</NavigationMenu.Root>
+		<div class="flex-1"></div>
+		<Input type="search" placeholder="Search..." class="max-w-xs" />
 		<AuthenticationDisplay />
 	</nav>
 </header>