81 lines
2.4 KiB
Svelte
81 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import LogOutIcon from "@lucide/svelte/icons/log-out";
|
|
import MoonIcon from "@lucide/svelte/icons/moon";
|
|
import SunIcon from "@lucide/svelte/icons/sun";
|
|
import { mode, toggleMode } from "mode-watcher";
|
|
import { goto } from "$app/navigation";
|
|
import { base } from "$app/paths";
|
|
import { page } from "$app/state";
|
|
import { isSectionActive, SECTIONS, SYSTEM } from "$lib/nav";
|
|
import { session } from "$lib/session.svelte";
|
|
import { cn } from "$lib/utils";
|
|
import Island from "./island.svelte";
|
|
|
|
async function signOut() {
|
|
await session.logout();
|
|
await goto(`${base}/login`);
|
|
}
|
|
</script>
|
|
|
|
<header
|
|
class="relative z-30 grid h-12 shrink-0 grid-cols-[1fr_auto_1fr] items-center gap-3 border-b bg-rack/85 px-3 backdrop-blur-md sm:px-5"
|
|
>
|
|
<nav aria-label="Sections" class="flex min-w-0 items-center gap-4">
|
|
<a
|
|
aria-label="Beaver"
|
|
class="flex size-6 shrink-0 items-center justify-center"
|
|
href="{base}/"
|
|
>
|
|
<span class="size-2.5 rounded-[3px] bg-primary"></span>
|
|
</a>
|
|
<div class="hidden items-center gap-4 sm:flex">
|
|
{#each SECTIONS as item (item.href)}
|
|
{@const active = isSectionActive(page.url.pathname, base, item.href)}
|
|
<a
|
|
aria-current={active ? "page" : undefined}
|
|
class={cn("rule-word", active && "text-foreground")}
|
|
href="{base}{item.href}"
|
|
title="{item.label} ({item.key})"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</nav>
|
|
<Island />
|
|
<div class="flex min-w-0 items-center justify-end gap-3">
|
|
<a
|
|
aria-current={isSectionActive(page.url.pathname, base, SYSTEM.href)
|
|
? "page"
|
|
: undefined}
|
|
class="rule-word hidden sm:inline"
|
|
href="{base}{SYSTEM.href}"
|
|
title="{SYSTEM.label} ({SYSTEM.key})"
|
|
>
|
|
{SYSTEM.label}
|
|
</a>
|
|
<button
|
|
aria-label="Toggle theme"
|
|
class="rule-word inline-flex size-7 items-center justify-center rounded-md"
|
|
onclick={toggleMode}
|
|
title="Toggle theme"
|
|
type="button"
|
|
>
|
|
{#if mode.current === "dark"}
|
|
<SunIcon class="size-4" />
|
|
{:else}
|
|
<MoonIcon class="size-4" />
|
|
{/if}
|
|
</button>
|
|
<button
|
|
aria-label="Sign out"
|
|
class="rule-word hidden size-7 items-center justify-center rounded-md sm:inline-flex"
|
|
onclick={signOut}
|
|
title="Sign out"
|
|
type="button"
|
|
>
|
|
<LogOutIcon class="size-4" />
|
|
</button>
|
|
</div>
|
|
</header>
|