openThem.ts

export function openThem({ it, scrollToId }: { it: string; scrollToId?: string }) {
    const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
      updateTabs(it, scrollToId);
      
      // Update der URL
      const newUrl = `?tab=${it}`;
      window.history.pushState({ tab: it }, '', newUrl);
    };
    
    return gotoandopen;
  }
  
  function updateTabs(it: string, scrollToId?: string) {
    let contenttabid = "tab-" + it;
    let parent = "parent-" + it;
  
    // Verstecke alle Subtabs und Content-Tabs
    const subtabs = document.getElementsByClassName("sidesubtab");
    const contenttabs = document.getElementsByClassName("enginneeringtab");
    const sideitems = document.getElementsByClassName("sideitem");
  
    for (let i = 0; i < subtabs.length; i++) {
      (subtabs[i] as HTMLElement).style.display = "none";
    }
    for (let i = 0; i < contenttabs.length; i++) {
      (contenttabs[i] as HTMLElement).style.display = "none";
    }
    for (let i = 0; i < sideitems.length; i++) {
      (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
    }
  
    // Zeige den aktuellen Tab und markiere das entsprechende Sidebar-Item
    document.getElementById(it)!.style.display = "block";
    document.getElementById(parent)!.classList.add("active-sideitem");
    document.getElementById(contenttabid)!.style.display = "block";
  
    // Scrolle zu der angegebenen ID, falls vorhanden
    if (scrollToId && document.getElementById(scrollToId)) {
      document.getElementById(scrollToId)!.scrollIntoView({ behavior: "smooth" });
    }
  }
  
  // Füge einen Event Listener für `popstate` hinzu
  window.addEventListener('popstate', (event) => {
    if (event.state) {
      const tab = event.state.tab;
      updateTabs(tab);
    }
  });