More work?

src/App.vue

@@ -1,21 +1,95 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterLink, RouterView } from 'vue-router';
+import { ref, onMounted } from 'vue';
+
+// Authentication state
+const isAuthenticated = ref(false);
+const username = ref("");
+
+// Theme state and available themes
+const theme = ref(localStorage.getItem("theme") || "mocha");
+const availableThemes = [
+  "mocha",
+  "latte",
+  "yule-night",
+  "yule-day",
+  "midsummer-twilight",
+  "midsummer-daylight",
+  "fireworks-night",
+  "parade-day",
+  "harvest-twilight",
+  "golden-hour",
+  "stargazer",
+  "daydreamer",
+];
+
+// Apply theme and check authentication state
+onMounted(() => {
+  const token = localStorage.getItem("token");
+  if (token) {
+    isAuthenticated.value = true;
+    username.value = localStorage.getItem("username") || "";
+  }
+  document.documentElement.setAttribute("data-theme", theme.value);
+});
+
+// Logout function
+const logout = () => {
+  localStorage.removeItem("token");
+  localStorage.removeItem("username");
+  isAuthenticated.value = false;
+  window.location.href = "/";
+};
+
+// Change theme function
+const changeTheme = (newTheme: string) => {
+  theme.value = newTheme;
+  document.documentElement.setAttribute("data-theme", newTheme);
+  localStorage.setItem("theme", newTheme);
+};
 </script>
 
 <template>
   <div id="app">
+    <!-- Header and Navigation -->
     <header>
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/servers">Servers</RouterLink>
-        <RouterLink to="/projects">Projects</RouterLink>
-        <a href="" 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>
+      <nav class="nav-bar">
+        <div class="nav-links">
+          <RouterLink to="/">Home</RouterLink>
+          <RouterLink to="/servers">Servers</RouterLink>
+          <RouterLink to="/projects">Projects</RouterLink>
+          <RouterLink v-if="isAuthenticated" to="/recipes">Recipes</RouterLink>
+          <RouterLink v-if="isAuthenticated" to="/calendar">Calendar</RouterLink>
+          <RouterLink v-if="isAuthenticated" to="/gallery">Gallery</RouterLink>
+          <a href="https://foundryvtt.example.com" 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>
+        </div>
       </nav>
     </header>
 
+    <!-- Authentication & Theme Controls -->
+    <section class="controls">
+      <div class="theme-selector">
+        <label for="theme-switcher">Theme:</label>
+        <select id="theme-switcher" v-model="theme" @change="changeTheme(theme)">
+          <option v-for="t in availableThemes" :key="t" :value="t">{{ t }}</option>
+        </select>
+      </div>
+      <div class="auth-controls">
+        <span v-if="isAuthenticated">
+          Welcome, {{ username }}!
+          <button @click="logout" class="logout-button">Logout</button>
+        </span>
+        <span v-else>
+          <RouterLink to="/login">Login</RouterLink>&nbsp;&nbsp;|&nbsp;
+          <RouterLink to="/register">Register</RouterLink>
+        </span>
+      </div>
+    </section>
+
+    <!-- Main Content -->
     <main>
       <RouterView />
     </main>