From f55de0a83bcc009f0a1b99f2d4a032d15a0d6a12 Mon Sep 17 00:00:00 2001
From: zowks <67444066+zowks@users.noreply.github.com>
Date: Sat, 16 May 2026 13:17:53 +0000
Subject: [PATCH] feat(frontend): add wip navigation bar

---
 .../frontend/src/routes/(app)/+layout.svelte  | 59 +++++++++++++++++++
 .../(app)/components/navigation/Footer.svelte | 23 ++++++++
 .../(app)/components/navigation/Header.svelte | 19 ++++++
 .../components/navigation/Navigation.svelte   | 48 +++++++++++++++
 4 files changed, 149 insertions(+)
 create mode 100644 packages/frontend/src/routes/(app)/+layout.svelte
 create mode 100644 packages/frontend/src/routes/(app)/components/navigation/Footer.svelte
 create mode 100644 packages/frontend/src/routes/(app)/components/navigation/Header.svelte
 create mode 100644 packages/frontend/src/routes/(app)/components/navigation/Navigation.svelte

diff --git a/packages/frontend/src/routes/(app)/+layout.svelte b/packages/frontend/src/routes/(app)/+layout.svelte
new file mode 100644
index 0000000..1b9c1b3
--- /dev/null
+++ b/packages/frontend/src/routes/(app)/+layout.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import Navigation from "./components/navigation/Navigation.svelte";
+
+  import { page } from "$app/state";
+  import {
+    BotIcon,
+    BoxesIcon,
+    ChartAreaIcon,
+    ChevronRightIcon,
+    LayoutDashboardIcon,
+  } from "@lucide/svelte";
+  import { AppBar } from "@skeletonlabs/skeleton-svelte";
+  import type { LayoutProps } from "./$types";
+
+  let { children }: LayoutProps = $props();
+
+  const items = {
+    clusters: [
+      { label: "Home", icon: BoxesIcon, path: "/clusters" },
+      { label: "Layout", icon: LayoutDashboardIcon, path: "/layout" },
+      { label: "Statistics", icon: ChartAreaIcon, path: "/stats" },
+    ],
+    settings: [{ label: "Bot", icon: BotIcon, path: "/settings" }],
+  };
+
+  let [group, label] = $derived.by(() => {
+    for (const [group, links] of Object.entries(items)) {
+      for (const link of links) {
+        if (page.url.pathname !== link.path) continue;
+
+        return [group, link.label];
+      }
+    }
+
+    return [];
+  });
+</script>
+
+<div class="grid grid-cols-[auto_1fr]">
+  <Navigation {items} />
+
+  <div>
+    <AppBar class="bg-surface-50-950">
+      <AppBar.Toolbar class="grid-cols-[1fr_2fr_1fr]">
+        <AppBar.Lead>
+          <ol class="flex items-center gap-2 text-xs">
+            <li class="capitalize font-bold">{group}</li>
+            <li class="opacity-50" aria-hidden="true">
+              <ChevronRightIcon size={10} />
+            </li>
+            <li>{label}</li>
+          </ol>
+        </AppBar.Lead>
+      </AppBar.Toolbar>
+    </AppBar>
+
+    {@render children()}
+  </div>
+</div>
diff --git a/packages/frontend/src/routes/(app)/components/navigation/Footer.svelte b/packages/frontend/src/routes/(app)/components/navigation/Footer.svelte
new file mode 100644
index 0000000..50fba37
--- /dev/null
+++ b/packages/frontend/src/routes/(app)/components/navigation/Footer.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { LogOutIcon, UserIcon } from "@lucide/svelte";
+  import { Avatar } from "@skeletonlabs/skeleton-svelte";
+</script>
+
+<div class="w-full flex justify-between items-center gap-2">
+  <div class="flex gap-2 items-center">
+    <Avatar class="size-10 bg-surface-200-800">
+      <Avatar.Fallback>
+        <UserIcon />
+      </Avatar.Fallback>
+    </Avatar>
+
+    <div class="flex flex-col">
+      <p class="text-sm font-bold">Zowks</p>
+      <p class="text-xs">zowks.</p>
+    </div>
+  </div>
+
+  <button class="btn-icon">
+    <LogOutIcon />
+  </button>
+</div>
diff --git a/packages/frontend/src/routes/(app)/components/navigation/Header.svelte b/packages/frontend/src/routes/(app)/components/navigation/Header.svelte
new file mode 100644
index 0000000..82fa8fb
--- /dev/null
+++ b/packages/frontend/src/routes/(app)/components/navigation/Header.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { BotIcon } from "@lucide/svelte";
+  import { Avatar } from "@skeletonlabs/skeleton-svelte";
+</script>
+
+<div class="w-full flex justify-between items-center gap-2">
+  <div class="flex gap-2 items-center">
+    <Avatar class="size-12 rounded-2xl bg-surface-200-800">
+      <Avatar.Fallback>
+        <BotIcon />
+      </Avatar.Fallback>
+    </Avatar>
+
+    <div class="flex flex-col">
+      <h6 class="h6">Hallmaster</h6>
+      <p class="text-xs">hallmaster#1234</p>
+    </div>
+  </div>
+</div>
diff --git a/packages/frontend/src/routes/(app)/components/navigation/Navigation.svelte b/packages/frontend/src/routes/(app)/components/navigation/Navigation.svelte
new file mode 100644
index 0000000..968d8f1
--- /dev/null
+++ b/packages/frontend/src/routes/(app)/components/navigation/Navigation.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { Icon } from "@lucide/svelte";
+  import { Navigation } from "@skeletonlabs/skeleton-svelte";
+  import Footer from "./Footer.svelte";
+  import Header from "./Header.svelte";
+
+  interface Props {
+    items: Record<string, { label: string; icon: typeof Icon; path: string }[]>;
+  }
+
+  let { items }: Props = $props();
+</script>
+
+<div class="flex">
+  <Navigation
+    layout="sidebar"
+    class="sticky top-0 h-screen grid grid-rows-[auto_1fr_auto] gap-4 bg-surface-50-950"
+  >
+    <Navigation.Header class="flex items-center gap-2">
+      <Header />
+    </Navigation.Header>
+
+    <Navigation.Content>
+      {#each Object.entries(items) as [category, links], index}
+        <Navigation.Group>
+          <Navigation.Label class="capitalize pl-2">
+            {category}
+          </Navigation.Label>
+
+          <Navigation.Menu>
+            {#each links as { icon, label, path }}
+              {@const Icon = icon}
+              <Navigation.TriggerAnchor href={path}>
+                <Icon class="size-4" />
+                <Navigation.TriggerText>{label}</Navigation.TriggerText>
+              </Navigation.TriggerAnchor>
+            {/each}
+          </Navigation.Menu>
+        </Navigation.Group>
+      {/each}
+    </Navigation.Content>
+
+    <Navigation.Footer>
+      <Footer />
+    </Navigation.Footer>
+  </Navigation>
+  <span class="vr"></span>
+</div>