src/sources/test-sources.tsx

+import BibtexParser from "../components/makeSources";
+
+export function TestSource(){
+  const bibtexSources = [
+    `
+    @article{Ensinck_Deeersmaecker_Heylen_Ramalho_Gijsbers_Far,
+	title        = {
+		Phenotyping of Rare CFTR Mutations Reveals Distinct Trafficking and
+		Functional Defects
+	},
+	author       = {
+		Ensinck, Marjolein and De Keersmaecker, Liesbeth and Heylen, Lise and
+		Ramalho, Anabela S. and Gijsbers, Rik and Farré, Ricard and De Boeck, Kris
+		and Christ, Frauke and Debyser, Zeger and Carlon, Marianne S.
+	},
+	year         = 2020,
+	month        = mar,
+	journal      = {Cells},
+	volume       = 9,
+	number       = 3,
+	pages        = 754,
+	doi          = {10.3390/cells9030754},
+	issn         = {2073-4409},
+	abstractnote = {
+		Background. The most common CFTR mutation, F508del, presents with multiple
+		cellular defects. However, the possible multiple defects caused by many rarer
+		CFTR mutations are not well studied. We investigated four rare CFTR mutations
+		E60K, G85E, E92K and A455E against well-characterized mutations, F508del and
+		G551D, and their responses to corrector VX-809 and/or potentiator VX-770.
+		Methods. Using complementary assays in HEK293T stable cell lines, we
+		determined maturation by Western blotting, trafficking by flow cytometry
+		using extracellular 3HA-tagged CFTR, and function by halide-sensitive YFP
+		quenching. In the forskolin-induced swelling assay in intestinal organoids,
+		we validated the effect of tagged versus endogenous CFTR. Results. Treatment
+		with VX-809 significantly restored maturation, PM localization and function
+		of both E60K and E92K. Mechanistically, VX-809 not only raised the total
+		amount of CFTR, but significantly increased the traffic efficiency, which was
+		not the case for A455E. G85E was refractory to VX-809 and VX-770 treatment.
+		Conclusions. Since no single model or assay allows deciphering all defects at
+		once, we propose a combination of phenotypic assays to collect rapid and
+		early insights into the multiple defects of CFTR variants.
+	},
+	language     = {eng}
+}
+    `
+  ];
+
+  return (
+    <div>
+      <h1>BibTeX to HTML in React</h1>
+      <BibtexParser bibtexSources={bibtexSources} />
+    </div>
+  );
+}
+
+export default TestSource;
\ No newline at end of file

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

@@ -10,8 +10,7 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
         //console.log(el)
         // console.log(el.getBoundingClientRect()) 
         if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
-            subtitle.style.color = "white";
-            subtitle.style.backgroundColor = "rgb(133, 15, 120, 0.8)";
+            subtitle.style.color = "var(--ourbeige)";
             subtitle.style.borderColor = "#850F78"; 
             subtitle.style.marginLeft = "5px"; 
             subtitle.style.paddingRight = "5px";
@@ -23,7 +22,7 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
             console.log("backcolor: ",subtitle.style.backgroundColor)    */     
         }
         else{
-            subtitle.style.color = "white";
+            subtitle.style.color = "var(--ourbeige)";
             subtitle.style.marginLeft = "0"; 
             subtitle.style.backgroundColor = "";
             subtitle.style.fontWeight = "500";

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/utils/TabNavigation.tsx → src/utils/TabNavigation.ts

 import { useEffect, useState } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+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';
 
-// Funktion, um den Haupttab zu öffnen
-export const openTab = (tabId: string, tabClass: string) => {
-  console.log((document.getElementById(tabId) as HTMLElement).classList[1])
-  console.log(`tabclass is ${tabClass}`)
-  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';
-  }
-};
-
-// 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';
-  }
-};
-
-// Funktion, um zu einem bestimmten Bereich (z.B. Collapse) zu scrollen
-export const handleScrollToCollapse = (collapseId: string) => {
-  const collapseElement = document.getElementById(collapseId);
-  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',
-    });
-  }
-};
-
-// Custom Hook zur zentralen Tab-Navigation
+// Custom Hook for central tab navigation
 export const useTabNavigation = () => {
-  const navigate = useNavigate();
   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
+      }
 
-  // Tab-Wechsel und URL-Update
+      // 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);
 
-    // URL entsprechend aktualisieren
+    // 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(() => {
-    console.log("Use Effect")
     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 scrollToId = params.get('scrollTo');
+    const changeTo = params.get('changeTo');
+    const colTab = params.get('colTab');
+  //  const navigate = useNavigate();
     
-    // Öffne Haupt- und ggf. verschachtelten Tab
+     
+
+
+     // 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; 
@@ -90,18 +95,24 @@ export const useTabNavigation = () => {
       }
     }
 
-    // Scrollen zu einem bestimmten Collapsible-Element
-    if (collapseId) {
-      handleScrollToCollapse(collapseId);
-    }
+   
 
-    // Tab von einer anderen Seite öffnen (falls definiert)
+    // 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;
@@ -116,5 +127,3 @@ export const useTabNavigation = () => {
 
   return { activeTab, activeSubTab, handleTabChange };
 };
-
-

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/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/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

 import { useNavigate } from "react-router-dom";
-import { useState } from "react";
 
 export const useNavigation = () => {
     const navigate = useNavigate();
 
-    const [isLoading, setIsLoading] = useState(false);
-
-
     const goToPagesAndOpenTab = (tabId: string, path: string) => {
-        
+    
         
         navigate(`${path}?tab=${tabId}`);
         
     };
     const goToTextsAndOpenCollapsible = (collapseId: string, path: string) => {
         
-        
         navigate(`${path}?collapseId=${collapseId}`);
     };
     const goToPageWithTabAndCollapsible = ({ path, tabId, collapseId }: { path: string, tabId: string, collapseId?: string }) => {
@@ -42,7 +37,7 @@ export const useNavigation = () => {
 
 
 
-    const goToPageWithTabAndScroll = ({ path, tabId, scrollToId }: { path: string, tabId: string, scrollToId?: string }) => {
+    const goToPageWithTabAndScroll = ({ path, tabId, scrollToId }: { path: string, tabId: string, scrollToId: string }) => {
         let url = `${path}?tab=${tabId}`;
         if (scrollToId) {
             url += `&scrollTo=${scrollToId}`;
@@ -50,8 +45,74 @@ export const useNavigation = () => {
         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 { isLoading, setIsLoading, goToPagesAndOpenTab, goToPageWithTabAndScroll, goToPageWithNestedTabs, goToPageWithTabAndCollapsible, goToTextsAndOpenCollapsible };
+    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",