Merge pull request #199 from ashcolor/develop

chg: メニュークリック時にメニューを閉じる
ashcolor · Oct 20, 2024 · 71ba8b4 · 71ba8b4
2 parents c435b03 + b61b661
commit 71ba8b4
Showing 1 changed file with 13 additions and 5 deletions.
diff --git a/components/pages/common/Header.vue b/components/pages/common/Header.vue
@@ -2,19 +2,27 @@
 import { BLOG_TITLE, BLOG_CATEGORIES } from "@/utils/const";
 
 const headerCategories = BLOG_CATEGORIES.filter((category) => category.isShowList);
+const menuDropDownRef = ref<HTMLDetailsElement | null>(null);
+
+const onMenuClick = () => {
+    if (!menuDropDownRef.value) {
+        return;
+    }
+    menuDropDownRef.value.open = false;
+};
 </script>
 
 <template>
     <div class="navbar border-b bg-base-100/75 backdrop-blur">
         <div class="container m-auto">
             <div class="navbar-start flex w-full flex-row lg:w-1/2">
-                <div class="dropdown">
-                    <label tabindex="0" class="btn btn-ghost px-2 sm:px-4 lg:hidden">
+                <details ref="menuDropDownRef" class="dropdown">
+                    <summary class="btn btn-ghost px-2 sm:px-4 lg:hidden">
                         <Icon name="bi:list" size="24px"></Icon>
-                    </label>
+                    </summary>
                     <ul
-                        tabindex="0"
                         class="menu dropdown-content menu-md mt-3 w-52 rounded-box bg-base-100 p-2 shadow"
+                        @click="onMenuClick"
                     >
                         <li>
                             <div class="menu-title">BLOG</div>
@@ -38,7 +46,7 @@ const headerCategories = BLOG_CATEGORIES.filter((category) => category.isShowLis
                             </ul>
                         </li>
                     </ul>
-                </div>
+                </details>
                 <NuxtLink to="/" class="btn btn-ghost px-2 font-logo text-xl normal-case sm:px-4">{{
                     BLOG_TITLE
                 }}</NuxtLink>