blob: 72a6ebf8f2fb63cfd20a5f82b37fae415a6edc3f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<script lang="ts">
import ListIcon from "phosphor-svelte/lib/ListIcon";
import { router } from "../router.svelte.js";
import { wsClient } from "../ws.svelte.js";
const { onToggleSidebar }: { onToggleSidebar: () => void } = $props();
</script>
<header class="navbar bg-base-200 px-4 min-h-14 flex-shrink-0">
<div class="navbar-start">
<button class="text-xl font-bold tracking-tight btn btn-ghost px-0" onclick={() => router.navigate("dashboard")}>Dispatch</button>
</div>
<div class="navbar-end flex items-center gap-3">
<span class="flex items-center gap-1.5 text-xs text-base-content/60">
<span class="status status-sm {wsClient.connectionStatus === 'connected' ? 'status-success' : wsClient.connectionStatus === 'connecting' ? 'status-warning' : 'status-error'}"></span>
<span class="capitalize">{wsClient.connectionStatus}</span>
</span>
<button
type="button"
class="btn btn-square btn-sm btn-neutral"
onclick={onToggleSidebar}
aria-label="Toggle sidebar"
>
<ListIcon size={20} weight="bold" aria-hidden="true" />
</button>
</div>
</header>
|
