app.js

document.addEventListener('DOMContentLoaded', function() {

    const dropdownSubmenu = document.querySelectorAll('.nav--submenu');

    function closeOpenItems() {
        openDropmenus = document.querySelectorAll('.nav__list--submenu');
        openDropmenus.forEach(function(dropmenus) {
            dropmenus.classList.remove('show--submenu');
        });
    }

    dropdownSubmenu.forEach(function(submenu) {

        submenu.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            const dropContent = submenu.querySelector('.nav__list--submenu');

            closeOpenItems();

            if (!dropContent.classList.contains('show--submenu')) {
                dropContent.classList.add('show--submenu');
            }

        });
     });

    window.addEventListener('click', function(event) {
        closeOpenItems();
    });


    const selector = '.nav__link';
    const elems = Array.from( document.querySelectorAll(selector));
    const navigation = document.querySelector('nav');

    function makeActive(evt) {
      const target = evt.target;

        if ( !target || !target.matches(selector)) {
          return;
        }

        elems.forEach(elem => elem.classList.remove('active'));
        evt.target.classList.add('active');

        if (evt.target.parentElement.classList.contains('nav__item--submenu')) {
            evt.target.closest('.nav--submenu').querySelector('.nav__link').classList.add('active');
        }
    }

    navigation.addEventListener('mousedown', makeActive);

});