https://northstarboyschoir.org/wp-content/themes/nsbc-theme/js/main.js

1/*  main.js  —  North Star Boys’ Choir theme
2    =========================================
3    • toggleMobileMenu()          – hamburger / off-canvas nav
4    • enableUniversalDropdowns()  – click / tap dropdowns that
5                                    open & close on every device
6*/
7
8/* ----------  Hamburger toggle  ---------- */
9function toggleMobileMenu () {
10  const nav       = document.querySelector('.nav-links');
11  const icon      = document.getElementById('menu-icon');
12  const donateBtn = document.querySelector('.donate-floating');
13
14  const isOpen = nav.classList.toggle('mobile-visible');
15  icon.textContent = isOpen ? '✕' : '☰';
16  donateBtn.classList.toggle('hide-on-menu', isOpen);
17
18  /* close any open sub-menus when the whole menu closes */
19  if (!isOpen) {
20    document.querySelectorAll('.submenu-open')
21            .forEach(li => li.classList.remove('submenu-open'));
22  }
23}
24
25/* ----------  Dropdowns: click / tap to toggle  ---------- */
26function enableUniversalDropdowns () {
27  /*  suppress :hover keeping the menu open after we programmatically close it  */
28  const style = document.createElement('style');
29  style.textContent =
30    '.nav-links li.force-close:hover > ul { display:none !important; }';
31  document.head.appendChild(style);
32
33  const links = document.querySelectorAll('.menu-item-has-children > a');
34
35  links.forEach(a => {
36    a.addEventListener('click', function (e) {
37      const li     = this.parentElement;
38      const isOpen = li.classList.contains('submenu-open');
39
40      e.preventDefault();                        // never navigate on click
41
42      if (isOpen) {
43        /* second click → close & block :hover until pointer leaves */
44        li.classList.remove('submenu-open');
45        li.classList.add('force-close');
46        li.addEventListener(
47          'pointerleave',
48          () => li.classList.remove('force-close'),
49          { once: true }
50        );
51      } else {
52        /* first click → close others & open this one */
53        document.querySelectorAll('.submenu-open')
54                .forEach(openLi => openLi.classList.remove('submenu-open'));
55        li.classList.add('submenu-open');
56      }
57    });
58  });
59
60  /* click / tap anywhere outside the nav closes dropdowns */
61  document.addEventListener('click', e => {
62    if (!e.target.closest('.nav-links')) {
63      document.querySelectorAll('.submenu-open')
64              .forEach(li => li.classList.remove('submenu-open'));
65    }
66  });
67}
68
69/* ----------  init  ---------- */
70enableUniversalDropdowns();