Fix offcanvas menu open bug (php#1116)

davidmcguiredesign · Nov 9, 2024 · 8413b22 · 8413b22
1 parent 1a8b9db
commit 8413b22
Showing 1 changed file with 10 additions and 15 deletions.
diff --git a/js/common.js b/js/common.js
@@ -465,8 +465,8 @@ $(document).ready(function () {
         offcanvasElement.querySelectorAll("input, button, a");
     const backdropElement = document.getElementById("navbar__backdrop");
 
-    const documentWidth = document.documentElement.clientWidth
-    const scrollbarWidth = Math.abs(window.innerWidth - documentWidth)
+    const documentWidth = document.documentElement.clientWidth;
+    const scrollbarWidth = Math.abs(window.innerWidth - documentWidth);
 
     const offcanvasFocusTrapHandler = (event) => {
         if (event.key != "Tab") {
@@ -499,8 +499,8 @@ $(document).ready(function () {
         // nav from being pushed off screen when the page has horizontal scroll,
         // like downloads.php has.
         document.documentElement.style.overflow = "hidden";
-        document.body.style.paddingRight = `${scrollbarWidth}px`
-        offcanvasSelectables[0].focus();
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
+        offcanvasElement.querySelector(".navbar__link").focus();
         document.addEventListener("keydown", offcanvasFocusTrapHandler);
     };
 
@@ -515,35 +515,30 @@ $(document).ready(function () {
             () => {
                 document.body.style.overflow = "auto";
                 document.documentElement.style.overflow = "auto";
-                document.body.style.paddingRight = '0px'
+                document.body.style.paddingRight = "0px";
                 offcanvasElement.style.removeProperty("visibility");
             },
             { once: true },
         );
     };
 
     const closeOffCanvasByClickOutside = (event) => {
-        if (
-            !offcanvasElement.contains(event.target) &&
-            !menuButton.contains(event.target)
-        ) {
-            closeOffcanvasNav()
+        if (event.target === backdropElement) {
+            closeOffcanvasNav();
         }
     };
 
-    document
-        .getElementById("navbar__menu-link")
-        .setAttribute("hidden", "true");
+    document.getElementById("navbar__menu-link").setAttribute("hidden", "true");
 
-    const menuButton = document.getElementById("navbar__menu-button")
+    const menuButton = document.getElementById("navbar__menu-button");
     menuButton.removeAttribute("hidden");
     menuButton.addEventListener("click", openOffcanvasNav);
 
     document
         .getElementById("navbar__close-button")
         .addEventListener("click", closeOffcanvasNav);
 
-    document.addEventListener('click', closeOffCanvasByClickOutside);
+    backdropElement.addEventListener("click", closeOffCanvasByClickOutside);
 
     /*}}}*/