document.querySelectorAll(".nav-tabs-responsive").forEach((el) => {
  // Prevent multiple init from codepen
  if(el.dataset.responsiveTabs) {
    return;
  }
  el.dataset.ResponsiveTabs = true;
  // This only works if the nav is visible on page load
  let totalWidth = 0;
 
  el.querySelectorAll("li").forEach((tab) => {
    totalWidth += tab.offsetWidth;
  });
  el.style.visibility = "visible";
  el.dataset.tabsWidth = totalWidth;

  // Create mobile menu
  let menu = document.createElement("ul");
  menu.classList.add("dropdown-menu");
  el.querySelectorAll("a").forEach((link) => {
    let newChild = document.createElement("li");
    let newChildLink = document.createElement("a");
    newChild.append(newChildLink);
    newChildLink.classList.add("dropdown-item");
    newChildLink.innerHTML = link.innerHTML;
    if (link.classList.contains("disabled")) {
      newChildLink.classList.add("disabled");
    }
    // Forwards clicks to avoid binding stuff twice
    newChildLink.addEventListener("click", (ev) => {
      ev.preventDefault();
      link.dispatchEvent(new Event("click"));
    });
    menu.append(newChild);
  });
  el.parentElement.append(menu);

  // Register observer to trigger responsive layout
  
  const resizeObserver = new ResizeObserver((entries) => {
    for (let entry of entries) {
      const tabs = entry.target.querySelector(".nav-tabs-responsive");
      // check inlineSize (width) or blockSize (height)
      const contentBoxSize = Array.isArray(entry.contentBoxSize)
        ? entry.contentBoxSize[0]
        : entry.contentBoxSize;
      
      console.log(contentBoxSize);
      const size = contentBoxSize.inlineSize - 30;
      if (size < tabs.dataset.tabsWidth) {
        tabs.classList.add("nav-tabs-dropdown");
      } else if (size >= tabs.dataset.tabsWidth) {
        tabs.classList.remove("nav-tabs-dropdown");
        menu.style.display = "none";
      }
    }
  });
  
    console.log("attach observer");
  resizeObserver.observe(el.parentElement);

  // Handle responsive clicks
  el.querySelectorAll("a.nav-link").forEach((a) => {
    a.addEventListener("click", (ev) => {
      if (!a.classList.contains("active")) {
        return;
      }
      if (
        !a.parentElement.parentElement.classList.contains("nav-tabs-dropdown")
      ) {
        return;
      }
      // Toggle menu
      if (menu.style.display == "block") {
        menu.style.display = "none";
      } else {
        menu.style.display = "block";
        menu.style.right = "0px";
        menu.style.top = a.parentElement.offsetHeight + "px";
      }
    });
  });
});