diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index 5a0db6163880e5c5732b191187709022e8c58371..09fb191dc0d6c68ce90079ecde88d22152c1ad3b 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -2,6 +2,7 @@ import { Link } from "react-router-dom";
import { openFromOtherPage } from "../utils/openFromOtherpAge";
import { openThem } from "../utils/openThem";
import { openElement } from "../utils/openElement";
+import { useNavigation } from "../utils/useNavigation";
interface UrlButtonProps{
href: string,
children: string,
@@ -163,13 +164,15 @@ export function ButtonTwo(){
}
export function ButtonOne({text, open, openclass}: {text:string, open:string, openclass?: string}){
+ const { goToPagesAndOpenTab } = useNavigation();
if (openclass) {
return(
<div className="boxy-1">
- <span typeof="button" onClick={openFromOtherPage(open, openclass)}>
+ <a onClick={() => goToPagesAndOpenTab(open, "")}>
<div className="btn-new btn-one">
{text}
- </div></span>
+ </div>
+ </a>
</div>
)
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index 59564d1a6d838abc13c3eece22b4bd0ea4aa236e..e9aa9a9492a80834a607cc5a84a7aa1d890215fa 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -1,10 +1,10 @@
import { FadeIn } from "../components/FadeIn";
import { Breathe } from "../components/Breathe";
import { Problems } from "../components/Problems";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Home() {
- useNavigateTabs();
+ useTabNavigation();
return (
<div className="row mt-4">
<div className="col">
diff --git a/src/contents/Human Practices/human-practices.tsx b/src/contents/Human Practices/human-practices.tsx
index 92a92bcbafe9e51049984e7480638bf512830fb8..fc0025993841e748deb1e3de84e04fa947573f4b 100644
--- a/src/contents/Human Practices/human-practices.tsx
+++ b/src/contents/Human Practices/human-practices.tsx
@@ -49,15 +49,15 @@
<p></p>
*/
import { openElement } from "../../utils/openElement";
-import { useNavigateTabs } from "../../utils/navigation";
import { HPOverview } from "./Overwiev";
import { HPIntroduction } from "./Introduction";
import { HPIntegrated } from "./IHP";
import { HPFurtherEngagement } from "./Further Engagement/FurtherEngagement";
import { HPSupplement } from "./Further Engagement/SupMaterial";
+import { useTabNavigation } from "../../utils/TabNavigation";
export function HumanPractices() {
- useNavigateTabs();
+ useTabNavigation();
openElement({buttonClass: "tabbutton", elementToOpen: "All", classToHide: "timelinecardtabs", });
diff --git a/src/contents/contribution.tsx b/src/contents/contribution.tsx
index 1af1e1682dd858c89af537db695ac07469546d86..7a1b5f3ddcbad2e9edeb893e988b996cf12f3c42 100644
--- a/src/contents/contribution.tsx
+++ b/src/contents/contribution.tsx
@@ -4,14 +4,14 @@ import BFHpdf, { GuidePDF } from "../components/Pdfs";
import { H2, H3, H4} from "../components/Headings";
import { OLDBFHStyleTabs } from "../components/Tabs";
import { BlockQuoteB } from "../components/Quotes";
-import { useNavigateTabs } from "../utils/navigation";
import { Certificate, PosterRow } from "../components/poster";
import { Section } from "../components/sections";
import { useNavigation } from "../utils";
+import { useTabNavigation } from "../utils/TabNavigation";
export function Contribution() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<Section title="BFH European MeetUp" id="bfh">
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index 50725846ae527d120e2b08e611adf448aa718b30..f8a27b2f40009328878892cd7ec667353f1d12cc 100644
--- a/src/contents/description.tsx
+++ b/src/contents/description.tsx
@@ -9,14 +9,15 @@ import { Complex } from "../components/Svgs";
import { ButtonRowTabs } from "../components/Tabs";
import PieChart from "../components/Graph";
import PreCyse from "../components/precyse";
-import { useNavigateTabs } from "../utils/navigation";
+
import { Section, Subesction } from "../components/sections";
import { stringToSlug } from "../utils";
import { symptomdata, SymptomDatensatz } from "../data/symptom-data";
import { drugdata, DrugDatensatz } from "../data/drug-data";
+import { useTabNavigation } from "../utils/TabNavigation";
export function Description() {
- useNavigateTabs();
+ useTabNavigation();
return (
<div className="row mt-4">
<div className="col">
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index 01e17ae3f8bd132865a6b2d1a0f401af2e6aba99..de22f1c6c2be5dbcf6beb2690b5de8d70e88db7d 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -3,12 +3,12 @@ import { ButtonOneEngineering } from "../components/Buttons";
import { LoremShort } from "../components/Loremipsum";
import { openElement } from "../utils/openElement";
import { H3 } from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Engineering() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<div className="row mt-4">
diff --git a/src/contents/example.tsx b/src/contents/example.tsx
index 9a6037276508aff78b6fc9e6b948be10debf23c4..b88a3b64a4651d5236ca59955f3b0ddcb0c447d6 100644
--- a/src/contents/example.tsx
+++ b/src/contents/example.tsx
@@ -24,7 +24,7 @@ ChartJS.register(
);
export function Example() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<div className="container">
diff --git a/src/contents/experiments.tsx b/src/contents/experiments.tsx
index 05bb3f8943a09ee238adc20ad099ff92d38d9506..ea3880f5fe2c4223f9d2e73f564837a02c6e5a21 100644
--- a/src/contents/experiments.tsx
+++ b/src/contents/experiments.tsx
@@ -1,8 +1,8 @@
import { H2 } from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Experiments() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<H2 id="heading" text="Heading" ></H2>
diff --git a/src/contents/igem-bielefeld.tsx b/src/contents/igem-bielefeld.tsx
index ce2a81c1e5704b4002b6cb0d1943ed158a62a50c..f21f530379b801c365d2e7f8f84dd588a87f2772 100644
--- a/src/contents/igem-bielefeld.tsx
+++ b/src/contents/igem-bielefeld.tsx
@@ -1,7 +1,7 @@
-import { useNavigateTabs } from "../utils/navigation";
+
export function igemBielefeld() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<div className="row mt-4">
diff --git a/src/contents/impressum.tsx b/src/contents/impressum.tsx
index dcfe7f922a0c86af01374a92fdf78ff3e48c6134..ef1af8953913136d2f2e9c082229f02b95e3b840 100644
--- a/src/contents/impressum.tsx
+++ b/src/contents/impressum.tsx
@@ -1,8 +1,8 @@
import { H2 } from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Impressum() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<div className="row">
diff --git a/src/contents/judging.tsx b/src/contents/judging.tsx
index 65979d6414e4bf304f29b3c2209c18f49b38b991..471697b8caac29e69949632a6dbcf20c2346f7a6 100644
--- a/src/contents/judging.tsx
+++ b/src/contents/judging.tsx
@@ -1,7 +1,7 @@
import { H2 } from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Judging() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<H2 text="Overview" id="overview"/>
diff --git a/src/contents/methods.tsx b/src/contents/methods.tsx
index 389d255bfe6cfaba40a4363a41edf99cf8aec9ed..fc29ab357219ffafb97d8c4b233f93e1fddfc5f0 100644
--- a/src/contents/methods.tsx
+++ b/src/contents/methods.tsx
@@ -1,6 +1,6 @@
-import { useNavigateTabs } from "../utils/navigation";
+
export function Methods() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<div className="row">
diff --git a/src/contents/notebook.tsx b/src/contents/notebook.tsx
index a123cd9be597e807f38a2fd1eb3119e3fa3c7a23..2b33aa2ce2cc58a3f4a55199b8b756dfc30fe07e 100644
--- a/src/contents/notebook.tsx
+++ b/src/contents/notebook.tsx
@@ -1,8 +1,8 @@
import H1 from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Notebook() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<div className="row mt-4">
diff --git a/src/contents/partners.tsx b/src/contents/partners.tsx
index d2f0fbc512f5d664e2956cba86219d77bb22d5c4..f20473b12c23cb24c94883069f9c2a8611b0d2aa 100644
--- a/src/contents/partners.tsx
+++ b/src/contents/partners.tsx
@@ -1,8 +1,8 @@
import H1, { H2 } from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Partners() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<div id="sidebarbox" className="col-1 d-none d-lg-block"> </div>
diff --git a/src/contents/parts.tsx b/src/contents/parts.tsx
index 5878de1f6676da47f5a335cb503c66ac40d9cf63..cbab38ab481bb098495fc7b2712236aef51f6bec 100644
--- a/src/contents/parts.tsx
+++ b/src/contents/parts.tsx
@@ -1,8 +1,8 @@
import { LoremMedium } from "../components/Loremipsum";
import { Section, Subesction } from "../components/sections";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Parts() {
- useNavigateTabs();
+ useTabNavigation();
return (
<div className="col">
<Section title="Introduction" id="Introduction">
diff --git a/src/contents/project-documentation.tsx b/src/contents/project-documentation.tsx
index cfa32d5f974d95d4674b51956b8da9c6029136d5..c949bf749010e9e0faedc9c9bedeb87c40df95ca 100644
--- a/src/contents/project-documentation.tsx
+++ b/src/contents/project-documentation.tsx
@@ -1,7 +1,7 @@
-import { useNavigateTabs } from "../utils/navigation";
+
export function ProDesc() {
- useNavigateTabs();
+ useTabNavigation();
return (
<></>
);
diff --git a/src/contents/results.tsx b/src/contents/results.tsx
index 02f7553222cc487e259780ce3ac9076cc23aa662..afb88c60f1518d74f42ad9e5348486b674628c5b 100644
--- a/src/contents/results.tsx
+++ b/src/contents/results.tsx
@@ -1,8 +1,8 @@
import { H2 } from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Results() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
diff --git a/src/contents/safety.tsx b/src/contents/safety.tsx
index 94c8849a6104e4b02332e685648e8ad0808e0be8..7c6414cc8afe792fdc91d702b1215f696cc31ad7 100644
--- a/src/contents/safety.tsx
+++ b/src/contents/safety.tsx
@@ -1,10 +1,10 @@
import { LoremMedium } from "../components/Loremipsum";
import { Section, Subesction } from "../components/sections";
-import { useNavigateTabs } from "../utils/navigation";
+
export const Safety: React.FC = () =>{
- useNavigateTabs();
+ useTabNavigation();
return (
<>
diff --git a/src/contents/supplementary-material.tsx b/src/contents/supplementary-material.tsx
index 84303c3463b6102208708b45a218fbb9ce65929b..5d1db7b1d8f7519dd0d2ad8e75b7449c4e183e49 100644
--- a/src/contents/supplementary-material.tsx
+++ b/src/contents/supplementary-material.tsx
@@ -1,6 +1,6 @@
-import { useNavigateTabs } from "../utils/navigation";
+
export function Supplementary() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<div className="row">
diff --git a/src/contents/team.tsx b/src/contents/team.tsx
index b8bf75ad7c2207df164e5c44ff3ad1df1b211417..f656cff9c2121bfe2880c44540975c1b86c97eec 100644
--- a/src/contents/team.tsx
+++ b/src/contents/team.tsx
@@ -1,9 +1,10 @@
import { advisors, instructor, pis, SteckbriefInterface, teammembers } from "../data/steckbriefe";
import { H2 } from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
+import { useTabNavigation } from "../utils/TabNavigation";
+
export function Team() {
- useNavigateTabs();
+ useTabNavigation();
let teambriefe = createSteckbriefe(teammembers);
let advisorbriefe = createSteckbriefe(advisors);
let sinan = createSteckbriefe(instructor);
diff --git a/src/utils/TabNavigation.tsx b/src/utils/TabNavigation.tsx
index 23bb55047ae811160dfbd6e32ca09c0a4a8b034c..8c8cec689e2b18c6f2a5c0d77c747de24ce8d2f9 100644
--- a/src/utils/TabNavigation.tsx
+++ b/src/utils/TabNavigation.tsx
@@ -3,11 +3,14 @@ import { useNavigate, useLocation } from 'react-router-dom';
import { openFromOtherPage } from './openFromOtherpAge';
// Funktion, um den Haupttab zu öffnen
-export const openTab = (tabId: string) => {
- const tabs = document.querySelectorAll('.tabcontent');
- tabs.forEach((tab) => {
- (tab as HTMLElement).style.display = 'none';
- });
+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) {
@@ -16,10 +19,10 @@ export const openTab = (tabId: string) => {
};
// Funktion, um verschachtelte Tabs zu öffnen
-export const openNestedTab = (parentTabId: string, childTabId: string) => {
- openTab(parentTabId);
+export const openNestedTab = (parentTabId: string, childTabId: string, parentClass: string, childClass: string) => {
+ openTab(parentTabId, parentClass);
- const nestedTabs = document.querySelectorAll(`#${parentTabId} .nested-tabcontent`);
+ const nestedTabs = document.querySelectorAll(`#${parentTabId} ${childClass}`);
nestedTabs.forEach((tab) => {
(tab as HTMLElement).style.display = 'none';
});
@@ -66,17 +69,23 @@ export const useTabNavigation = () => {
};
useEffect(() => {
+ console.log("Use Effect")
const params = new URLSearchParams(location.search);
const tabId = params.get('tab');
const subTabId = params.get('subTab');
const collapseId = params.get('collapseId');
-
+
+
// Öffne Haupt- und ggf. verschachtelten Tab
if (tabId) {
+ let tab = document.getElementById(tabId);
+ let tabClass = tab!.className;
if (subTabId) {
- openNestedTab(tabId, subTabId);
+ let subTab = document.getElementById(subTabId);
+ let parentClass = (subTab as HTMLElement).classList[1];
+ openNestedTab(tabId, subTabId, parentClass, tabClass);
} else {
- openTab(tabId);
+ openTab(tabId, tabClass);
}
}
diff --git a/src/utils/navigation.ts b/src/utils/navigation.ts
index 5b7414b744ed908c81ef56e82c2b5e431079d051..b31d337b7f50989f5f864ce6221dc554fb845b69 100644
--- a/src/utils/navigation.ts
+++ b/src/utils/navigation.ts
@@ -1,4 +1,4 @@
-// navigation.ts
+/* // navigation.ts
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
@@ -41,3 +41,4 @@ export const useNavigateTabs = (): void => {
}
}, [location.search]);
};
+ */
\ No newline at end of file