From 272c4f2859803fc9263b3d9f641446197aaa95ce Mon Sep 17 00:00:00 2001
From: Jeffrey Hsu <xfj12@outlook.com>
Date: Mon, 4 Nov 2024 07:54:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9item?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/nav/NavBar.vue          | 53 +++++++++++++++++++++++---
 src/components/nav/NavBarEntryItem.vue | 25 ++++++++----
 src/main.ts                            |  7 +++-
 3 files changed, 71 insertions(+), 14 deletions(-)

diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index c675faf..4c70637 100644
--- a/src/components/nav/NavBar.vue
+++ b/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/>
-        <nav-bar-entry-item/>
-        <nav-bar-entry-item/>
-        <nav-bar-entry-item/>
+        <nav-bar-entry-item v-for="item in entry" :key="item.title"
+                            :entry="item.entry" :icon="item.icon"
+                            :title="item.title"/>
       </div>
 
       <!--  快速跳转小组件  -->
diff --git a/src/components/nav/NavBarEntryItem.vue b/src/components/nav/NavBarEntryItem.vue
index f2f4661..e814664 100644
--- a/src/components/nav/NavBarEntryItem.vue
+++ b/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 class="py-2 text-center text-lg text-gray-500 hover:bg-gray-100">博客</div>
-      <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">
+        {{ item.title }}
+      </div>
+
     </div>
   </div>
 </template>
diff --git a/src/main.ts b/src/main.ts
index db756ba..69f6f20 100644
--- a/src/main.ts
+++ b/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')