From d7afc49b917a1d0cea3b5a5eaa036527ef2b9f2c Mon Sep 17 00:00:00 2001
From: Jeffrey Hsu <xfj12@outlook.com>
Date: Tue, 5 Nov 2024 14:28:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E4=BB=A3=E7=A0=81=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/nav/NavBar.vue          |  6 +++---
 src/components/nav/NavBarEntryItem.vue | 10 +++++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index a48b556..bf082ee 100644
--- a/src/components/nav/NavBar.vue
+++ b/src/components/nav/NavBar.vue
@@ -105,9 +105,9 @@ const menuExpanded = () => {
       </div>
 
       <!--  Entry  -->
-      <div
-          :class="{'h-screen opacity-100 visible': isExpended, 'h-0 opacity-0 invisible': !isExpended}"
-          class="absolute top-full right-0 left-0 bg-white transition-all md:visible md:relative md:top-0 md:flex md:h-auto md:bg-transparent md:opacity-100"
+      <div :class="{'h-screen opacity-100 visible': isExpended, 'h-0 opacity-0 invisible': !isExpended}"
+           class="absolute top-full right-0 left-0 bg-white transition-all md:visible md:relative md:top-0 md:flex
+                  md:h-auto md:bg-transparent md:opacity-100"
       >
         <nav-bar-entry-item v-for="item in entry" :key="item.title"
                             :entry="item.entry" :icon="item.icon"
diff --git a/src/components/nav/NavBarEntryItem.vue b/src/components/nav/NavBarEntryItem.vue
index e122a24..3e30750 100644
--- a/src/components/nav/NavBarEntryItem.vue
+++ b/src/components/nav/NavBarEntryItem.vue
@@ -15,15 +15,19 @@ defineProps<{
   <div class="container relative w-full max-w-max flex-auto shrink-0 cursor-pointer group md:w-16 md:hover:w-full">
     <div class="my-1 flex h-14 w-screen items-center rounded-md pr-4 pl-2 md:w-auto md:group-hover:bg-gray-200">
       <font-awesome-icon :icon="icon" class="mx-2 md:h-8 md:w-8"/>
-      <span
-          class="w-full max-w-max overflow-hidden text-lg transition-all duration-300 text-nowrap md:w-0 md:text-xl md:group-hover:w-full">
+      <span class="w-full max-w-max overflow-hidden text-lg transition-all duration-300 text-nowrap
+                   md:w-0 md:text-xl md:group-hover:w-full"
+      >
         {{ title }}
       </span>
     </div>
 
     <!-- 下拉菜单 -->
     <div v-if="entry"
-         class="grid grid-cols-2 overflow-hidden transition-all duration-300 min-w-32 item md:invisible md:absolute md:top-full md:left-1/2 md:block md:rounded-xl md:bg-white md:opacity-0 md:shadow-md md:group-hover:visible md:group-hover:-translate-x-1/2 md:group-hover:opacity-100">
+         class="grid grid-cols-2 overflow-hidden transition-all duration-300 min-w-32 item md:invisible md:absolute
+                md:top-full md:left-1/2 md:block md:rounded-xl md:bg-white md:opacity-0 md:shadow-md
+                md:group-hover:visible md:group-hover:-translate-x-1/2 md:group-hover:opacity-100"
+    >
       <div v-for="item in entry" :key="item.title"
            class="px-10 py-2 text-gray-500 text-md md:px-0 md:text-center md:text-lg md:hover:bg-gray-100">
         {{ item.title }}