src/utils/handleScroll.ts

+// scrolling to a specific element
+export const handleScroll = (scrollId: string) => {
+    const scrollElement = document.getElementById(scrollId);
+    if (scrollElement) {
+      const elementTop = scrollElement.getBoundingClientRect().top + window.pageYOffset;
+      const offset = window.innerHeight / 2 - scrollElement.offsetHeight / 2;
+      const scrollPosition = elementTop - offset;
+      
+      window.scrollTo({
+        top: scrollPosition,
+        behavior: 'smooth',
+      });
+    }
+  };
\ No newline at end of file

src/utils/openClass.ts

+export function openClasses({className, classtoHide}:{className: string, classtoHide: string}){
+    const showElementsByClass = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        // Alle Elemente mit der angegebenen Klasse auswählen
+        const elements = document.getElementsByClassName(className);
+        const hide = document.getElementsByClassName(classtoHide);
+        for (let i = 0; i < hide.length; i++) {
+            hide[i].setAttribute('style', 'display: none;');
+        }
+        // Jedes Element durchgehen und den Display-Stil auf 'block' setzen
+        for (let i = 0; i < elements.length; i++) {
+            (elements[i] as HTMLElement).style.setProperty('display', 'block', 'important');  
+        }
+    
+    };
+    return showElementsByClass; 
+}

src/utils/openElement.ts

+import { useTabNavigation } from "./TabNavigation";
+
 export function openElement({
-    elementToOpen, 
-    classToHide,  /* tabcontent */
-    elementToClose, 
-    buttonClass, /* = "tablinks" */ 
-    eventTargetClass = "active"
-  }: {
-    elementToOpen: string,
-    classToHide: string, 
-    classToClose?: string, 
-    elementToClose?: string, 
-    buttonClass?: string, 
-    eventTargetClass?: string
-  }) {
-    const openElement = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-      let i, elementsToHide, elementsToClose, tabLinks;
-  
-      // Hide all elements with the classToHide (e.g., "tabcontent")
-      elementsToHide = document.getElementsByClassName(classToHide);
-      for (i = 0; i < elementsToHide.length; i++) {
-        (elementsToHide[i] as HTMLElement).style.display = "none";
+  elementToOpen, 
+  classToHide,  /* tabcontent */
+  elementToClose,   
+  buttonClass, /* = "tablinks" */ 
+  eventTargetClass = "active",  /* Hier handleTabChange als Parameter einfügen */
+}: {
+  elementToOpen: string,
+  classToHide: string, 
+  classToClose?: string, 
+  elementToClose?: string, 
+  buttonClass?: string, 
+  eventTargetClass?: string,
+   /* Neuer Parameter für die Tab-Änderungslogik */
+}) {
+  const openElement = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    let i, elementsToHide, elementsToClose, tabLinks;
+
+    // Hide all elements with the classToHide (e.g., "tabcontent")
+    elementsToHide = document.getElementsByClassName(classToHide);
+    for (i = 0; i < elementsToHide.length; i++) {
+      (elementsToHide[i] as HTMLElement).style.display = "none";
+    }
+
+    // If elementToClose is provided, hide these elements too (optional)
+    if (elementToClose) {
+      elementsToClose = document.getElementsByClassName(elementToClose);
+      for (i = 0; i < elementsToClose.length; i++) {
+        (elementsToClose[i] as HTMLElement).style.display = "none";
       }
-  
-      // If elementToClose is provided, hide these elements too (optional)
-      if (elementToClose) {
-        elementsToClose = document.getElementsByClassName(elementToClose);
-        for (i = 0; i < elementsToClose.length; i++) {
-          (elementsToClose[i] as HTMLElement).style.display = "none";
-        }
+    }
+
+    // Clear the "active" class from elements with the buttonClass (e.g., "tablinks")
+    if (buttonClass) {
+      tabLinks = document.getElementsByClassName(buttonClass);
+      for (i = 0; i < tabLinks.length; i++) {
+        tabLinks[i].className = tabLinks[i].className.replace(` ${eventTargetClass}`, "");
       }
-  
-      // Clear the "active" class from elements with the buttonClass (e.g., "tablinks")
-      if (buttonClass) {
-        tabLinks = document.getElementsByClassName(buttonClass);
-        for (i = 0; i < tabLinks.length; i++) {
-          tabLinks[i].className = tabLinks[i].className.replace(` ${eventTargetClass}`, "");
-        }
-      }
-  
-      // Display the element to open (elementToOpen, e.g., a city tab or content section)
-      const element = document.getElementById(elementToOpen);
-      if (element) {
-        element.style.display = "block";
-      }
-  
-      // Add the "active" class to the clicked element
-      event.currentTarget.className += ` ${eventTargetClass}`;
-    };
-  
-    return openElement;
-  }
-  
\ No newline at end of file
+    }
+
+    // Display the element to open (elementToOpen, e.g., a city tab or content section)
+    const element = document.getElementById(elementToOpen);
+    if (element) {
+      element.style.display = "block";
+    }
+
+    // Add the "active" class to the clicked element
+    event.currentTarget.className += ` ${eventTargetClass}`;
+    const { handleTabChange } = useTabNavigation(); 
+    // Rufe handleTabChange auf, um die URL entsprechend anzupassen
+    handleTabChange(elementToOpen);  // Hier wird die Tab-Änderung und URL-Update durchgeführt
+  };
+
+  return openElement;
+}

src/utils/openFromOtherpAge.ts

@@ -3,20 +3,16 @@ export function openFromOtherPage(it: string, openclass?: string) {
     if (openclass){
         opcla = openclass;
     }
+    // if no tab specified use default class
     else{
         opcla = "cycletab"; 
     }
     return (event: React.MouseEvent<HTMLElement> | { currentTarget: HTMLElement }) => {
-      // Get all elements with class "cycletab" and hide them
+      // Get all elements with the specified class and hide them
       let tabcontent = document.getElementsByClassName(opcla);
-      /* let subtabcontent = document.getElementsByClassName("subcycletab"); */
       for (let i = 0; i < tabcontent.length; i++) {
           (tabcontent[i] as HTMLElement).style.display = "none";
       }
-      /* for (let i = 0; i < subtabcontent.length; i++) {
-        (subtabcontent[i] as HTMLElement).style.display = "none";
-    } */
-      
       // Show the specific tab content based on the "it" parameter
       const tabToOpen = document.getElementById(it);
       if (tabToOpen) {

src/utils/openNestedTab.ts

+import { openTab } from "./openTab";
+
+// Funktion, um verschachtelte Tabs zu öffnen
+export const openNestedTab = (parentTabId: string, childTabId: string, parentClass: string, childClass: string) => {
+    openTab(parentTabId, parentClass);
+  
+    const nestedTabs = document.querySelectorAll(`#${parentTabId} ${childClass}`);
+    nestedTabs.forEach((tab) => {
+      (tab as HTMLElement).style.display = 'none';
+    });
+  
+    const selectedNestedTab = document.getElementById(childTabId);
+    if (selectedNestedTab) {
+      selectedNestedTab.style.display = 'block';
+    }
+  };
\ No newline at end of file

src/utils/openTab.ts

+// Function to open a main tab
+export const openTab = (tabId: string, tabClass: string) => {
+ // console.log(`Trying to find tab with ID ${tabId}`);
+  const selectedTab = document.querySelector(`#${tabId}`);
+  if (selectedTab) {
+    //console.log('Tab found!');
+    const tabs = document.getElementsByClassName(tabClass);
+    for (let index = 0; index < tabs.length; index++) {
+      (tabs[index] as HTMLElement).style.display = 'none';
+    }
+    const selectedTab = document.getElementById(tabId);
+    if (selectedTab) {
+      selectedTab.style.display = 'block';
+      selectedTab.style.visibility = 'visible';
+      selectedTab.style.position = 'relative';  // In case there's a positioning issue
+      selectedTab.style.zIndex = '10';  // Ensure the tab is above other elements
+    }
+  } else {
+    console.error(`Tab with ID ${tabId} not found.`);
+  }
+};

src/utils/openThem.ts

-export function openThem({it}: {it: string}){
-    const gotoandopen =  (_event : React.MouseEvent<HTMLElement, MouseEvent>) => {
-
-      console.log("it classname: " + document.getElementById(it)?.className)
-      console.log("it: " + it)
-      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");
-      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...")
-      }
-      
-        document.getElementById(it)!.style.display = "block";
-        document.getElementById(parent)!.classList.add("active-sideitem");
-        document.getElementById(contenttabid)!.style.display = "block";
+export function openThem({ it, scrollToId }: { it: string; scrollToId?: string }) {
+  const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    if (typeof window !== 'undefined') {
+      console.log(`Opening tab: ${it}`);
+      updateTabs(it, scrollToId);
+
+      // Update der URL
+      const newUrl = `?tab=${it}`;
+      console.log(`Updating URL to: ${newUrl}`);
+      window.history.pushState({ tab: it }, '', newUrl);
+  /*     if (scrollToId && document.getElementById(scrollToId)) {
+        const scElement = document.getElementById(scrollToId);
+        if (scElement) {
+            const scrollPos = window.innerHeight / 2 - scElement.offsetHeight / 2;
+            window.scrollTo({ top: scrollPos, behavior: 'smooth' });
+        }
+      } */
+      // Scrollen in die Mitte
+     /*  const midScrollPosition = window.innerHeight / 2; // Berechnung der Mitte des Viewports
+      console.log(`Scrolling to middle position: ${midScrollPosition}`); */
+     /*  window.scrollTo({ top: midScrollPosition, behavior: 'smooth' }); */
+    }
+  };
+
+  return gotoandopen;
+}
+
+function updateTabs(it: string, scrollToId?: string) {
+  if (typeof window === 'undefined') return;
+
+  let contenttabid = "tab-" + it;
+  let parent = "parent-" + it;
+
+  console.log(`Updating tabs for: ${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";
+    console.log(`Hiding subtab: ${subtabs[i].id}`);
+  }
+  for (let i = 0; i < contenttabs.length; i++) {
+    (contenttabs[i] as HTMLElement).style.display = "none";
+    console.log(`Hiding content tab: ${contenttabs[i].id}`);
+  }
+  for (let i = 0; i < sideitems.length; i++) {
+    (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
+    console.log(`Removing active class from side item: ${sideitems[i].id}`);
+  }
+
+  // Zeige den aktuellen Tab und markiere das entsprechende Sidebar-Item
+  document.getElementById(it)!.style.display = "block";
+  console.log(`Showing tab: ${it}`);
+  document.getElementById(parent)!.classList.add("active-sideitem");
+  console.log(`Activating side item: ${parent}`);
+  document.getElementById(contenttabid)!.style.display = "block";
+  console.log(`Showing content tab: ${contenttabid}`);
+
+  // Scrolle zu der angegebenen ID, falls vorhanden
+  if (scrollToId) {
+    const collapseElement = document.getElementById(scrollToId);
+    if (collapseElement) {
+        const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
+        const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
+        const scrollPosition = elementTop - offset;
+
+        window.scrollTo({
+            top: scrollPosition,
+            behavior: 'smooth',
+        });
+    }
+}
+/*   if (scrollToId && document.getElementById(scrollToId)) {
+    const scElement = document.getElementById(scrollToId);
+    if (scElement) {
+        const scrollPos = window.innerHeight / 2 - scElement.offsetHeight / 2;
+        window.scrollTo({ top: scrollPos, behavior: 'smooth' });
+    }
+  } */
+}
+
+// Füge einen Event Listener für `popstate` hinzu
+if (typeof window !== 'undefined') {
+  window.addEventListener('popstate', (event) => {
+    console.log('Popstate event triggered');
+    if (event.state) {
+      const tab = event.state.tab;
+      console.log(`Restoring tab: ${tab}`);
+      updateTabs(tab);
       
-        
+      // Scrollen in die Mitte beim Zurücknavigieren
+      console.log("Scrolling to middle on popstate...");
+      const midScrollPosition = window.innerHeight / 2;
+      window.scrollTo({ top: midScrollPosition, behavior: 'smooth' });
+    } else {
+      console.log("No state found in popstate event.");
     }
-    return gotoandopen; 
-  }
\ No newline at end of file
+  });
+}

src/utils/opentabincollapsible.ts

+export const openTabInCollapsible = (tabId: string, collapsibleId: string) => {
+    // Warten Sie, bis das DOM vollständig geladen wurde
+    setTimeout(() => {
+        // Holen Sie sich das Collapsible
+        const collapsible = document.getElementById(collapsibleId);
+        if (!collapsible) {
+            console.error(`Collapsible mit ID ${collapsibleId} nicht gefunden!`);
+            return;
+        }
+
+        // Loggen Sie das, um sicherzustellen, dass das Collapsible korrekt gefunden wird
+        console.log(`Collapsible mit ID ${collapsibleId} gefunden`);
+
+        // Überprüfen Sie, ob der Tab mit der gegebenen ID existiert
+        const tab = collapsible.querySelector(`#${tabId}`);
+        if (!tab) {
+            console.error(`Tab mit ID ${tabId} im Collapsible ${collapsibleId} wurde nicht gefunden!`);
+            return;
+        }
+        let tabClass = tab!.className; 
+        const tabs = document.getElementsByClassName(tabClass);
+        for (let index = 0; index < tabs.length; index++) {
+            (tabs[index] as HTMLElement).style.display = 'none';
+          }
+        // Wenn der Tab gefunden wurde, stellen Sie sicher, dass der Tab sichtbar gemacht wird
+        console.log(`Tab mit ID ${tabId} im Collapsible ${collapsibleId} wird jetzt geöffnet.`);
+        (tab as HTMLElement).style.display = 'block';
+        (tab as HTMLElement).style.visibility = 'visible';
+        (tab as HTMLElement).style.position = 'relative';  // Falls es ein Positionierungsproblem gibt
+        (tab as HTMLElement).style.zIndex = '10';  // Stelle sicher, dass der Tab über anderen Elementen liegt
+
+
+        // Loggen Sie den Stil des Tabs, um zu überprüfen, ob er tatsächlich auf 'block' gesetzt wurde
+        console.log(`Tab-Display-Stil für ${tabId}: ${(tab as HTMLElement).style.display}`);
+
+    }, 100); // 100 ms Verzögerung für DOM-Ladezeit
+};

src/utils/useNavigation.ts

@@ -4,34 +4,115 @@ export const useNavigation = () => {
     const navigate = useNavigate();
 
     const goToPagesAndOpenTab = (tabId: string, path: string) => {
-        navigate(`${path}${tabId}`);
+    
+        
+        navigate(`${path}?tab=${tabId}`);
+        
     };
-
     const goToTextsAndOpenCollapsible = (collapseId: string, path: string) => {
-        navigate(`${path}${collapseId}`);
+        
+        navigate(`${path}?collapseId=${collapseId}`);
     };
     const goToPageWithTabAndCollapsible = ({ path, tabId, collapseId }: { path: string, tabId: string, collapseId?: string }) => {
-        const navigate = useNavigate();
-        navigate(`${path}?tab=${tabId}${collapseId ? `&collapseId=${collapseId}` : ''}`);
+        
+        
+        let url = `${path}?tab=${tabId}`;
+        if (collapseId) {
+            url += `&collapseId=${collapseId}`;
+        }
+        navigate(url);
     };
-
     const goToPageWithNestedTabs = ({ path, tabId, subTabId, collapseId }: { path: string, tabId: string, subTabId?: string, collapseId?: string }) => {
-        const navigate = useNavigate();
+        
+        
         let url = `${path}?tab=${tabId}`;
         if (subTabId) {
-          url += `&subTab=${subTabId}`;
+            url += `&subTab=${subTabId}`;
+        }
+        if (collapseId) {
+            url += `&collapseId=${collapseId}`;
+        }
+        navigate(url);
+    };
+
+
+
+    const goToPageWithTabAndScroll = ({ path, tabId, scrollToId }: { path: string, tabId: string, scrollToId: string }) => {
+        let url = `${path}?tab=${tabId}`;
+        if (scrollToId) {
+            url += `&scrollTo=${scrollToId}`;
         }
+        navigate(url);
+    };
+
+    const goToPageAndScroll = (scrollToId: string, path: string) => {
+        
+        navigate(`${path}?scrollTo=${scrollToId}`);
+    };
+
+  
+
+    const goToPlace = ({
+        path,
+        scrollToId,
+        tabId,
+        subTabId,
+        collapseId,
+        tabincolId
+    }: { 
+        path: string;
+        scrollToId?: string;
+        tabId?: string;
+        subTabId?: string;
+        collapseId?: string;
+        tabincolId?: string;
+    }) => {
+    // Den vollständigen Pfad erstellen, indem wir den basePath und path kombinieren
+    let url = `/${path.startsWith("/") ? path.slice(1) : path}`;
+
+
+        
+        let paramsAdded = false; 
+        console.log("Found path: " + path)
+        // 1. Tab-Logik (tabId und subTabId)
+        if (tabId) {
+            console.log("Found tabID: " + tabId)
+            url += `?tab=${tabId}`;
+            paramsAdded = true;
+            if (subTabId) {
+                console.log("Found subTabId: " + subTabId)
+                url += `&subTab=${subTabId}`;
+            }
+        }
+
+        // 2. Collapse-Logik (collapseId und tabincolId)
         if (collapseId) {
-          url += `&collapseId=${collapseId}`;
+            console.log("Found collapseId: " + collapseId)
+            if (!tabId) {
+                // Wenn kein tabId gesetzt ist, fügen wir collapseId hinzu
+                url += url.includes('?') ? `&collapseId=${collapseId}` : `?collapseId=${collapseId}`;
+                paramsAdded = true;
+            }
+            if (tabincolId) {
+                console.log("Found tabincolId: " + tabincolId)
+                url += `&colTab=${tabincolId}`;
+            }
+        }
+
+        // 3. Scroll-Logik (scrollToId)
+        if (scrollToId) {
+            console.log("Found scrollToId: " + scrollToId)
+            // Wenn bereits Parameter existieren, fügen wir & hinzu, ansonsten ?
+            const separator = paramsAdded ? '&' : '?';
+            paramsAdded = true;
+            url += `${separator}scrollTo=${scrollToId}`;
         }
+        console.log("Final URL:", url);
+
+        // Navigiere zur URL
         navigate(url);
-      };
-/* <a onClick={() => goToPageWithTabAndCollapsible({
-    path: "/human-practices",
-    tabId: "InvWesthoff",
-    collapseId: "collapse-1"  // ID of the collapsible to open
-})}>
-    Go to Human Practices and Open Collapsible 1
-</a> */
-    return { goToPagesAndOpenTab, goToTextsAndOpenCollapsible, goToPageWithTabAndCollapsible, goToPageWithNestedTabs };
-};
\ No newline at end of file
+    };
+
+    
+    return { goToPlace,  goToPageAndScroll, goToPagesAndOpenTab, goToPageWithTabAndScroll, goToPageWithNestedTabs, goToPageWithTabAndCollapsible, goToTextsAndOpenCollapsible };
+};

tsconfig.json

@@ -5,6 +5,7 @@
       "lib": ["ES2020", "DOM", "DOM.Iterable"],
       "module": "ESNext",
       "skipLibCheck": true,
+      "noImplicitAny": false,
   
       /* Bundler mode */
       "moduleResolution": "bundler",