♻️ Moved the components to use naive ui + daisyui

app/layouts/default.vue

@@ -1,66 +1,34 @@
 <template>
-  <v-app :theme="colorMode.preference">
-    <v-app-bar elevation="2" color="surface-lighten-5">
-      <v-container class="mx-auto flex align-center justify-center">
-        <img
-          :src="colorMode.value == 'dark' ? IconDark : IconLight"
-          width="32"
-          height="32"
-          class="me-4"
-          alt="The Solar Network"
-        />
+  <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" />
 
-        <v-btn
-          v-for="link in links"
-          :key="link.title"
-          :text="link.title"
-          :to="link.href"
-          :prepend-icon="link.icon"
-          variant="text"
-        />
-
-        <v-spacer />
-
-        <v-menu>
-          <template #activator="{ props }">
-            <v-avatar
-              v-bind="props"
-              class="me-4"
-              color="grey-darken-1"
-              size="32"
-              icon="mdi-account-circle"
-              :image="
-                user?.profile.picture
-                  ? `${apiBase}/drive/files/${user?.profile.picture?.id}`
-                  : undefined
-              "
-            />
+        <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>
-          <v-list density="compact">
-            <v-list-item v-if="!user" to="/auth/login" prepend-icon="mdi-login"
-              >Login</v-list-item
-            >
-            <v-list-item
-              v-if="!user"
-              to="/auth/create-account"
-              prepend-icon="mdi-account-plus"
-              >Create Account</v-list-item
-            >
-            <v-list-item
-              v-if="user"
-              to="/accounts/me"
-              prepend-icon="mdi-view-dashboard"
-              >Dashboard</v-list-item
-            >
-          </v-list>
-        </v-menu>
-      </v-container>
-    </v-app-bar>
+          {{ link.title }}
+        </n-button>
 
-    <v-main>
+        <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
+            ">
+            <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">
       <slot />
-    </v-main>
-  </v-app>
+    </main>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -68,9 +36,12 @@ import IconLight from "~/assets/images/cloudy-lamb.png"
 import IconDark from "~/assets/images/cloudy-lamb@dark.png"
 
 import type { NavLink } from "~/types/navlink"
+import { computed, h } from "vue"
+import { useRouter } from "vue-router"
 
 const apiBase = useSolarNetworkUrl()
 const colorMode = useColorMode()
+const router = useRouter()
 
 const { user } = useUserStore()
 
@@ -81,4 +52,33 @@ const links: NavLink[] = [
     icon: "mdi-compass"
   }
 ]
+
+const dropdownOptions = computed(() => {
+  if (user) {
+    return [
+      {
+        label: "Dashboard",
+        key: "/accounts/me",
+        icon: () => h('span', { class: 'mdi mdi-view-dashboard' })
+      }
+    ];
+  } else {
+    return [
+      {
+        label: "Login",
+        key: "/auth/login",
+        icon: () => h('span', { class: 'mdi mdi-login' })
+      },
+      {
+        label: "Create Account",
+        key: "/auth/create-account",
+        icon: () => h('span', { class: 'mdi mdi-account-plus' })
+      }
+    ];
+  }
+});
+
+function handleDropdownSelect(key: string) {
+  router.push(key);
+}
 </script>