title: Reusable javascript component issue
body: <p>I have a woking accessible responsive navigation which for DEMO perpuses I have to make it reusable so I can show different sort of senarios. However tho, the click burger menu is not working.</p>
  <p>This header with responsive navigation should work indipenently multiple times.</p>
  <p><strong>On click and matchMedia</strong></p>
  <ul>
  <li>typial responsive nav behavious with an extra touch of matchMedia in case user moves the window.</li>
  <li>open navigation on click and remove navigation if &gt; 900</li>
  <li>navigation remove Attribute hidden on desktop and on click.</li>
  </ul>
  <p>All of this should work multiple times.</p>
  <pre><code>if (navBlocks.length &gt; 0){
          Array.prototype.forEach.call(navBlocks, function(el) {
  </code></pre>
  <p>the forEach function shoud do the work right? how come is not really working?</p>
  <p><a href="https://codepen.io/davide77/pen/eYegbJP?editors=1010" rel="nofollow noreferrer">DEMO HERE</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const navBlocks = document.querySelectorAll('.nav-container');
  const nav = document.querySelector('.sliding-nav');
  const menu = document.querySelector(".sliding-nav ul");
  const toggleMenu = document.querySelector(".nav-container .nav-cta");
  const mediaQuery = window.matchMedia('(min-width: 900px)');
  
  let isMenuOpen = false;
  
  if (navBlocks.length &gt; 0) {
    Array.prototype.forEach.call(navBlocks, function(el) {
  
      el.addEventListener('click', e =&gt; {
  
        e.preventDefault();
  
        isMenuOpen = !isMenuOpen;
  
        toggleMenu.setAttribute('aria-expanded', String(isMenuOpen));
        menu.hidden = !isMenuOpen;
  
        if (isMenuOpen) {
          nav.classList.add('is-open');
          document.body.classList.add("is-no-scroll", "is-fixed");
          //console.log(isMenuOpen); 
        } else {
          nav.classList.remove('is-open');
          document.body.classList.remove("is-no-scroll", "is-fixed");
          //console.log(!isMenuOpen);
        }
      });
  
      function handleTabletChange(e) {
        // Check if the media query is true
  
        if (e.matches) {
  
          toggleMenu.setAttribute("aria-expanded", false);
          menu.removeAttribute("hidden");
          nav.classList.remove('is-open');
          document.body.classList.remove("is-no-scroll", "is-fixed");
  
        } else {
          toggleMenu.setAttribute("aria-expanded", false);
          //nav.removeAttribute("aria-expanded");
  
        }
      }
  
      // Register event listener
      mediaQuery.addListener(handleTabletChange);
  
      // Initial check
      handleTabletChange(mediaQuery);
  
    });
  }</code></pre>
  </div>
  </div>
  </p>