From 8e7b5f2552bb0fe2f01e7f19fa3a8461e3a6917e Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Fri, 5 Apr 2024 22:59:44 +0800
Subject: [PATCH] modify menu position while open

---
 app/src/components/header/HeaderPart.vue | 26 +++++++++++++-----------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/src/components/header/HeaderPart.vue b/app/src/components/header/HeaderPart.vue
index c7528f2..5648bd8 100644
--- a/app/src/components/header/HeaderPart.vue
+++ b/app/src/components/header/HeaderPart.vue
@@ -43,17 +43,19 @@ const toggleMenu = () => {
     >
       <component :is="headerComponent" />
     </div>
-    <button
-      type="button"
-      class="flex items-center 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"
-      />
-    </button>
+    <div :class="{ 'w-full flex justify-end pb-3': menuOpen }">
+      <button
+        type="button"
+        class="flex items-center 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"
+        />
+      </button>
+    </div>
   </div>
 </template>