Reusable javascript component issue

Question

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.

This header with responsive navigation should work indipenently multiple times.

On click and matchMedia

• typial responsive nav behavious with an extra touch of matchMedia in case user moves the window.
• open navigation on click and remove navigation if > 900
• navigation remove Attribute hidden on desktop and on click.

All of this should work multiple times.

if (navBlocks.length > 0){
        Array.prototype.forEach.call(navBlocks, function(el) {

the forEach function shoud do the work right? how come is not really working?

DEMO HERE

 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 > 0) { Array.prototype.forEach.call(navBlocks, function(el) { el.addEventListener('click', e => { 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); }); }

Answer 1

I think you should do something like this, add event listener on burger menu icon to toggle an active class in nav bar and you should write css for that active class that if nav contains "active" class it should be set to display or else it should display none!