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

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

diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index d401849..d6d4c2a 100644
--- a/src/components/nav/NavBar.vue
+++ b/src/components/nav/NavBar.vue
@@ -2,7 +2,7 @@
 
 import {getAssetURL} from "@/utils/function.ts";
 import NavBarEntryItem from "@/components/nav/NavBarEntryItem.vue";
-import {computed} from "vue";
+import {computed, ref} from "vue";
 
 type Widget = {
   icon: string[]
@@ -30,6 +30,7 @@ const littleWidget: Widget[] = [
 const logoUrl = getAssetURL("logo-c.png")
 const logoType: string = "logo";
 const showLogo = computed(() => logoType === 'text')
+const isExpended = ref<boolean>(true)
 
 const entry = [
   {
@@ -75,29 +76,39 @@ const entry = [
     entry: []
   }
 ]
+
+const menuExpanded = () => {
+  isExpended.value = !isExpended.value
+}
+
 </script>
 
 <template>
-  <nav
-      class="fixed z-20 h-16 w-full bg-white bg-opacity-70 text-gray-600 shadow backdrop-blur-md"
-  >
+  <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 h-16 w-full items-center justify-between px-4 md:px-0 xl:max-w-screen-xl">
       <!-- 下拉菜单按钮 -->
-      <div class="flex h-8 w-10 rounded-md border-gray-600 md:hidden justify-center items-center">
+      <div class="flex h-8 w-10 items-center justify-center rounded-md border-gray-600 md:hidden"
+           @click="menuExpanded"
+      >
         <font-awesome-icon :icon="['fas', 'bars']" class="h-6"/>
       </div>
       <!--  Logo  -->
-      <div class="absolute left-1/2 -translate-x-1/2 md:relative md:translate-x-0 md:left-0">
+      <div class="absolute left-1/2 -translate-x-1/2 md:relative md:left-0 md:translate-x-0">
+        <!-- 文字模式 -->
         <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>
       </div>
 
       <!--  Entry  -->
-      <div class="hidden md:flex">
+      <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"
                             :title="item.title"/>
@@ -123,6 +134,6 @@ const entry = [
 }
 
 .active {
-  
+
 }
 </style>
\ No newline at end of file
diff --git a/src/components/nav/NavBarEntryItem.vue b/src/components/nav/NavBarEntryItem.vue
index 3c5d1f5..e122a24 100644
--- a/src/components/nav/NavBarEntryItem.vue
+++ b/src/components/nav/NavBarEntryItem.vue
@@ -12,22 +12,20 @@ defineProps<{
 </script>
 
 <template>
-  <div class="container relative w-16 max-w-max flex-auto shrink-0 cursor-pointer
-              group hover:w-full">
-    <div class="my-1 flex h-14 items-center rounded-md pr-4 pl-2 group-hover:bg-gray-200">
-      <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">
+  <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">
         {{ title }}
       </span>
     </div>
 
     <!-- 下拉菜单 -->
     <div v-if="entry"
-         class="invisible absolute top-full left-1/2 overflow-hidden rounded-xl bg-white
-                opacity-0 shadow-md transition-all duration-300 min-w-32 item
-                group-hover:visible group-hover:-translate-x-1/2 group-hover:opacity-100">
-      <div v-for="item in entry" :key="item.title" class="py-2 text-center text-lg text-gray-500 hover:bg-gray-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 }}
       </div>
 
@@ -37,6 +35,8 @@ defineProps<{
 
 <style lang="scss" scoped>
 .item {
-  transform: perspective(500px) rotateX(-45deg) translateX(-50%);
+  @media (min-width: 768px) {
+    transform: perspective(500px) rotateX(-45deg) translateX(-50%);
+  }
 }
 </style>
\ No newline at end of file