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

Kit Digital de la Universidad San Sebastián

import { createPopper } from '@popperjs/core/dist/esm/popper';

export class Navbar {
  constructor(el) {
    this.mainMenu = el;
    this.boundary = document.querySelector('.uss-mainnav__wrap');
  }

  mount() {
    const elements = this.mainMenu.querySelectorAll('.uss-mainnav__item-link[data-subitem-ref]');
    const { boundary } = this;

    if (!boundary || boundary.dataset.init) return;

    boundary.dataset.init = true;

    elements.forEach((el) => {
      const button = el;
      const idRef = button.dataset.subitemRef;

      const submenu = this.mainMenu.querySelector(
        `.uss-mainnav__subitems-wrapper[data-subitem-target="${idRef}"]`,
      );

      let popperInstance = null;

      function create() {
        popperInstance = createPopper(button, submenu, {
          placement: 'bottom',
          modifiers: [
            {
              name: 'preventOverflow',
              options: {
                boundary,
              },
            },
            {
              name: 'flip',
              enabled: false,
            },
            {
              name: 'offset',
              options: {
                offset: [0, 15],
              },
            },
          ],
        });
      }

      const destroy = () => {
        if (popperInstance) {
          popperInstance.destroy();
          popperInstance = null;
        }
      };

      const show = () => {
        submenu.setAttribute('data-show', 'true');
        button.classList.add('active');
        create();
      };

      const hide = () => {
        submenu.removeAttribute('data-show');
        button.classList.remove('active');
        destroy();
      };

      submenu.addEventListener('focusout', (e) => {
        if (!submenu.contains(e.relatedTarget)) {
          hide();
        }
      });

      document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
          hide();
        }
      });

      document.addEventListener('click', (e) => {
        if (!submenu.contains(e.target) && !button.contains(e.target)) {
          hide();
        }
      });

      button.addEventListener('click', (e) => {
        e.preventDefault();
        // eslint-disable-next-line no-unused-expressions
        submenu.getAttribute('data-show') ? hide() : show();
      });
    });
  }
}