🐛 Fixes bugs in existing pages

app/components/Post/PostQuickReply.vue

@@ -7,8 +7,17 @@
       :rows="5"
       auto-grow
     ></n-input>
-    <div class="flex justify-end mt-4">
-      <n-button append-icon="mdi-send" size="small">Send</n-button>
+    <div class="flex justify-end mt-3">
+      <n-button type="primary">
+        <template #icon>
+          <n-icon :component="SendIcon" />
+        </template>
+        Send
+      </n-button>
     </div>
   </n-card>
 </template>
+
+<script setup lang="ts">
+import { SendIcon } from "lucide-vue-next"
+</script>

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)
       }
     ]
   }

app/pages/posts/[...slug].vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="py-6">
+  <div class="py-6 px-5">
     <div v-if="pending" class="text-center py-12">
       <n-spin size="large" />
       <p class="mt-4">Loading post...</p>

nuxt.config.ts

@@ -94,6 +94,16 @@ export default defineNuxtConfig({
           primaryColorSuppl: "#4C5EC5FF",
           borderRadius: "16px",
           borderRadiusSmall: "8px"
+        },
+        Input: {
+          borderRadius: "8px",
+          borderRadiusMedium: "8px",
+          borderRadiusSmall: "4px"
+        },
+        Button: {
+          borderRadius: "8px",
+          borderRadiusMedium: "8px",
+          borderRadiusSmall: "4px"
         }
       },
       light: {},