export default function demoNavigation() {
  const navItems = [...document.querySelectorAll(".nav-drawer .list-item")];
  const currentSection = document.querySelector("[data-docs-current-section]");

  if (!navItems.length) {
    return;
  }

  const setActive = id => {
    navItems.forEach(item => {
      const link = item.querySelector(".list-action");
      const isActive = link?.getAttribute("href") === `#${id}`;
      item.classList.toggle("list-item-active", isActive);

      if (isActive && currentSection) {
        currentSection.textContent = link.querySelector(".list-label")?.textContent.trim() || id;
      }
    });
  };

  const updateFromHash = () => {
    const id = window.location.hash?.slice(1);

    if (id) {
      setActive(id);
    }
  };

  window.addEventListener("hashchange", updateFromHash);
  updateFromHash();
}