.

wip-refactor/components/Navbar.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const theme: Ref<string> = ref("mocha");
+
+import Card from './Card.vue';
+onBeforeMount(() => {
+    theme.value = localStorage.getItem("theme") || "mocha";
+    document.documentElement.setAttribute("data-theme", theme.value);
+});
+const availableThemes = [
+    "mocha",
+    "latte",
+    "yule-night",
+    "yule-day",
+    "midsummer-twilight",
+    "midsummer-daylight",
+    "fireworks-night",
+    "parade-day",
+    "harvest-twilight",
+    "golden-hour",
+    "stargazer",
+    "daydreamer",
+];
+
+const changeTheme = (newTheme: string) => {
+    theme.value = newTheme;
+    document.documentElement.setAttribute("data-theme", newTheme);
+    localStorage.setItem("theme", newTheme);
+};
+</script>
+
+<template>
+    <nav class="flex justify-center">
+        <Card class="flex flex-wrap justify-center max-w-[40rem]  border border-border">
+            <NuxtLink to="/">Home</NuxtLink>
+            <NuxtLink to="/servers">Servers</NuxtLink>
+            <NuxtLink to="/diagnostics">Diagnostics</NuxtLink>
+            <NuxtLink to="/projects">Projects</NuxtLink>
+            <a href="https://vtt.smgames.club" target="_blank">Foundry VTT</a>
+            <a href="https://oekaki.smgames.club" target="_blank">Oekaki</a>
+            <a href="https://social.smgames.club/" target="_blank">Social</a>
+            <a href="https://madstar.studio" target="_blank">Shop</a>
+            <!-- Icon inline dropdown for theme switching (use paint palette icon) -->
+            <!-- Only show an icon, no title or label -->
+            <select v-model="theme" @change="changeTheme(theme)">
+                <option v-for="t in availableThemes" :key="t" :value="t">{{ t }}</option>
+            </select>
+            <HueComputer :key=theme />
+        </Card>
+    </nav>
+</template>
+
+<style>
+a {
+    @apply m-2
+}
+</style>