<script lang="ts">
import { page } from '$app/state';
import ThemeToggle from './ThemeToggle.svelte';
import { GITHUB_URL, NAV_LINKS } from '$lib/site';
// `aria-current="page"` is the only nav-state carrier a screen reader gets;
// the rust underline below is the visual half of the same signal.
const isCurrent = (href: string) =>
href === '/' ? page.url.pathname === '/' : page.url.pathname.startsWith(href);
</script>
<header
class="sticky top-0 z-20 border-b border-foundry-border bg-foundry-bg/95 backdrop-blur supports-[backdrop-filter]:bg-foundry-bg/80"
>
<!-- Below `sm` the wordmark, nav, and toggle do not fit one 320px row, so
the nav wraps to a second full-width row rather than forcing the page
to scroll sideways. -->
<div
class="mx-auto flex max-w-content flex-wrap items-center gap-x-4 gap-y-2 px-4 py-3 sm:flex-nowrap sm:px-6"
>
<a href="/" class="flex shrink-0 items-center gap-2 rounded-sm">
<svg viewBox="0 0 32 32" aria-hidden="true" class="h-6 w-6 shrink-0">
<rect x="0" y="0" width="14" height="14" class="fill-foundry-primary" />
<rect x="18" y="0" width="14" height="14" class="fill-foundry-primary/35" />
<rect x="0" y="18" width="14" height="14" class="fill-foundry-primary/35" />
<rect x="18" y="18" width="14" height="14" class="fill-foundry-primary" />
</svg>
<span class="font-display text-lg font-bold tracking-tight">tga</span>
</a>
<nav
aria-label="Main"
class="order-last flex w-full flex-wrap items-center gap-1 sm:order-none sm:ml-auto sm:w-auto sm:gap-2"
>
{#each NAV_LINKS as link (link.href)}
<a
href={link.href}
aria-current={isCurrent(link.href) ? 'page' : undefined}
class="rounded-sm px-2 py-1 font-mono text-xs uppercase tracking-wider transition-colors sm:text-sm
{isCurrent(link.href)
? 'text-foundry-primary underline decoration-2 underline-offset-[6px]'
: 'text-foundry-secondary hover:text-foundry-text'}"
>
{link.label}
</a>
{/each}
<a
href={GITHUB_URL}
rel="noreferrer noopener"
class="rounded-sm px-2 py-1 font-mono text-xs uppercase tracking-wider text-foundry-secondary transition-colors hover:text-foundry-text sm:text-sm"
>
GitHub
</a>
</nav>
<div class="ml-auto shrink-0 sm:ml-0">
<ThemeToggle />
</div>
</div>
</header>