@ussebastian/kitdigital/src/js/components/NavbarMobile.js

Kit Digital de la Universidad San Sebastián

export class NavbarMobile {
  constructor(el) {
    this.mainMenu = el;
    this.navItems = this.mainMenu.querySelector('.uss-mainnav__menu');
    this.buttonToggleNav = this.mainMenu.querySelector('[data-toggle-nav-mobile]');
    this.navWrap = this.mainMenu.querySelector('.uss-mainnav__wrap');
    this.iconOfButton = this.buttonToggleNav.querySelector('i');
    this.itemsWithSubmenu = this.mainMenu.querySelectorAll('[data-subitem-ref]');
    this.topbar = document.querySelector('.uss-topnav-wrapper').cloneNode(true);
  }

  mount() {
    this.#registerCloseEvents();
    this.navItems.appendChild(this.topbar);

    if (this.buttonToggleNav) {
      this.buttonToggleNav.addEventListener('click', (e) => {
        e.preventDefault();
        if (this.navItems.classList.contains('uss-mainnav__menu--open')) {
          this.hideNavItems();
        } else {
          this.showNavItems();
        }
      });
    }

    this.itemsWithSubmenu.forEach((item) => {
      item.addEventListener('click', (e) => {
        e.preventDefault();
        const subMenu = this.navItems.querySelector(
          `[data-subitem-target="${item.getAttribute('data-subitem-ref')}"]`,
        );
        if (subMenu.classList.contains('uss-mainnav__submenu--open')) {
          item.classList.remove('active');
          subMenu.classList.remove('uss-mainnav__submenu--open');
        } else {
          this.closeAllSubmenus();
          item.classList.add('active');
          subMenu.classList.add('uss-mainnav__submenu--open');
        }
      });
    });
  }

  closeAllSubmenus() {
    this.itemsWithSubmenu.forEach((item) => {
      item.classList.remove('active');
      const subMenu = this.navItems.querySelector(
        `[data-subitem-target="${item.getAttribute('data-subitem-ref')}"]`,
      );
      subMenu.classList.remove('uss-mainnav__submenu--open');
    });
  }

  showNavItems() {
    this.closeAllSubmenus();

    this.navItems.classList.add('uss-mainnav__menu--open');
    this.navWrap.classList.add('uss-mainnav__wrap--open');
    this.iconOfButton.classList.add('ri-close-line');
    this.iconOfButton.classList.remove('ri-menu-line');
  }

  hideNavItems() {
    this.navItems.classList.remove('uss-mainnav__menu--open');
    this.navWrap.classList.remove('uss-mainnav__wrap--open');
    this.iconOfButton.classList.add('ri-menu-line');
    this.iconOfButton.classList.remove('ri-close-line');
  }

  #registerCloseEvents() {
    document.addEventListener('click', (e) => {
      if (!this.mainMenu.contains(e.target)) {
        this.hideNavItems();
      }
    });
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        this.hideNavItems();
      }
    });
  }
}