I have a doropdown menu that should work when used/in view. I would like to have a function that works only when the dropdown is used.

So Ideally navigation with dropdown and nav without. the following fuctions will be added if dropdown exists.

The Click event doesn’t seem to fire at all.

My assumption is that
const navLinks = dropDownBlock[i].querySelectorAll(".nav-items > li");
is’t correct! or is not fired

I wan’t to use as much as possible es6, and I wan’t to make sure everything is reusable and works only when in view.

Demo here:

const dropDownBlock = document.querySelectorAll(".has-nav-panel");
let result = true;
for (let i = 0; i < dropDownBlock.length; i++) {
            if (dropDownBlock[i] <= 0) {
                result = false;
                break;
            }
            const navLinks = dropDownBlock[i].querySelectorAll(".nav-items > li"); 
            const dropdownCta = dropDownBlock[i].querySelector(".nav-panel-cta");
            const dropdownPanel = dropDownBlock[i].querySelector(".nav-panel");
 
            //------------------------------------- 
            //Doesn it have dropdown    
            //------------------------------------- 

            Array.prototype.forEach.call(navLinks, function (el, i) {
                let currentNavLink = navLinks[i];
                currentNavLink.addEventListener("click", function () {
                    console.log('click');
                megaNavClickAndTouchHandler(navLinks, currentNavLink);
                });

                megaNavResetOnBreakPoint(navLinks, currentNavLink, mediaQuery);
            });

            function megaNavResetOnBreakPoint(elements, currentElement, mqNav) {
                if (matchMedia) {
                let navigationBar = currentElement.closest(".header");
                let navigationItems = currentElement.closest(".nav-wrap");

                mqNav.addListener(function () {
                    if (mqNav.matches) {
                    document.querySelectorAll("body")[0].classList.remove("is-no-scroll");
                    navigationBar.classList.remove("is-active");
                    navigationItems.classList.remove("is-active");
                    //navigationBar.querySelectorAll(".burger")[0].classList.remove("is-active");
                    megaNavClosePanels(elements);
                    } else {
                    megaNavClosePanels(elements);
                    }
                });
                }
            }

            function megaNavClickAndTouchHandler(elements, currentElement) {
                let isSubNavLink = currentElement.classList.contains("has-nav-panel");
                let isSubNavLinkActive = currentElement.classList.contains("is-active");
                let navBarContainer = currentElement.closest(".header");

                if (!isSubNavLink) {
                    window.location = currentElement.firstElementChild.getAttribute("href");
                } else if (isSubNavLink && !isSubNavLinkActive) {
                    megaNavClosePanels(elements);
                    currentElement.classList.add("is-active");
                    dropdownCta.setAttribute("aria-expanded", true);
                    dropdownPanel.ariaHidden = "false";
                } else {
                    megaNavClosePanels(elements);
                }
            }
            
        
            function megaNavClosePanels(elements) {
                for (let j = 0; j < elements.length; j++) {
                    if (elements[j].classList.contains("has-nav-panel")) {
                        elements[j].classList.remove("is-active");
                        dropdownCta.setAttribute("aria-expanded", false);
                        dropdownPanel.ariaHidden = "true";
                    }
                }
            }
            //------------------------------------- 
            // end dropdown functions
            //------------------------------------- 
        }
<header role="banner" class="header">
  <div class="container-fluid g-0 bg-black">
    <nav id="main-navigation" class="navigation">
      <div class="container has-px-0 has-px-md-4">
        <div class="nav-wrap" aria-label="main navigation">
          <ul class="nav-items list-unstyled">
            <li class="is-d-lg-flex active"><a class="nav-link" href="#">nav item</a></li>
            <li class="is-d-lg-flex "><a class="nav-link" href="#">nav item</a></li>
            <li class="is-d-lg-flex"><a class="nav-link" href="#">nav item</a></li>
            <li class="has-nav-panel is-d-lg-flex is-align-center">
              <button role="button" aria-expanded="false" class="nav-panel-cta has-pb-3 has-pt-3 has-px-4 has-p-lg-0"><span class="has-mr-2">Dropdown</span></button>
              <div class="nav-panel" aria-hidden="true">
                <div class="row no-gutters">
                  <div class="col-md-12">
                    <ul class="list-unstyled has-pl-3 has-pl-lg-0">
                      <li><a href="_#">nav item</a></li>
                      <li><a href="_#">nav item</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</header>