src/sources/vorlage-source.tsx

+import BibtexParser from "../components/makeSources";
+
+export default function VorlageSources(){
+    return (
+        <div>
+          <BibtexParser bibtexSources={bibtexSources} />
+        </div>
+      );
+}
+
+
+const bibtexSources = [
+
+  `
+  `
+
+]
\ No newline at end of file

src/sources/wimscheyer-sources.tsx

+import BibtexParser from "../components/makeSources";
+
+export default function WischmeyerSources(){
+    return (
+        <div>
+          <BibtexParser bibtexSources={bibtexSources} />
+        </div>
+      );
+}
+
+
+const bibtexSources = [
+    `
+     
+@article{article, 
+
+author={Roth, F. C., Numberger, M., and Draguhn, A.}, 
+
+year={2023}, 
+
+month={}, 
+
+pages={1-14}, 
+
+title={Die Entwicklung der Patch-Clamp-Technik}, 
+
+volume={}, 
+
+journal={Springer eBooks}, 
+
+doi={10.1007/978-3-662-66053-9_1} 
+
+} 
+
+`,`
+
+@article{article, 
+
+author={Mete, V.}, 
+
+year={2023}, 
+
+month={ }, 
+
+pages={ }, 
+
+title={Entwicklung und Validierung neuer nicht-invasiver Diagnosesysteme für Mucociliary Clearance Disorders (MCCD)}, 
+
+volume={ }, 
+
+journal={Dissertation, Westfälische Wilhelms-Universität Münster}, 
+
+doi={10.17879/98958441905} 
+
+} 
+`,`
+
+@article{article, 
+
+author={Giaever, I. and Keese, C. }, 
+
+year={1993}, 
+
+month={ }, 
+
+pages={591-592}, 
+
+title={A morphological biosensor for mammalian cells}, 
+
+volume={366}, 
+
+journal={Nature}, 
+
+doi={10.1038/366591a0} 
+
+} 
+    `
+]
\ No newline at end of file

src/utils/Highlight-functions.ts

+export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
+    let TopDistance = 170; 
+   /*  console.log("Starting highlight check...")
+    console.log("here come el...")
+    console.log(el)
+    console.log("here comes subtitle...")
+    console.log(subtitle) */
+    if (el != null && subtitle != null){
+        //console.log("here comes el...")
+        //console.log(el)
+        // console.log(el.getBoundingClientRect()) 
+        if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
+            subtitle.style.color = "var(--ourbeige)";
+            subtitle.style.borderColor = "#850F78"; 
+            subtitle.style.marginLeft = "5px"; 
+            subtitle.style.paddingRight = "5px";
+            subtitle.style.fontWeight = "700";
+
+/*                 console.log("subtitle: ",subtitle)
+            console.log("style: ", subtitle.style)
+            console.log("color: ",subtitle.style.color)
+            console.log("backcolor: ",subtitle.style.backgroundColor)    */     
+        }
+        else{
+            subtitle.style.color = "var(--ourbeige)";
+            subtitle.style.marginLeft = "0"; 
+            subtitle.style.backgroundColor = "";
+            subtitle.style.fontWeight = "500";
+        }
+    }
+    
+  }
+
+/*   export function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
+    let TopDistance = 150; 
+
+    if (el != null && subtitle != null){
+
+        if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
+   
+            if(subtitle.childNodes[0] != undefined){
+                 console.log("if true: ");
+                console.log(subtitle.childNodes[0]); 
+                (subtitle.childNodes[0] as HTMLElement).classList.add("active-sideitem");
+                if(subtitle.childNodes[0].childNodes[1] != undefined){
+                    console.log("test: ")
+                    console.log(subtitle.childNodes[0].childNodes[1]); 
+                    (subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "block";
+                    console.log(`subtitle.childNodes[0].textContent ${subtitle.childNodes[0].textContent}`)
+                    console.log(`subtitle.childNodes[0].childNodes[1].nodeName: ${subtitle.childNodes[0].childNodes[1].nodeName}`)
+                }
+               } 
+        }
+        else{
+            subtitle.style.color = "red";
+            subtitle.style.backgroundColor = "";
+            subtitle.classList.remove("subtitle-active");
+            if(subtitle.childNodes[0] != undefined){
+               //  console.log("if true: ");
+                console.log(subtitle.childNodes[0]); 
+                (subtitle.childNodes[0] as HTMLElement).classList.remove("active-sideitem");
+                if(subtitle.childNodes[0].childNodes[1] != undefined){
+                    console.log("test: ")
+                    console.log(subtitle.childNodes[0].childNodes[1]); 
+                    (subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "none";
+                }
+               }
+                
+        }
+    }
+    
+  }
+ */
+
+  export function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
+    let TopDistance = 170; 
+    if (el != null && subtitle != null){
+        //console.log("Highlighting Element: ", el, "Subtitle: ", subtitle);
+        //console.log(`Element position: top=${el.getBoundingClientRect().top}, bottom=${el.getBoundingClientRect().bottom}`);
+        if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
+            (subtitle.childNodes[0] as HTMLElement).classList.add("active-sideitem");
+            subtitle.style.fontWeight = "900";
+            if(subtitle.childNodes[0].childNodes[1] != undefined){ 
+                (subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "block";
+               // console.log(`subtitle.childNodes[0].textContent ${subtitle.childNodes[0].textContent}`)
+                // console.log(`subtitle.childNodes[0].childNodes[1].nodeName: ${subtitle.childNodes[0].childNodes[1].nodeName}`)
+            }
+        } else {
+            (subtitle.childNodes[0] as HTMLElement).classList.remove("active-sideitem");
+            subtitle.style.fontWeight = "normal";
+            if(subtitle.childNodes[0] != undefined){
+                 (subtitle.childNodes[0] as HTMLElement).classList.remove("active-sideitem");
+                 if(subtitle.childNodes[0].childNodes[1] != undefined){
+                     (subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "none";
+                 }
+                }
+        }
+    } else {
+        console.error("Element oder Subtitle nicht gefunden:", el, subtitle);
+    }
+}

src/utils/LoadingContext.tsx

+import React, { createContext, useContext, useState } from "react";
+
+const LoadingContext = createContext<any>(null);
+
+export const LoadingProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <LoadingContext.Provider value={{ isLoading, setIsLoading }}>
+      {children}
+    </LoadingContext.Provider>
+  );
+};
+
+export const useLoading = () => useContext(LoadingContext);

src/components/RoutManager.tsx → src/utils/RoutManager.tsx

+//Important file ! do not change 
+
+
 import { useState, useEffect } from "react";
 import { Routes, Route, useLocation } from "react-router-dom";
 import LoadingScreen from "../components/LoadingScreen";
-import { getPathMapping } from "../utils/getPathMapping";
+import { getPathMapping } from "./getPathMapping";
 import { NotFound } from "../components/NotFound";
 import { Villbuttonrow } from "../components/Buttons";
 

src/utils/TabNavigation.ts

+import { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { openFromOtherPage } from './openFromOtherpAge';
+import { handleScroll } from './handleScroll';
+import { openNestedTab } from './openNestedTab';
+import { openTab } from './openTab';
+import { openTabInCollapsible } from './opentabincollapsible';
+
+// Custom Hook for central tab navigation
+export const useTabNavigation = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState<string | null>(null);
+  const [activeSubTab, setActiveSubTab] = useState<string | null>(null);
+  const [, setActiveCollapsible] = useState<string | null>(null);
+
+  // Tab Visibility Handler
+  const updateTabVisibility = (tabId: string | null, subTabId?: string | null) => {
+    document.querySelectorAll('.enginneeringtab').forEach((tab) => {
+    (tab as HTMLElement).style.display = 'none'; // All tabs hidden
+    });
+
+    if (tabId) {
+      const tabElement = document.getElementById(`tab-${tabId}`);
+      if (tabElement) {
+        tabElement.style.display = 'block'; // Show the current tab
+      }
+
+      // Handle nested subtabs
+      if (subTabId) {
+        const subTabElement = document.getElementById(subTabId);
+        if (subTabElement) {
+          subTabElement.style.display = 'block'; // Show subtab
+        }
+      }
+    }
+  };
+
+  // Tab Change and URL Update
+  const handleTabChange = (tabId: string, subTabId?: string) => {
+    setActiveTab(tabId);
+    setActiveSubTab(subTabId || null);
+
+    // Update URL
+    let newUrl = `${location.pathname}?tab=${tabId}`;
+    if (subTabId) {
+      newUrl += `&subTab=${subTabId}`;
+    }
+    navigate(newUrl, { replace: true });
+
+    // Immediately update tab visibility
+    updateTabVisibility(tabId, subTabId);
+  };
+
+  // On Location Change
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const tabId = params.get('tab');
+    const subTabId = params.get('subTab');
+
+    // Restore visibility
+    updateTabVisibility(tabId, subTabId);
+
+    // Handle scroll or collapsibles
+    const collapseId = params.get('collapseId');
+    const scrollToId = params.get('scrollTo');
+    const changeTo = params.get('changeTo');
+    const colTab = params.get('colTab');
+  //  const navigate = useNavigate();
+    
+     
+
+
+     // scrolls to a specific collapsible element
+    if (collapseId) {
+      setActiveCollapsible(collapseId);
+      handleScroll(collapseId);
+    }
+    if (colTab && collapseId) {
+      setActiveCollapsible(collapseId);
+      openTabInCollapsible(colTab, collapseId); // Öffne den Tab innerhalb des Collapsibles
+ 
+    }
+
+    // opens main and (if necessary) subtab
+    if (tabId) {
+      let tab = document.getElementById(tabId);
+      let tabClass = tab!.className; 
+      if (subTabId) {
+        let subTab = document.getElementById(subTabId);
+        let parentClass = (subTab as HTMLElement).classList[1]; 
+        openNestedTab(tabId, subTabId, parentClass, tabClass);
+      } else {
+        openTab(tabId, tabClass);
+      }
+    }
+
+   
+
+    // opens tab on another page
+    if (tabId) {
+      openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+    }
+
+    if (scrollToId) {
+      const element = document.getElementById(scrollToId);
+      if (element) {
+        const viewportHeight = window.innerHeight;
+        const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
+        const scrollToPosition = targetPosition - viewportHeight / 5 + element.clientHeight / 2;
+        window.scrollTo({ top: scrollToPosition, behavior: 'smooth' });
+      }
+    }
+    if (changeTo) {
+      const element = document.getElementById(changeTo);
+      if (element) {
+          const viewportHeight = window.innerHeight;
+          const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
+          const scrollToPosition = targetPosition - viewportHeight / 2 + element.clientHeight / 2;
+          window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
+      }
+  }
+
+    setActiveTab(tabId);
+    setActiveSubTab(subTabId || null);
+  }, [location.search]);
+
+  return { activeTab, activeSubTab, handleTabChange };
+};

src/utils/createSidebar.tsx

+import { useEffect, useState } from "react";
+import { ScrollLink } from "../components/ScrollLink";
+import { Highlight, NewHighlight } from "./Highlight-functions";
+import { BackUp } from "../components/Buttons";
+
+// Funktion zur Erstellung der Sidebar
+export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string> }>) {
+    const { numsBig, numsSub } = deriveTabsData(tabs);
+    console.log({ numsBig, numsSub })
+    const [openTab, setOpenTab] = useState<string | null>(null);
+    
+           
+    useEffect(() => {
+      const handleScroll = () => {
+        numsBig.forEach((item, ind) => {
+          const element = document.getElementById(item);
+          const subtitleElement = document.getElementById(`subtitle${ind}`);
+          if (element && subtitleElement) {
+            Highlight({ el: element }, { subtitle: subtitleElement });
+          }
+        });
+  
+        numsSub.forEach((item, ind) => {
+          const element = document.getElementById(item);
+          const subtitleElement = document.getElementById(`newsubtitle${ind}`);
+          if (element && subtitleElement) {
+            NewHighlight({ el: element }, { subtitle: subtitleElement });
+          }
+        });
+      };
+  
+      window.addEventListener("scroll", handleScroll);
+      return () => window.removeEventListener("scroll", handleScroll);
+    }, [numsBig, numsSub, openTab]);
+
+    const scrolling = (tab: string) => {
+      const targetElement = document.getElementById(tab);
+      if (targetElement) {
+        //console.log(`Scrolling to element with ID: ${tab}`);
+        
+        // Get the position of the element relative to the document
+        const elementRect = targetElement.getBoundingClientRect();
+        const elementTop = elementRect.top + window.scrollY;
+        
+        // Calculate the middle of the viewport
+        const viewportHeight = window.innerHeight;
+        const scrollOffset = elementTop - (viewportHeight / 5 - targetElement.offsetHeight / 2);
+       /*  
+        console.log(`Element Top: ${elementTop}`);
+        console.log(`Viewport Height: ${viewportHeight}`);
+        console.log(`Scroll Offset: ${scrollOffset}`); */
+        
+        window.scrollTo({
+            top: scrollOffset,
+            behavior: "smooth"
+        });
+      } else {
+          console.error(`Scroll target element not found for ID: ${tab}`);
+      }
+    }
+
+    const toggleTab = (tab: string) => {
+      setOpenTab(openTab === tab ? null : tab);
+     // console.log(`Status of tab ${tab} is ${openTab}`)
+     scrolling(tab)
+    };
+
+    let subtitlenumber = 0; 
+    return (
+      <>
+        <br />
+        <div className="sticky-top">
+          <nav className="sidebar">
+            {tabs.map((tab, index) => {
+              const tabId = `tab-${tab.tab}`;
+              const parentId = `parent-${tab.tab}`;
+              const subtitleId = `subtitle${index}`;
+              
+              return (
+                <div key={index}>
+                  
+                    <div id={subtitleId} className="detail-sideitem">
+                      <div id={parentId} className="sideitem">
+                      <a
+                          onClick={() => {
+                            // console.log(`Clicked on Tab ${tab.tab} with tab-name tab-${tab.tab} and parent parent-${tab.tab}`);
+                            toggleTab(tab.tab);
+                            // Close other tabs when a new tab is opened
+                            tabs.forEach((t) => {
+                              if (t.tab !== tab.tab) {
+                                document.getElementById(`tab-${t.tab}`)!.style.display = "none";
+                                document.getElementById(`parent-${t.tab}`)!.classList.remove("active-sideitem");
+                              }
+                            });
+                            // Show or hide the selected tab
+                            document.getElementById(tabId)!.style.display = openTab === tab.tab ? "block" : "none";
+                            document.getElementById(parentId)!.classList.toggle("active-sideitem");
+                          }}
+                        >
+                          <summary>{tab.tab}</summary>
+                        </a>
+                        {tab.subtabs && (
+                          <span
+                            id={tabId}
+                            className="sidesubtab"
+                            style={{ display: openTab === tab.tab ? "block" : "none" }}
+                          >
+                            <ul>
+                              {tab.subtabs.map((subtab, subIndex) => {
+                                const subTabId = `newsubtitle${subtitlenumber}`;
+                               /*  console.log(`Old subtitlenumber is ${subtitlenumber}`) */
+                                subtitlenumber = subtitlenumber + 1; 
+                                // console.log(`New subtitlenumber is ${subtitlenumber}`)
+                               // console.log(`Made subtab newsubtitle${subtitlenumber} that will link to ${tab.tab}${subIndex +1 }H`) 
+                                return (
+                                  <li key={subtitlenumber} id={subTabId}>
+                                    <ScrollLink label={subtab} targetId={`${tab.tab}${subIndex +1 }H`} />
+                                  </li>
+                                );
+                              })}
+                            </ul>
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  
+  
+                  
+                </div>
+              );
+            })}
+          </nav>
+          <BackUp/>
+        </div>
+      </>
+    );
+  }
+
+
+  function deriveTabsData(tabs: Array<{ tab: string; subtabs?: Array<string> }>) {
+    const numsBig: string[] = [];
+    const numsSub: string[] = [];
+
+    tabs.forEach(tab => {
+        let count = 1;  
+        numsBig.push(`${tab.tab}H`); // z.B. RoleH, ChecksH
+        if (tab.subtabs) {
+            tab.subtabs.forEach((_index) => {
+                // console.log(index)
+                numsSub.push(`${tab.tab}${count}`); // z.B. Role1H, Role2H
+                count += 1; 
+            });
+        }
+    });
+
+    return { numsBig, numsSub };
+}
+
+

src/utils/getPathMapping.ts

@@ -25,8 +25,8 @@ export const getPathMapping = () => {
             name: page.name,
             title: page.title,
             component: page.component,
-            header: page.header,
-            navlist: page.navlist, 
+            header: page.header!,
+            navlist: page.navlist!, 
           };
         }
       });

src/utils/goto.ts

+export const goTo = (el: HTMLElement): void => {
+    const elementRect = el.getBoundingClientRect();
+    const elementTop = elementRect.top + window.pageYOffset; // Absolute position from the top of the document
+    const viewportHeight = window.innerHeight;
+
+    // Calculate the scroll position so the top of the element is centered in the viewport
+    const middlePosition = elementTop - (viewportHeight / 5 - el.offsetHeight / 2);
+
+    window.scrollTo({
+        top: middlePosition,
+        behavior: 'smooth'
+    });
+};
+
+
+/* 
+export const goToTextsAndOpenCollapsible = ({collapseId, path}: {collapseId: string, path: string}) => {
+    const navigate = useNavigate();
+    navigate(`${path}${collapseId}`);
+};
+export const goToPagesAndOpenTab = (tabId: string, path: string) => {
+    const navigate = useNavigate();
+    navigate(`${path}${tabId}`);
+}; */
\ No newline at end of file

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/openAndScroll.ts

+export function openAndScroll({ it, scrollTarget }: { it: string, scrollTarget?: string }) {
+    const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        _event.preventDefault(); // Prevent default anchor behavior
+
+        console.log(`openAndScroll called with it: ${it} and scrollTarget: ${scrollTarget}`);
+
+        // Attempt to find the elements
+        const subtabElement = document.getElementById(it);
+        const parentElementId = "parent-" + it.replace("tab-", "");
+        const parentElement = document.getElementById(parentElementId);
+
+        console.log(`subtabElement with ID ${it}: `, subtabElement);
+        console.log(`parentElement with ID ${parentElementId}: `, parentElement);
+
+        if (subtabElement && parentElement) {
+            console.log("Found subtabElement and parentElement.");
+            // Show the selected tab in the sidebar and add active class
+            subtabElement.style.display = "block";
+            parentElement.classList.add("active-sideitem");
+        } else {
+            console.error(`Subtab element or parent element not found for ID: ${it}`);
+        }
+
+        // If a scroll target is provided, scroll to that element on the page
+        if (scrollTarget) {
+            const targetElement = document.getElementById(scrollTarget);
+            if (targetElement) {
+                console.log(`Scrolling to element with ID: ${scrollTarget}`);
+                
+                // Get the position of the element relative to the document
+                const elementRect = targetElement.getBoundingClientRect();
+                const elementTop = elementRect.top + window.scrollY;
+                
+                // Calculate the middle of the viewport
+                const viewportHeight = window.innerHeight;
+                const scrollOffset = elementTop - (viewportHeight / 5 - targetElement.offsetHeight / 2);
+               /*  
+                console.log(`Element Top: ${elementTop}`);
+                console.log(`Viewport Height: ${viewportHeight}`);
+                console.log(`Scroll Offset: ${scrollOffset}`); */
+                
+                window.scrollTo({
+                    top: scrollOffset,
+                    behavior: "smooth"
+                });
+            } else {
+                console.error(`Scroll target element not found for ID: ${scrollTarget}`);
+            }
+        }
+    }
+    return gotoandopen;
+}
+
+
+export function openAndCloseAndScroll({ it, scrollTarget, close }: { it: string, scrollTarget?: string, close: Array<string> }) {
+    const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        _event.preventDefault(); // Prevent default anchor behavior
+
+        console.log(`openAndScroll called with it: ${it} and scrollTarget: ${scrollTarget}`);
+
+        // Attempt to find the elements
+        const subtabElement = document.getElementById(it);
+        const parentElementId = "parent-" + it.replace("tab-", "");
+        const parentElement = document.getElementById(parentElementId);
+
+        
+        if (close) {
+            for (let idx in close){
+                let tab = "tab-" + close[idx]; 
+                let parent = "parent-" + close[idx]; 
+                document.getElementById(tab)!.style.display = "none"; 
+                document.getElementById(parent)!.classList.remove("active-sideitem");
+            }
+        }
+        
+        console.log(`subtabElement with ID ${it}: `, subtabElement);
+        console.log(`parentElement with ID ${parentElementId}: `, parentElement);
+
+        if (subtabElement && parentElement) {
+            console.log("Found subtabElement and parentElement.");
+            // Show the selected tab in the sidebar and add active class
+            subtabElement.style.display = "block";
+            parentElement.classList.add("active-sideitem");
+        } else {
+            console.error(`Subtab element or parent element not found for ID: ${it}`);
+        }
+
+        // If a scroll target is provided, scroll to that element on the page
+        if (scrollTarget) {
+            const targetElement = document.getElementById(scrollTarget);
+            if (targetElement) {
+                console.log(`Scrolling to element with ID: ${scrollTarget}`);
+                
+                // Get the position of the element relative to the document
+                const elementRect = targetElement.getBoundingClientRect();
+                const elementTop = elementRect.top + window.scrollY;
+                
+                // Calculate the middle of the viewport
+                const viewportHeight = window.innerHeight;
+                const scrollOffset = elementTop - (viewportHeight / 5 - targetElement.offsetHeight / 2);
+               /*  
+                console.log(`Element Top: ${elementTop}`);
+                console.log(`Viewport Height: ${viewportHeight}`);
+                console.log(`Scroll Offset: ${scrollOffset}`); */
+                
+                window.scrollTo({
+                    top: scrollOffset,
+                    behavior: "smooth"
+                });
+            } else {
+                console.error(`Scroll target element not found for ID: ${scrollTarget}`);
+            }
+        }
+    }
+    return gotoandopen;
+}

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",  /* 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";
+      }
+    }
+
+    // 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}`;
+    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

+export function openFromOtherPage(it: string, openclass?: string) {
+    var opcla: 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 the specified class and hide them
+      let tabcontent = document.getElementsByClassName(opcla);
+      for (let i = 0; i < tabcontent.length; i++) {
+          (tabcontent[i] as HTMLElement).style.display = "none";
+      }
+      // Show the specific tab content based on the "it" parameter
+      const tabToOpen = document.getElementById(it);
+      if (tabToOpen) {
+          tabToOpen.style.display = "block";
+  
+          // Scroll the tab content into view
+          const elementTop = tabToOpen.getBoundingClientRect().top + window.pageYOffset;
+          const offset = window.innerHeight / 2 - tabToOpen.offsetHeight / 2;
+          const scrollPosition = elementTop - offset;
+  
+          window.scrollTo({
+              top: scrollPosition,
+              behavior: 'smooth',
+          });
+      }
+      // Optionally, add an "active" class to the clicked button (if needed)
+    const tabs = document.querySelectorAll('.btn-new');
+    tabs.forEach(tab => tab.classList.remove('active'));
+
+    if (event.currentTarget) {
+        event.currentTarget.classList.add('active');
+    }
+
+    }
+}
\ No newline at end of file

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, 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.");
+    }
+  });
+}

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,22 +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 }) => {
+        
+        
+        let url = `${path}?tab=${tabId}`;
+        if (subTabId) {
+            url += `&subTab=${subTabId}`;
+        }
+        if (collapseId) {
+            url += `&collapseId=${collapseId}`;
+        }
+        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 };
-};
\ No newline at end of file
+
+
+
+    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) {
+            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);
+    };
+
+    
+    return { goToPlace,  goToPageAndScroll, goToPagesAndOpenTab, goToPageWithTabAndScroll, goToPageWithNestedTabs, goToPageWithTabAndCollapsible, goToTextsAndOpenCollapsible };
+};