From bdf757c2d4a242da8df87f560a58d18bc60727f2 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Sun, 7 Apr 2024 20:40:44 +0800
Subject: [PATCH] fix: header components in the middle

---
 app/src/components/header/HeaderPart.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/src/components/header/HeaderPart.vue b/app/src/components/header/HeaderPart.vue
index 5648bd8..34a4e9f 100644
--- a/app/src/components/header/HeaderPart.vue
+++ b/app/src/components/header/HeaderPart.vue
@@ -12,6 +12,7 @@ defineProps({
   },
 })
 const menuOpen = ref(false)
+const windowWidth = window.innerWidth < 768
 const toggleMenu = () => {
   menuOpen.value = !menuOpen.value
 }
@@ -38,12 +39,15 @@ const toggleMenu = () => {
       </p>
     </div>
     <div
-      class="w-full flex flex-col gap-3 items-center justify-end sm:w-auto sm:block sm:ml-6"
+      class="w-full flex flex-col items-center justify-end sm:w-auto sm:block sm:ml-6"
       :class="{ hidden: !menuOpen }"
     >
       <component :is="headerComponent" />
     </div>
-    <div :class="{ 'w-full flex justify-end pb-3': menuOpen }">
+    <div
+      v-if="windowWidth"
+      :class="{ 'w-full flex justify-end pb-3': menuOpen }"
+    >
       <button
         type="button"
         class="flex items-center h-5 w-5 rounded-md sm:hidden"