Newer
Older
vmk-ui-kit / src / js / components / navigation-shell.js
/**
 * VMK UI Kit browser navigation shell helper.
 *
 * Mirrors gnexus-ui-kit NavigationShell helpers:
 *   init(root), toggle(root), open(root), close(root)
 */

const initializedRoots = new WeakSet();

function getSidebar(root) {
  return root.querySelector(".navigation-sidebar");
}

function getBackdrop(root) {
  return root.querySelector(".navigation-backdrop");
}

function toggle(root = document) {
  getSidebar(root)?.classList.toggle("is-open");
  getBackdrop(root)?.classList.toggle("is-visible");
}

function open(root = document) {
  getSidebar(root)?.classList.add("is-open");
  getBackdrop(root)?.classList.add("is-visible");
}

function close(root = document) {
  getSidebar(root)?.classList.remove("is-open");
  getBackdrop(root)?.classList.remove("is-visible");
}

function handleClick(event) {
  const toggleBtn = event.target.closest("[data-navigation-toggle]");
  if (toggleBtn) {
    const root = toggleBtn.closest(".navigation-shell") || document;
    toggle(root);
    return;
  }

  if (event.target.closest(".navigation-backdrop")) {
    const root = event.target.closest(".navigation-shell") || document;
    close(root);
  }
}

function init(root = document) {
  if (initializedRoots.has(root)) return;
  root.addEventListener("click", handleClick);
  initializedRoots.add(root);
}

export default {
  init,
  toggle,
  open,
  close
};