From 217d79ce98d1b642343621c6c3995084d9a16347 Mon Sep 17 00:00:00 2001
From: Jeffrey Hsu <xfj12@outlook.com>
Date: Thu, 31 Oct 2024 07:56:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0item?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/nav/NavBar.vue          | 24 ++++++++++--------------
 src/components/nav/NavBarEntryItem.vue | 17 ++++++++++++-----
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index 4eb057a..c675faf 100644
--- a/src/components/nav/NavBar.vue
+++ b/src/components/nav/NavBar.vue
@@ -2,6 +2,7 @@
 
 import {getAssetURL} from "@/utils/function.ts";
 import NavBarEntryItem from "@/components/nav/NavBarEntryItem.vue";
+import {computed} from "vue";
 
 type Widget = {
   icon: string[]
@@ -27,22 +28,23 @@ const littleWidget: Widget[] = [
   }
 ]
 const logoUrl = getAssetURL("logo-c.png")
+const logoType: string = "logo";
+const showLogo = computed(() => logoType === 'text')
 </script>
 
 <template>
   <nav
       class="fixed z-20 h-16 w-full bg-white bg-opacity-70 text-gray-600 shadow backdrop-blur-md"
   >
-    <div
-        class="container mx-auto flex w-full max-w-screen-xl items-center justify-center overflow-hidden sm:justify-between">
+    <div class="container mx-auto flex w-full max-w-screen-xl items-center justify-center sm:justify-between">
       <!--  Logo  -->
-      <!--      <div class="h-full text-4xl min-w-16 logo py-3.5">-->
-      <!--        <span>CantyOni_on's Index</span>-->
-
-      <!--      </div>-->
-      <div class="py-2">
+      <div v-if="showLogo" class="h-full text-4xl min-w-16 logo py-3.5">
+        <span>CantyOni_on's Index</span>
+      </div>
+      <div v-else class="py-2">
         <img :src="logoUrl" alt="" class="h-12 w-12"/>
       </div>
+
       <!--  Entry  -->
       <div class="flex">
         <nav-bar-entry-item/>
@@ -50,14 +52,8 @@ const logoUrl = getAssetURL("logo-c.png")
         <nav-bar-entry-item/>
         <nav-bar-entry-item/>
         <nav-bar-entry-item/>
-        <!--        <div class="container">-->
-        <!--          <div-->
-        <!--              class="flex h-16 w-8 items-center overflow-hidden transition-all duration-300 w-max-20 text-nowrap hover:w-full">-->
-        <!--            <font-awesome-icon :icon="['fas', 'book']"/>-->
-        <!--            <span class="ml-1 text-xl">文章</span>-->
-        <!--          </div>-->
-        <!--        </div>-->
       </div>
+
       <!--  快速跳转小组件  -->
       <div class="hidden items-center justify-between gap-4 text-xl sm:flex">
         <a v-for="item in littleWidget"
diff --git a/src/components/nav/NavBarEntryItem.vue b/src/components/nav/NavBarEntryItem.vue
index aa658c4..f2f4661 100644
--- a/src/components/nav/NavBarEntryItem.vue
+++ b/src/components/nav/NavBarEntryItem.vue
@@ -7,18 +7,25 @@
               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"/>
-      <span class="w-0 max-w-max overflow-hidden text-xl transition-all duration-500
+      <span class="w-0 max-w-max overflow-hidden text-xl transition-all duration-300
                    text-nowrap group-hover:w-full">
         主页
       </span>
     </div>
-    <div
-        class="invisible h-20 absolute top-full w-20 bg-pink-400 opacity-0 transition-all group-hover:visible group-hover:opacity-100">
 
+    <!-- 下拉菜单 -->
+    <div 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>
   </div>
 </template>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.item {
+  transform: perspective(500px) rotateX(-45deg) translateX(-50%);
+}
 </style>
\ No newline at end of file