From 49b1cd11eeaa913b18ad042f5de114f075c70f4b Mon Sep 17 00:00:00 2001
From: Xin <xin@imfing.com>
Date: Tue, 25 Feb 2025 18:48:25 +0000
Subject: [PATCH] feat: hide navbar on mobile when heading links clicked (#584)

---
 assets/js/menu.js | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/assets/js/menu.js b/assets/js/menu.js
index 9191b05..dad446e 100644
--- a/assets/js/menu.js
+++ b/assets/js/menu.js
@@ -23,6 +23,12 @@ document.addEventListener('DOMContentLoaded', function () {
     document.body.classList.toggle('md:hx-overflow-auto');
   }
 
+  function hideOverlay() {
+    // Hide the overlay
+    overlay.classList.remove(...overlayClasses);
+    overlay.classList.add('hx-bg-transparent');
+  }
+
   menu.addEventListener('click', (e) => {
     e.preventDefault();
     toggleMenu();
@@ -33,8 +39,7 @@ document.addEventListener('DOMContentLoaded', function () {
       overlay.classList.remove('hx-bg-transparent');
     } else {
       // Hide the overlay
-      overlay.classList.remove(...overlayClasses);
-      overlay.classList.add('hx-bg-transparent');
+      hideOverlay();
     }
   });
 
@@ -43,7 +48,23 @@ document.addEventListener('DOMContentLoaded', function () {
     toggleMenu();
 
     // Hide the overlay
-    overlay.classList.remove(...overlayClasses);
-    overlay.classList.add('hx-bg-transparent');
+    hideOverlay();
+  });
+
+  // Select all anchor tags in the sidebar container
+  const sidebarLinks = sidebarContainer.querySelectorAll('a');
+
+  // Add click event listener to each anchor tag
+  sidebarLinks.forEach(link => {
+    link.addEventListener('click', (e) => {
+      // Check if the href attribute contains a hash symbol (links to a heading)
+      if (link.getAttribute('href') && link.getAttribute('href').startsWith('#')) {
+        // Only dismiss overlay on mobile view
+        if (window.innerWidth < 768) {
+          toggleMenu();
+          hideOverlay();
+        }
+      }
+    });
   });
 });