Шапка. Десктопная.

Особенности

  1. Раскрытие меню каталога.
  2. Раскрытие обычного меню.
  3. Закрытие меню каталога при клике вне элемента.
JS
Код
      const header = (function () {
    const MENU_CATALOG = document.querySelectorAll('.header__menu-catalog');
    const MENU = document.querySelectorAll('.header__menu');

    return {

        init: function () {

            if (MENU_CATALOG) {
                MENU_CATALOG.forEach(item => {
                    const link = item.querySelector('.header__menu-catalog-link');
                    if (link) {
                        link.addEventListener('click', e => {
                            e.preventDefault();
                            item.classList.toggle('is-open');
                        });
                    }

                    const overlay = item.querySelector('.header__menu-catalog-overlay');
                    if (overlay) {
                        overlay.addEventListener('click', e => {
                            e.preventDefault();
                            item.classList.remove('is-open');
                        });
                    }

                });
            }

            if (MENU) {
                MENU.forEach(item => {
                    const link = item.querySelector('.header__menu-link');
                    if (link) {
                        link.addEventListener('click', e => {
                            e.preventDefault();
                            item.classList.toggle('is-open');
                        });
                    }

                    const overlay = item.querySelector('.header__menu-overlay');
                    if (overlay) {
                        overlay.addEventListener('click', e => {
                            e.preventDefault();
                            item.classList.remove('is-open');
                        });
                    }

                    const close = item.querySelector('.header__menu-close');
                    if (close) {
                        close.addEventListener('click', e => {
                            e.preventDefault();
                            item.classList.remove('is-open');
                        });
                    }
                });
            }

            document.addEventListener('click', e => {
                const target = e.target;
                if (target.className !== "header__menu-catalog-link" && !target.closest('.list-wrapper')) {
                    MENU_CATALOG.forEach(item => {
                        item.classList.remove("is-open");
                    });
                }
            });

        },

    }
})();

header.init();