fix: mobile navbar spacing

Author: darbyjack

src/components/layout/NavDropDown.astro

@@ -12,32 +12,61 @@ const { label, className } = Astro.props;
 
 <div
   class={clsx(
-    "color-gray-200 hover:text-blue-600 dark:hover:text-blue-400 text-sm transition-colors px-2.5 relative inline-block h-full",
+    "color-gray-200 hover:text-blue-600 dark:hover:text-blue-400 text-sm transition-colors px-2.5 relative inline-block",
     className
   )}
   data-nav-dropdown
 >
-  <span class="flex flex-row items-center gap-1" role="button">
+  <span
+    class="flex cursor-pointer flex-row items-center gap-1 select-none"
+    role="button"
+    aria-haspopup="menu"
+    aria-expanded="false"
+    data-trigger
+  >
     {label}
     <Icon name="icons/heroicons/chevron-down" class="h-4 w-4 fill-gray-700 dark:fill-gray-300" />
   </span>
+
   <ul
-    class="bg-background-light-10 dark:bg-background-dark-90 pointer-events-none z-100 mt-2 flex flex-col py-1 opacity-0 transition-all md:absolute md:mt-0 md:rounded-lg md:border md:border-gray-200 md:shadow-md md:dark:border-gray-800"
+    class="bg-background-light-10 dark:bg-background-dark-90 z-[100] hidden md:absolute md:mt-0 md:min-w-40 md:rounded-lg md:border md:border-gray-200 md:py-1 md:shadow-md md:dark:border-gray-800"
+    role="menu"
   >
     <slot />
   </ul>
 </div>
 
 <script>
+  const mqDesktop = () => window.matchMedia("(min-width: 768px)").matches;
+
   document.querySelectorAll("[data-nav-dropdown]").forEach((el) => {
-    const ul = el.querySelector("ul");
+    const trigger = el.querySelector("[data-trigger]");
+    const menu = el.querySelector("ul");
+
+    const open = () => {
+      menu?.classList.remove("hidden");
+      trigger?.setAttribute?.("aria-expanded", "true");
+    };
+    const close = () => {
+      menu?.classList.add("hidden");
+      trigger?.setAttribute?.("aria-expanded", "false");
+    };
+
     el.addEventListener("mouseenter", () => {
-      ul?.classList?.remove("opacity-0", "pointer-events-none");
-      ul?.classList?.add("opacity-100");
+      if (mqDesktop()) open();
     });
     el.addEventListener("mouseleave", () => {
-      ul?.classList?.remove("opacity-100");
-      ul?.classList?.add("opacity-0", "pointer-events-none");
+      if (mqDesktop()) close();
+    });
+
+    trigger?.addEventListener("click", (e) => {
+      if (!mqDesktop()) {
+        e.preventDefault();
+        menu?.classList.toggle("hidden");
+        trigger?.setAttribute?.("aria-expanded", menu?.classList.contains("hidden") ? "false" : "true");
+      }
     });
+
+    close();
   });
 </script>