🐛 Fixes bugs in existing pages

app/layouts/default.vue

@@ -3,34 +3,29 @@
     <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"
-        />
+      <div class="container mx-auto flex items-center justify-between px-5">
+        <div class="flex gap-2">
+          <div class="flex items-center justify-center w-[40px]">
+            <img :src="IconLight" alt="The Solar Network" class="fit-cover" />
+          </div>
 
-        <n-menu
-          v-model:value="activeKey"
-          mode="horizontal"
-          :options="menuOptions"
-        />
-
-        <div class="grow" />
+          <n-menu
+            v-model:value="activeKey"
+            mode="horizontal"
+            :options="menuOptions"
+          />
+        </div>
 
         <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-icon :component="UserCircleIcon" />
+            <n-icon :component="UserIcon" :size="20" />
           </n-avatar>
         </n-dropdown>
       </div>
@@ -47,8 +42,14 @@ import IconLight from "~/assets/images/cloudy-lamb.png"
 
 import type { MenuOption } from "naive-ui"
 import { computed, h } from "vue"
-import { useRouter, useRoute } from "vue-router"
-import { CompassIcon, UserCircleIcon } from "lucide-vue-next"
+import { useRouter, useRoute, RouterLink } from "vue-router"
+import {
+  CompassIcon,
+  LayoutDashboardIcon,
+  LogInIcon,
+  UserIcon,
+  UserPlusIcon
+} from "lucide-vue-next"
 
 const apiBase = useSolarNetworkUrl()
 const router = useRouter()
@@ -63,17 +64,18 @@ const activeKey = computed(() => {
 })
 
 function renderIcon(icon: any) {
-  return () => h(NIcon, null, { default: () => icon })
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+function renderLabel(label: string, route: string) {
+  return () => h(RouterLink, { to: route }, { default: () => label })
 }
 
 const menuOptions: MenuOption[] = [
   {
-    label: "Explore",
+    label: renderLabel("Explore", "/"),
     key: "explore",
-    icon: renderIcon(h(CompassIcon)),
-    props: {
-      onClick: () => router.push("/")
-    }
+    icon: renderIcon(CompassIcon)
   }
 ]
 
@@ -83,7 +85,7 @@ const dropdownOptions = computed(() => {
       {
         label: "Dashboard",
         key: "/accounts/me",
-        icon: () => h("span", { class: "mdi mdi-view-dashboard" })
+        icon: renderIcon(LayoutDashboardIcon)
       }
     ]
   } else {
@@ -91,12 +93,12 @@ const dropdownOptions = computed(() => {
       {
         label: "Login",
         key: "/auth/login",
-        icon: () => h("span", { class: "mdi mdi-login" })
+        icon: renderIcon(LogInIcon)
       },
       {
         label: "Create Account",
         key: "/auth/create-account",
-        icon: () => h("span", { class: "mdi mdi-account-plus" })
+        icon: renderIcon(UserPlusIcon)
       }
     ]
   }