close menu on click around, code style #59

openmindculture · Oct 11, 2023 · 5658e4d · 5658e4d
1 parent 1638b53
commit 5658e4d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/js/inc/enhanceNavigationMenu.js b/src/js/inc/enhanceNavigationMenu.js
@@ -21,6 +21,16 @@ export function kleiderordnung_enhanceNavigationMenu(config) {
             window.kleiderordnung.state.menu.classList.remove(config.menuOpenedClassName);
             window.kleiderordnung.state.menuOpenButton.classList.remove(config.menuOpenedClassName);
         });
+        if (typeof(menuCloseButton.closest)==='function') {
+            var menuWrapper = menuCloseButton.closest(config.menuWrapperSelector);
+            if (menuWrapper) {
+                menuWrapper.addEventListener('click', function (event) {
+                    if (event.target instanceof HTMLAnchorElement) { return; }
+                    window.kleiderordnung.state.menu.classList.remove(config.menuOpenedClassName);
+                    window.kleiderordnung.state.menuOpenButton.classList.remove(config.menuOpenedClassName);
+                });
+            }
+        }
     }
 
     var navLinks = document.querySelectorAll(config.menuLinksSelector);

diff --git a/src/js/scripts.js b/src/js/scripts.js
@@ -67,9 +67,10 @@ window.kleiderordnung = {
     menuId: 'primary-menu',
     menuCloseButtonClassName: 'navigation__toggle--close',
     menuOpenButtonClassName: 'navigation__toggle--open',
-    menuOpenedClassName: 'navigation__menu-opened', // .target for progressive enhancement of :target
-    menuLinksSelector: '#primary-menu a[href]',     // links inside the menu
-    noGlobalThisClassName: 'no-globalthis',         // set if special intro animation fallback necessary
+    menuOpenedClassName: 'navigation__menu-opened',  // .target for progressive enhancement of :target
+    menuLinksSelector: '#primary-menu a[href]',      // links inside the menu
+    menuWrapperSelector: '.navigation__list-wrapper',// div around the menu items
+    noGlobalThisClassName: 'no-globalthis',          // set if special intro animation fallback necessary
     /** @object IntersectionObserver options */
     observerOptions: {
       root: null,