From ff702ad8fb7c9e74ca7289f02f5fbfe87b399da2 Mon Sep 17 00:00:00 2001
From: ZOI-dayo <zoizoi.dayo@gmail.com>
Date: Sun, 29 Sep 2024 01:27:27 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=B3=E3=83=BC=E3=83=89=E3=82=92=E8=AA=AD?=
 =?UTF-8?q?=E3=81=BF=E3=82=84=E3=81=99=E3=81=8F=E3=81=97=E3=81=9F+?=
 =?UTF-8?q?=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E5=86=85=E3=82=92=E3=82=AF?=
 =?UTF-8?q?=E3=83=AA=E3=83=83=E3=82=AF=E3=81=97=E3=81=A6=E3=82=82=E9=96=89?=
 =?UTF-8?q?=E3=81=98=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=AA=E3=81=A3?=
 =?UTF-8?q?=E3=81=A6=E3=81=84=E3=81=9F=E3=81=AE=E3=81=A7=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Navigations/SideMenuButton.vue |  4 +-
 src/components/Navigations/TopNavbar.vue      | 52 ++++++++-----------
 2 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/src/components/Navigations/SideMenuButton.vue b/src/components/Navigations/SideMenuButton.vue
index cfca928..08e5164 100644
--- a/src/components/Navigations/SideMenuButton.vue
+++ b/src/components/Navigations/SideMenuButton.vue
@@ -11,7 +11,7 @@ function onClick() {
 
 <template>
   <button
-    class="flex w-full items-center px-2 py-1"
+    class="flex w-full items-center gap-1 px-2 py-1"
     @click="onClick"
   >
     <img
@@ -19,7 +19,7 @@ function onClick() {
       alt="icon"
       class="inline-block size-4.5"
     >
-    <span class="fontstyle-ui-control-strong ml-1 inline-block text-text-primary">{{ text }}</span>
+    <span class="fontstyle-ui-control-strong inline-block text-text-primary">{{ text }}</span>
   </button>
 </template>
 
diff --git a/src/components/Navigations/TopNavbar.vue b/src/components/Navigations/TopNavbar.vue
index c20d847..4644930 100644
--- a/src/components/Navigations/TopNavbar.vue
+++ b/src/components/Navigations/TopNavbar.vue
@@ -11,31 +11,19 @@ defineProps({
 
 const isMenuOpen = ref(false)
 
-const handler = (e: MouseEvent) => {
-  if (e.target instanceof HTMLElement) {
-    if (e.target.closest('#top-navbar-menu')) {
-      return
-    }
-    closeMenu()
-  }
+const modalHandler = (e: MouseEvent) => {
+  if (!(e.target instanceof HTMLElement) || e.target.closest('#top-navbar-menu')) return
+  setMenuState(false)
 }
 
 const toggleMenu = () => {
-  if (isMenuOpen.value) {
-    closeMenu()
-  } else {
-    openMenu()
-  }
+  setMenuState(!(isMenuOpen.value as boolean))
 }
 
-const openMenu = () => {
-  isMenuOpen.value = true
-  document.addEventListener('mousedown', handler)
-}
-
-const closeMenu = () => {
-  isMenuOpen.value = false
-  document.removeEventListener('mousedown', handler)
+const setMenuState = (state: boolean) => {
+  isMenuOpen.value = state
+  if(state) document.addEventListener('mousedown', modalHandler)
+  else document.removeEventListener('mousedown', modalHandler)
 }
 </script>
 
@@ -66,17 +54,21 @@ const closeMenu = () => {
           }
         "
       />
-      <button
-        v-if="isLoggedIn"
+      <div
         id="top-navbar-menu"
-        class="relative flex items-center gap-1"
-        @click="toggleMenu"
+        class="relative"
       >
-        <span class="inline-block">{{ username }}</span>
-        <IconDropdownTriangle
-          class="inline-block h-1.625"
-          :class="isMenuOpen ? [] : ['rotate-180']"
-        />
+        <button
+          v-if="isLoggedIn"
+          class="flex items-center gap-1"
+          @click="toggleMenu"
+        >
+          <span class="inline-block">{{ username }}</span>
+          <IconDropdownTriangle
+            class="inline-block h-1.625"
+            :class="isMenuOpen ? [] : ['rotate-180']"
+          />
+        </button>
         <div
           v-if="isMenuOpen"
           class="absolute right-0 top-7 flex w-50 flex-col gap-y-1 rounded-lg border border-border-secondary bg-background-primary p-2"
@@ -99,7 +91,7 @@ const closeMenu = () => {
             text="ログアウト"
           />
         </div>
-      </button>
+      </div>
     </span>
   </header>
 </template>