engineering pushstate

src/sidebars/engS.tsx

@@ -31,7 +31,7 @@ export function EngSide(){
             <div className="sticky-top">
             <nav className="sidebar" id="eng-sidebar">
                 <div> 
-                    <a onClick={openThem({it: "our-cycle", scrollToId: "ourcycle"})}>
+                    <a onClick={openThem({it: "our-cycle", scrollToId: "Our cycle"})}>
                         <div className="detail-sideitem"> 
                             <div id="parent-our-cycle" className="sideitem active-sideitem">
                                 <summary>Our Cycle</summary>
@@ -43,7 +43,7 @@ export function EngSide(){
                     </a>
                 </div> 
                 <div> 
-                    <a onClick={openThem({it: "proof-of-concept"})}>
+                    <a onClick={openThem({it: "proof-of-concept", scrollToId: ""})}>
                         <div className="detail-sideitem">
                             <div id="parent-proof-of-concept" className="sideitem">
                                 <summary>Proof Of Concept</summary>

src/utils/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);
-    };
+  const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    updateTabs(it, scrollToId);
     
-    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";
+    // Update der URL
+    const newUrl = `?tab=${it}`;
+    window.history.pushState({ tab: it }, '', newUrl);
+  };
   
-    // Scrolle zu der angegebenen ID, falls vorhanden
-    if (scrollToId && document.getElementById(scrollToId)) {
-      document.getElementById(scrollToId)!.scrollIntoView({ behavior: "smooth" });
-    }
+  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";
   }
-  
-  // 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
+  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);
+  }
+});