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>