♻️ Refactored some components to new UI

app/layouts/default.vue

@@ -1,31 +1,43 @@
 <template>
-  <div class="flex flex-col min-h-screen" :data-theme="colorMode.preference">
-    <header class="navbar bg-base-100 shadow-lg">
-      <div class="container mx-auto flex items-center justify-center">
-        <img :src="colorMode.value == 'dark' ? IconDark : IconLight" width="32" height="32" class="mr-4"
-          alt="The Solar Network" />
+  <div class="flex flex-col min-h-screen">
+    <header
+      class="navbar bg-transparent shadow-lg fixed top-0 left-0 right-0 backdrop-blur-2xl z-1000 h-[64px]"
+    >
+      <div class="container mx-auto flex items-center">
+        <img
+          :src="IconLight"
+          width="32"
+          height="32"
+          class="mr-4"
+          alt="The Solar Network"
+        />
 
-        <n-button v-for="link in links" :key="link.title" text @click="() => router.push(link.href)">
-          <template #icon>
-            <span :class="`mdi ${link.icon}`"></span>
-          </template>
-          {{ link.title }}
-        </n-button>
+        <n-menu
+          v-model:value="activeKey"
+          mode="horizontal"
+          :options="menuOptions"
+        />
 
         <div class="grow" />
 
         <n-dropdown :options="dropdownOptions" @select="handleDropdownSelect">
-          <n-avatar round class="mr-4 cursor-pointer" :size="32" :src="user?.profile.picture
-            ? `${apiBase}/drive/files/${user?.profile.picture?.id}`
-            : undefined
-            ">
+          <n-avatar
+            round
+            class="mr-4 cursor-pointer"
+            :size="32"
+            :src="
+              user?.profile.picture
+                ? `${apiBase}/drive/files/${user?.profile.picture?.id}`
+                : undefined
+            "
+          >
             <span v-if="!user" class="mdi mdi-account-circle text-3xl"></span>
           </n-avatar>
         </n-dropdown>
       </div>
     </header>
 
-    <main class="grow container mx-auto py-4">
+    <main class="grow container mx-auto py-4 mt-[64px]">
       <slot />
     </main>
   </div>
@@ -33,23 +45,36 @@
 
 <script lang="ts" setup>
 import IconLight from "~/assets/images/cloudy-lamb.png"
-import IconDark from "~/assets/images/cloudy-lamb@dark.png"
 
-import type { NavLink } from "~/types/navlink"
+import type { MenuOption } from "naive-ui"
 import { computed, h } from "vue"
-import { useRouter } from "vue-router"
+import { useRouter, useRoute } from "vue-router"
+import { CompassIcon } from "lucide-vue-next"
 
 const apiBase = useSolarNetworkUrl()
-const colorMode = useColorMode()
 const router = useRouter()
+const route = useRoute()
 
 const { user } = useUserStore()
 
-const links: NavLink[] = [
+const activeKey = computed(() => {
+  // Map route paths to menu keys
+  if (route.path === "/") return "explore"
+  return null
+})
+
+function renderIcon(icon: any) {
+  return () => h(NIcon, null, { default: () => icon })
+}
+
+const menuOptions: MenuOption[] = [
   {
-    title: "Explore",
-    href: "/",
-    icon: "mdi-compass"
+    label: "Explore",
+    key: "explore",
+    icon: renderIcon(h(CompassIcon)),
+    props: {
+      onClick: () => router.push("/")
+    }
   }
 ]
 
@@ -59,26 +84,26 @@ const dropdownOptions = computed(() => {
       {
         label: "Dashboard",
         key: "/accounts/me",
-        icon: () => h('span', { class: 'mdi mdi-view-dashboard' })
+        icon: () => h("span", { class: "mdi mdi-view-dashboard" })
       }
-    ];
+    ]
   } else {
     return [
       {
         label: "Login",
         key: "/auth/login",
-        icon: () => h('span', { class: 'mdi mdi-login' })
+        icon: () => h("span", { class: "mdi mdi-login" })
       },
       {
         label: "Create Account",
         key: "/auth/create-account",
-        icon: () => h('span', { class: 'mdi mdi-account-plus' })
+        icon: () => h("span", { class: "mdi mdi-account-plus" })
       }
-    ];
+    ]
   }
-});
+})
 
 function handleDropdownSelect(key: string) {
-  router.push(key);
+  router.push(key)
 }
 </script>