https://15below.com/themes/custom/coherence_custom/js/mobile-menu.js?ti5i4p

1
2window.addEventListener('load', () => {
3  const menuLinks = document.querySelectorAll('.has-children > a.coh-link, .has-children > span.coh-link');
4  const isMobile = window.innerWidth < 1024;
5
6  setTimeout(function() {
7    menuLinks.forEach(link => {
8      // Replace menu links with new nodes to clear all event listeners set by site-studio.
9      const newLink = link.cloneNode(true);
10      link.parentNode.replaceChild(newLink, link);
11
12      if (isMobile) {
13        // Add mobile arrow item after newLink
14        const arrowElement = document.createElement('div');
15        arrowElement.classList.add('mobile-menu-arrow');
16        newLink.insertAdjacentElement('afterend', arrowElement.cloneNode());
17
18        // Add a new event listener to toggle open class on arrow click.
19        const arrow = newLink.parentElement.querySelector('.mobile-menu-arrow');
20        arrow.addEventListener('click', event => {
21          arrow.parentNode.classList.toggle('open');
22        });
23
24        // Do the same for spans <nolink>
25        const span = newLink.parentElement.querySelector('.coh-style-header .nav-bar .menu-container > .coh-container > ul > li > span');
26        if (span !== null) {
27          span.addEventListener('click', event => {
28            span.parentNode.classList.toggle('open');
29          });
30        }
31      }
32    });
33
34    if (isMobile) {
35      // Add tabindex="0" to <nolink> items
36      const menuItems = document.querySelectorAll(
37        '.menu-container > .coh-container > .coh-menu-list-container > .coh-menu-list-item > span, ' +
38        '.menu-container > .coh-container > .coh-menu-list-container > .coh-menu-list-item > a'
39      );
40      menuItems.forEach((menuItem) => {
41        menuItem.setAttribute('tabindex', '0');
42      });
43      menuItems.forEach((item) => {;
44        item.addEventListener('focus', function(event) {
45          this.parentElement.classList.add('tabfocused');
46
47          const unfocusedItems = document.querySelectorAll(
48            '.menu-container > .coh-container > .coh-menu-list-container > .coh-menu-list-item > span:not(:focus-within), ' +
49            '.menu-container > .coh-container > .coh-menu-list-container > .coh-menu-list-item > a:not(:focus-within)'
50          );
51
52          unfocusedItems.forEach((uItem) => {
53            uItem.parentElement.classList.remove('tabfocused');
54          });
55        });
56        item.addEventListener('blur', function(event) {
57          if (!this.parentElement.querySelector(':focus-within')) {
58            //this.parentElement.classList.remove('tabfocused');
59          }
60        });
61      });
62    }
63
64  }, 500);
65
66  // Add hamburger menu toggle
67  const burgerMenuContainer = document.querySelector('.burger-menu-container');
68  const burgerMenuHtml = `
69  <div class="main-menu-hamburger">
70    <div class="main-menu-hamburger-bar"></div>
71    <div class="main-menu-hamburger-bar"></div>
72    <div class="main-menu-hamburger-bar"></div>
73  </div>
74  `;
75  burgerMenuContainer.insertAdjacentHTML('beforeend', burgerMenuHtml);
76
77  const mainMenuHamburger = document.querySelector('.main-menu-hamburger');
78  mainMenuHamburger.addEventListener('click', () => {
79    mainMenuHamburger.classList.toggle('active');
80    burgerMenuContainer.nextElementSibling.classList.toggle('open');
81  });
82
83});