33 lines
974 B
Svelte
33 lines
974 B
Svelte
<script lang="ts">
|
|
import { base } from "$app/paths";
|
|
import { page } from "$app/state";
|
|
import { isActive, SYSTEM_PAGES } from "$lib/nav";
|
|
import { cn } from "$lib/utils";
|
|
|
|
let { children } = $props();
|
|
</script>
|
|
|
|
<svelte:head><title>System · Beaver</title></svelte:head>
|
|
|
|
<div class="min-h-0 flex-1 overflow-y-auto">
|
|
<div class="mx-auto flex w-full max-w-5xl flex-col gap-6 px-4 py-6 sm:px-6">
|
|
<nav
|
|
aria-label="System pages"
|
|
class="flex flex-wrap items-baseline gap-x-5 gap-y-1"
|
|
>
|
|
<h1 class="font-semibold text-lg tracking-tight">System</h1>
|
|
{#each SYSTEM_PAGES as item (item.href)}
|
|
{@const active = isActive(page.url.pathname, base, item.href)}
|
|
<a
|
|
aria-current={active ? "page" : undefined}
|
|
class={cn("rule-word", active && "text-foreground")}
|
|
href="{base}{item.href}"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
{/each}
|
|
</nav>
|
|
{@render children()}
|
|
</div>
|
|
</div>
|