From e37a23c34fbc792645d06769931246404afd7cdb Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Tue, 12 Mar 2024 21:15:51 +0800
Subject: [PATCH] mobile menu (but not justify end while bigger screen, still
 solving)

---
 app/src/components/header/HeaderPart.vue | 52 +++++++++---------------
 1 file changed, 19 insertions(+), 33 deletions(-)

diff --git a/app/src/components/header/HeaderPart.vue b/app/src/components/header/HeaderPart.vue
index 5fcd412..6107a8c 100644
--- a/app/src/components/header/HeaderPart.vue
+++ b/app/src/components/header/HeaderPart.vue
@@ -1,5 +1,5 @@
-<script setup>
-import { defineProps } from 'vue'
+<script setup lang="ts">
+import { defineProps, ref } from 'vue'
 
 defineProps({
   title: {
@@ -11,30 +11,20 @@ defineProps({
     required: false,
   },
 })
-let showMenu = false
-const ToggleMenu = () => {
-  console.log(showMenu)
-  showMenu = true
-  console.log(showMenu)
-}
-const hideMenu = () => {
-  showMenu = false
-}
-const handleItemClick = (item) => {
-  console.log('Clicked:', item)
-  // Add your logic for handling item click here
+const menuOpen = ref(false)
+const toggleMenu = () => {
+  menuOpen.value = !menuOpen.value
 }
 </script>
 <template>
   <div
-    id="header"
-    class="w-full top-0 px-5 fixed flex flex-row bg-bg-secondary justify-between items-center"
+    class="w-full top-0 px-5 fixed flex flex-row bg-bg-secondary justify-between items-center sm:justify-start"
   >
-    <div class="flex flex-row items-center gap-3">
+    <div class="flex flex-row items-center gap-3" :class="{ hidden: menuOpen }">
       <img src="../../img/icon_totem.svg" class="h-8 justify-self-start" />
       <RouterLink
         to="/"
-        class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
+        class="text-text-primary inline-block font-bold whitespace-nowrap pt-1 transition ease-in-out hover:scale-110 duration-300"
         style="font-size: 2vh"
       >
         Linux Odyssey
@@ -47,27 +37,23 @@ const handleItemClick = (item) => {
         {{ title }}
       </p>
     </div>
-    <div class="w-full flex gap-3 items-center justify-end hidden sm:flex">
+    <div
+      class="w-full flex flex-col gap-3 items-center justify-end sm:w-auto sm:flex-row sm:block sm:ml-6"
+      :class="{ hidden: !menuOpen }"
+    >
       <component :is="headerComponent" />
     </div>
-    <button class="flex items-center justify-end sm:hidden h-5 w-5">
+    <button
+      type="button"
+      class="flex items-center justify-end h-5 w-5 rounded-md sm:hidden"
+      aria-controls="mobile-menu"
+      aria-expanded="false"
+      @click="toggleMenu"
+    >
       <font-awesome-icon
         :icon="['fas', 'bars']"
         class="text-text-primary h-full w-full"
-        @click="ToggleMenu"
       />
     </button>
   </div>
-  <div v-if="showMenu" class="bg-bg-primary w-full h-1/2 z-50">
-    <!-- Menu items -->
-    <ul>
-      <li
-        v-for="item in menuItems"
-        :key="item.id"
-        @click="handleItemClick(item)"
-      >
-        {{ item.name }}
-      </li>
-    </ul>
-  </div>
 </template>