34 lines
1.2 KiB
Svelte
34 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
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">
|
|
<nav class="mx-auto flex max-w-6xl items-center gap-4 px-4 py-3">
|
|
<a href="/" class="flex items-center gap-2">
|
|
<span class="rounded bg-primary px-2 py-1 font-bold text-white">FA</span>
|
|
<span class="font-semibold">FictionArchive</span>
|
|
</a>
|
|
<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>
|