engineering tab routing

src/App/App.css

@@ -3765,4 +3765,8 @@ a{
   color: var(--accent-primary) !important;
   margin-right: 5px;
   top: 5px;
-}
\ No newline at end of file
+}
+
+#eng-sidebar a{
+  color: var(--text-primary) !important;
+}

src/sidebars/engS.tsx

@@ -26,10 +26,10 @@ export function EngSide(){
 
 
     return(
-        <div className="col-2 d-none d-lg-block">
+        <div className="col-2 d-none d-lg-block" >
             <br/>
             <div className="sticky-top">
-            <nav className="sidebar">
+            <nav className="sidebar" id="eng-sidebar">
                 <div> 
                     <a onClick={openThem({it: "our-cycle", scrollToId: "ourcycle"})}>
                         <div className="detail-sideitem"> 
@@ -187,7 +187,7 @@ export function EngSide(){
                 </div>  
             </nav>   
         <br/>
-        <div className="col" style={{display: "flex", alignItems: "right"}}>
+        <div className="col" id="eng-backup" style={{display: "flex", alignItems: "right"}}>
             <a href='#' className="backtotop">
                 Back to Top &#8593;
             </a>

src/utils/openThem.ts

-export function openThem({it, scrollToId}: {it: string, scrollToId?: string}) {
-  const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-      console.log("it classname: " + document.getElementById(it)?.className);
-      console.log("it: " + it);
+export function openThem({ it, scrollToId }: { it: string; scrollToId?: string }) {
+    const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      updateTabs(it, scrollToId);
       
-      let contenttabid = "tab-" + it; 
-      let parent = "parent-" + it; 
-      console.log("we want to open " + it + " and " + contenttabid);
-      
-      let sideitems = document.getElementsByClassName("sideitem"); 
-      let subtabs = document.getElementsByClassName("sidesubtab");
-      let contenttabs = document.getElementsByClassName("enginneeringtab");
-      
-      // Verstecke alle Subtabs und Content-Tabs
-      for (let i = 0; i < subtabs.length; i++) {
-          (subtabs[i] as HTMLElement).style.display = "none";
-          console.log("Hiding sidebar subtab...");
-      }
-      for (let i = 0; i < contenttabs.length; i++) {
-          (contenttabs[i] as HTMLElement).style.display = "none";
-          console.log("Hiding content tab...");
-      }
-      for (let i = 0; i < sideitems.length; i++) {
-          (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
-          console.log("Hiding sidebar subtab...");
-      }
-      
-      // 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)) {
-          console.log("Scrolling to: " + scrollToId);
-          document.getElementById(scrollToId)!.scrollIntoView({ behavior: "smooth" });
-      }
-  };
-  return gotoandopen;
-}
+      // 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);
+    }
+  });
+  
\ No newline at end of file