76 lines
2.5 KiB
Svelte
76 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import LogOutIcon from "@lucide/svelte/icons/log-out";
|
|
import { goto } from "$app/navigation";
|
|
import { base } from "$app/paths";
|
|
import { page } from "$app/state";
|
|
import LiveDot from "$lib/components/live-dot.svelte";
|
|
import ThemeToggle from "$lib/components/theme-toggle.svelte";
|
|
import { Button } from "$lib/components/ui/button";
|
|
import { gateway } from "$lib/gateway.svelte";
|
|
import { isActive, NAV } from "$lib/nav";
|
|
import { session } from "$lib/session.svelte";
|
|
import { cn } from "$lib/utils";
|
|
|
|
const running = $derived(gateway.running.length);
|
|
|
|
async function signOut() {
|
|
await session.logout();
|
|
await goto(`${base}/login`);
|
|
}
|
|
</script>
|
|
|
|
<aside
|
|
class="hidden w-52 shrink-0 flex-col border-r bg-sidebar text-sidebar-foreground sm:flex"
|
|
>
|
|
<a
|
|
class="flex h-12 items-center gap-2 border-b px-4 font-semibold tracking-tight"
|
|
href="{base}/"
|
|
>
|
|
<span class="size-2.5 rounded-sm bg-primary"></span>
|
|
Beaver
|
|
</a>
|
|
<nav aria-label="Sections" class="flex flex-1 flex-col gap-0.5 p-2">
|
|
{#each NAV as item (item.href)}
|
|
{@const active = isActive(page.url.pathname, base, item.href)}
|
|
<a
|
|
aria-current={active ? "page" : undefined}
|
|
class={cn(
|
|
"flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm transition-colors",
|
|
active
|
|
? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
|
|
: "text-sidebar-foreground/80 hover:bg-sidebar-accent/60 hover:text-sidebar-foreground"
|
|
)}
|
|
href="{base}{item.href}"
|
|
>
|
|
<item.icon class="size-4 shrink-0 text-icon" />
|
|
<span class="flex-1">{item.label}</span>
|
|
{#if item.href === "/" && running > 0}
|
|
<span
|
|
class="tabular rounded-full bg-signal/12 px-1.5 font-medium text-signal text-xs"
|
|
>
|
|
{running}
|
|
</span>
|
|
{/if}
|
|
</a>
|
|
{/each}
|
|
</nav>
|
|
<div class="flex flex-col gap-2 border-t p-3">
|
|
<LiveDot detail={gateway.live.detail} state={gateway.live.state} />
|
|
<div class="flex items-center justify-between gap-2">
|
|
<span class="truncate text-muted-foreground text-xs">{session.user}</span>
|
|
<div class="flex items-center">
|
|
<ThemeToggle />
|
|
<Button
|
|
aria-label="Sign out"
|
|
onclick={signOut}
|
|
size="icon-sm"
|
|
title="Sign out"
|
|
variant="ghost"
|
|
>
|
|
<LogOutIcon class="size-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|