useNavigateTabs();

src/contents/engineering.tsx

 
 import { ButtonOneEngineering } from "../components/Buttons";
 import { LoremShort } from "../components/Loremipsum";
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
 import { openElement } from "../utils/openElement";
 import { H3 } from "../components/Headings";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
-import { openNestedTab, openTab, handleScrollToCollapse } from "../utils/TabNavigation";
+import { useNavigateTabs } from "../utils/navigation";
 
 
 
 export function Engineering() {
-   const location = useLocation();
-
-  useEffect(() => {
-    const params = new URLSearchParams(location.search);
-    const collapseId = params.get('collapseId');
-    const tabId = params.get('tab');
-    const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs
-
-    // Open the tab specified by tabId (and subTab if nested)
-    if (tabId) {
-      if (subTabId) {   
-        // If subTab is provided, open the nested tab
-        openNestedTab(tabId, subTabId);
-      } else {
-        // Otherwise, just open the main tab
-        openTab(tabId);
-      }
-    }
-
-    // Scroll to the section specified by collapseId after opening the tab
-    if (collapseId) {
-      handleScrollToCollapse(collapseId);
-    }
-
-    // Open the tab from another page
-    if (tabId) {
-      openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
-    }
-  }, [location.search]);
-
+   useNavigateTabs();
     return (
       <>
         <div className="row mt-4">

src/contents/safety.tsx

-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
-import { openNestedTab, openTab, handleScrollToCollapse } from "../utils/TabNavigation";
+
 import { LoremMedium } from "../components/Loremipsum";
 import { Section, Subesction } from "./sections";
-export function Safety() {
-    const location = useLocation();
+import { useNavigateTabs } from "../utils/navigation";
 
-    useEffect(() => {
-      const params = new URLSearchParams(location.search);
-      const collapseId = params.get('collapseId');
-      const tabId = params.get('tab');
-      const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs
-  
-      // Open the tab specified by tabId (and subTab if nested)
-      if (tabId) {
-        if (subTabId) {   
-          // If subTab is provided, open the nested tab
-          openNestedTab(tabId, subTabId);
-        } else {
-          // Otherwise, just open the main tab
-          openTab(tabId);
-        }
-      }
-  
-      // Scroll to the section specified by collapseId after opening the tab
-      if (collapseId) {
-        handleScrollToCollapse(collapseId);
-      }
-  
-      // Open the tab from another page
-      if (tabId) {
-        openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
-      }
-    }, [location.search]);
+export const Safety: React.FC = () =>{
+  useNavigateTabs();
   
   return (
     <>

src/utils/createSidebar.tsx

 import { useEffect, useState } from "react";
 import { ScrollLink } from "../components/ScrollLink";
 import { Highlight, NewHighlight } from "./Highlight-functions";
-import { stringToSlug } from "./stringToSlug";
 
 // Funktion zur Erstellung der Sidebar
 export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string> }>) {
@@ -65,11 +64,6 @@ export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string>
      scrolling(tab)
     };
 
-    const toggleTabAndScroll = (tab: string) => {
-      setOpenTab(openTab === tab ? null : tab);
-      // onsole.log(`Status of tab ${tab} is ${openTab}`)
-      
-    };
     let subtitlenumber = 0; 
     return (
       <>
@@ -154,7 +148,7 @@ export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string>
     tabs.forEach(tab => {
         numsBig.push(`${tab.tab}H`); // z.B. RoleH, ChecksH
         if (tab.subtabs) {
-            tab.subtabs.forEach((subtab, index) => {
+            tab.subtabs.forEach((index) => {
                 numsSub.push(`${tab.tab}${index + 1}`); // z.B. Role1H, Role2H
             });
         }
@@ -164,30 +158,3 @@ export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string>
 }
 
 
-/* function deriveTabsData(tabs: Array<{ tab: string; subtabs?: Array<string> }>) {
-    let numsBig: string[] = [];
-    let numsSub: string[] = [];
-    
-    tabs.forEach((tab) => {
-      let bigslugname = stringToSlug(tab.tab);
-      numsBig.push(bigslugname);
-      if (tab.subtabs) {
-        let subtabid = 0; 
-        tab.subtabs.forEach((_index) => {
-          subtabid = subtabid +1; 
-    //      console.log(subtabid)
-          let tabname = `${tab.tab}${subtabid}`; 
-          let slugname = stringToSlug(tabname);
-          numsSub.push(slugname);
-        });
-      }
-    });
-  
-    return { numsBig, numsSub };
-  }
-  
-
-   */
-
-
-  
\ No newline at end of file

src/utils/navigation.ts

+// navigation.ts
+
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { handleScrollToCollapse, openNestedTab, openTab } from './TabNavigation';
+import { openFromOtherPage } from './openFromOtherpAge';
+
+export const useNavigateTabs = (): void => {
+  const location = useLocation();
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const collapseId = params.get('collapseId');
+    const tabId = params.get('tab');
+    const subTabId = params.get('subTab');
+
+    if (tabId) {
+      if (subTabId) {
+        openNestedTab(tabId, subTabId);
+      } else {
+        openTab(tabId);
+      }
+    }
+
+    if (collapseId) {
+      handleScrollToCollapse(collapseId);
+    }
+
+    if (tabId) {
+      openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+    }
+  }, [location.search]);
+};