From 48da6b972dc5ec38a5875c9653b20bf6c568cc1d Mon Sep 17 00:00:00 2001
From: yaotutu <957810668@qq.com>
Date: Sun, 15 Sep 2024 06:40:29 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(Header.astro):=20replace=20dropdow?=
 =?UTF-8?q?n=20div=20with=20details=20and=20summary=20elements=20for=20bet?=
 =?UTF-8?q?ter=20semantics=20and=20accessibility=20=F0=9F=92=A1=20(Header.?=
 =?UTF-8?q?astro):=20add=20script=20to=20close=20dropdown=20menu=20when=20?=
 =?UTF-8?q?clicking=20outside=20or=20selecting=20an=20option=20for=20impro?=
 =?UTF-8?q?ved=20user=20experience?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header.astro | 37 +++++++++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 8fc8d47..2ce75bd 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -7,8 +7,8 @@ import { SITE_TITLE } from "../consts";
   class="navbar max-md:translate-y-0 fixed px-2 w-full transform -translate-y-full text-center z-50 transition-transform bg-base-100 shadow-xl"
 >
   <div class="navbar-start">
-    <div class="dropdown">
-      <div
+    <details class="dropdown" id="dropdown">
+      <summary
         tabindex="0"
         role="button"
         class="btn btn-ghost"
@@ -25,9 +25,9 @@ import { SITE_TITLE } from "../consts";
             d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z"
           ></path></svg
         >
-      </div>
+      </summary>
       <Menu />
-    </div>
+    </details>
   </div>
   <div class="navbar-center">
     <a class="btn btn-ghost text-xl" href="/">{SITE_TITLE}</a>
@@ -59,3 +59,32 @@ import { SITE_TITLE } from "../consts";
     </div>
   </div>
 </div>
+<script>
+  // 当用户点击菜单区域外部区域的时候, 关闭菜单
+  document.addEventListener("click", function (event) {
+    const dropdown = document.getElementById("dropdown") as HTMLElement;
+    const isClickInside = dropdown.contains(event.target as Node);
+    if (!isClickInside && dropdown.hasAttribute("open")) {
+      dropdown.removeAttribute("open");
+    }
+  });
+
+  // 当用户滑动菜单区域外部区域的时候, 关闭菜单
+  document.addEventListener("touchmove", function (event) {
+    const dropdown = document.getElementById("dropdown") as HTMLElement;
+    const isTouchInside = dropdown.contains(event.target as Node);
+    if (!isTouchInside && dropdown.hasAttribute("open")) {
+      dropdown.removeAttribute("open");
+    }
+  });
+
+  // 当用户点击菜单的具体的选项的时候, 关闭菜单
+  document.querySelectorAll("#dropdown > ul > li").forEach((item) => {
+    item.addEventListener("click", function () {
+      const dropdown = document.getElementById("dropdown") as HTMLElement;
+      if (dropdown.hasAttribute("open")) {
+        dropdown.removeAttribute("open");
+      }
+    });
+  });
+</script>