修改item

src/components/nav/NavBar.vue

@@ -30,6 +30,51 @@ const littleWidget: Widget[] = [
 const logoUrl = getAssetURL("logo-c.png")
 const logoType: string = "logo";
 const showLogo = computed(() => logoType === 'text')
+
+const entry = [
+  {
+    title: '主页',
+    icon: ['fas', 'home'],
+    entry: [],
+  },
+  {
+    title: '文章',
+    icon: ['fas', 'pen'],
+    entry: [
+      {
+        title: '博客',
+        url: false,
+        to: 'blog'
+      },
+      {
+        title: '日记',
+        url: false,
+        to: 'log'
+      },
+    ],
+  },
+  {
+    title: '作品',
+    icon: ['fas', 'brush'],
+    entry: [
+      {
+        title: '软件',
+        url: false,
+        to: 'soft'
+      },
+      {
+        title: '仓库',
+        url: true,
+        to: 'https://cantyonion.site/git'
+      },
+    ],
+  },
+  {
+    title: '杂谈',
+    icon: ['fas', 'chess-rook'],
+    entry: []
+  }
+]
 </script>
 
 <template>
@@ -47,11 +92,9 @@ const showLogo = computed(() => logoType === 'text')
 
       <!--  Entry  -->
       <div class="flex">
-        <nav-bar-entry-item/>
+        <nav-bar-entry-item v-for="item in entry" :key="item.title"
-        <nav-bar-entry-item/>
+                            :entry="item.entry" :icon="item.icon"
-        <nav-bar-entry-item/>
+                            :title="item.title"/>
-        <nav-bar-entry-item/>
-        <nav-bar-entry-item/>
       </div>
 
       <!--  快速跳转小组件  -->

src/components/nav/NavBarEntryItem.vue

@@ -1,25 +1,36 @@
 <script lang="ts" setup>
-
+type Entry = {
+  title: string,
+  url: boolean,
+  to: string,
+}
+const props = defineProps<{
+  title: string
+  icon: string[]
+  entry: Entry[]
+}>()
 </script>
 
 <template>
   <div class="container relative w-16 max-w-max flex-auto shrink-0 cursor-pointer
               group hover:w-full hover:bg-gray-200">
     <div class="flex h-16 items-center pr-4 pl-2">
-      <font-awesome-icon :icon="['fas', 'house']" class="mx-2 h-8 w-8"/>
+      <font-awesome-icon :icon="icon" class="mx-2 h-8 w-8"/>
       <span class="w-0 max-w-max overflow-hidden text-xl transition-all duration-300
                    text-nowrap group-hover:w-full">
-        主页
+        {{ title }}
       </span>
     </div>
 
     <!-- 下拉菜单 -->
-    <div class="invisible absolute top-full left-1/2 overflow-hidden rounded-xl bg-white
+    <div v-if="entry"
+         class="invisible absolute top-full left-1/2 overflow-hidden rounded-xl bg-white
                 bg-opacity-70 opacity-0 shadow-md backdrop-blur-md transition-all duration-300
                 min-w-32 item group-hover:visible group-hover:-translate-x-1/2 group-hover:opacity-100">
-      <div class="py-2 text-center text-lg text-gray-500 hover:bg-gray-100">博客</div>
+      <div v-for="item in entry" :key="item.title" class="py-2 text-center text-lg text-gray-500 hover:bg-gray-100">
-      <div class="py-2 text-center text-lg text-gray-500 hover:bg-gray-100">博客</div>
+        {{ item.title }}
-      <div class="py-2 text-center text-lg text-gray-500 hover:bg-gray-100">博客</div>
+      </div>
+
     </div>
   </div>
 </template>

src/main.ts

@@ -15,13 +15,16 @@ import {
   faChevronRight,
   faCodeCommit,
   faCode,
-  faHouse
+  faHouse,
+  faPen,
+  faBrush,
+  faChessRook
 } from '@fortawesome/free-solid-svg-icons'
 import {faWeibo, faQq, faGithubAlt, faSteamSymbol} from '@fortawesome/free-brands-svg-icons'
 
 library.add(
   faClock, faXmark, faBlog, faGauge, faCodeBranch, faCloud, faWeibo, faQq, faGithubAlt, faSteamSymbol, faChevronRight,
-  faCodeCommit, faCode, faHouse
+  faCodeCommit, faCode, faHouse, faPen, faBrush, faChessRook
 )
 
 createApp(App).use(router).component('font-awesome-icon', FontAwesomeIcon).mount('#app')