diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx index d14906ab0b7adbf8ae987b565da87e2e08c3b503..01e17ae3f8bd132865a6b2d1a0f401af2e6aba99 100644 --- a/src/contents/engineering.tsx +++ b/src/contents/engineering.tsx @@ -1,46 +1,14 @@ import { ButtonOneEngineering } from "../components/Buttons"; import { LoremShort } from "../components/Loremipsum"; -import { useEffect } from "react"; -import { useLocation } from "react-router-dom"; import { openElement } from "../utils/openElement"; import { H3 } from "../components/Headings"; -import { openFromOtherPage } from "../utils/openFromOtherpAge"; -import { openNestedTab, openTab, handleScrollToCollapse } from "../utils/TabNavigation"; +import { useNavigateTabs } from "../utils/navigation"; export function Engineering() { - const location = useLocation(); - - useEffect(() => { - const params = new URLSearchParams(location.search); - const collapseId = params.get('collapseId'); - const tabId = params.get('tab'); - const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs - - // Open the tab specified by tabId (and subTab if nested) - if (tabId) { - if (subTabId) { - // If subTab is provided, open the nested tab - openNestedTab(tabId, subTabId); - } else { - // Otherwise, just open the main tab - openTab(tabId); - } - } - - // Scroll to the section specified by collapseId after opening the tab - if (collapseId) { - handleScrollToCollapse(collapseId); - } - - // Open the tab from another page - if (tabId) { - openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! }); - } - }, [location.search]); - + useNavigateTabs(); return ( <> <div className="row mt-4"> diff --git a/src/contents/safety.tsx b/src/contents/safety.tsx index 948a6a6b9d0c1eb1ffa2dd96f07eb361656bdfaa..acc561de746796aa52739819567eaaf464eb71ec 100644 --- a/src/contents/safety.tsx +++ b/src/contents/safety.tsx @@ -1,39 +1,10 @@ -import { useEffect } from "react"; -import { useLocation } from "react-router-dom"; -import { openFromOtherPage } from "../utils/openFromOtherpAge"; -import { openNestedTab, openTab, handleScrollToCollapse } from "../utils/TabNavigation"; + import { LoremMedium } from "../components/Loremipsum"; import { Section, Subesction } from "./sections"; -export function Safety() { - const location = useLocation(); +import { useNavigateTabs } from "../utils/navigation"; - useEffect(() => { - const params = new URLSearchParams(location.search); - const collapseId = params.get('collapseId'); - const tabId = params.get('tab'); - const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs - - // Open the tab specified by tabId (and subTab if nested) - if (tabId) { - if (subTabId) { - // If subTab is provided, open the nested tab - openNestedTab(tabId, subTabId); - } else { - // Otherwise, just open the main tab - openTab(tabId); - } - } - - // Scroll to the section specified by collapseId after opening the tab - if (collapseId) { - handleScrollToCollapse(collapseId); - } - - // Open the tab from another page - if (tabId) { - openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! }); - } - }, [location.search]); +export const Safety: React.FC = () =>{ + useNavigateTabs(); return ( <> diff --git a/src/utils/createSidebar.tsx b/src/utils/createSidebar.tsx index 39e21171222f5c105212a92558ec9cec02f84bba..80af7e9a9b963231a7b990e66f77a69efdb3676d 100644 --- a/src/utils/createSidebar.tsx +++ b/src/utils/createSidebar.tsx @@ -1,7 +1,6 @@ import { useEffect, useState } from "react"; import { ScrollLink } from "../components/ScrollLink"; import { Highlight, NewHighlight } from "./Highlight-functions"; -import { stringToSlug } from "./stringToSlug"; // Funktion zur Erstellung der Sidebar export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string> }>) { @@ -65,11 +64,6 @@ export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string> scrolling(tab) }; - const toggleTabAndScroll = (tab: string) => { - setOpenTab(openTab === tab ? null : tab); - // onsole.log(`Status of tab ${tab} is ${openTab}`) - - }; let subtitlenumber = 0; return ( <> @@ -154,7 +148,7 @@ export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string> tabs.forEach(tab => { numsBig.push(`${tab.tab}H`); // z.B. RoleH, ChecksH if (tab.subtabs) { - tab.subtabs.forEach((subtab, index) => { + tab.subtabs.forEach((index) => { numsSub.push(`${tab.tab}${index + 1}`); // z.B. Role1H, Role2H }); } @@ -164,30 +158,3 @@ export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string> } -/* function deriveTabsData(tabs: Array<{ tab: string; subtabs?: Array<string> }>) { - let numsBig: string[] = []; - let numsSub: string[] = []; - - tabs.forEach((tab) => { - let bigslugname = stringToSlug(tab.tab); - numsBig.push(bigslugname); - if (tab.subtabs) { - let subtabid = 0; - tab.subtabs.forEach((_index) => { - subtabid = subtabid +1; - // console.log(subtabid) - let tabname = `${tab.tab}${subtabid}`; - let slugname = stringToSlug(tabname); - numsSub.push(slugname); - }); - } - }); - - return { numsBig, numsSub }; - } - - - */ - - - \ No newline at end of file diff --git a/src/utils/navigation.ts b/src/utils/navigation.ts new file mode 100644 index 0000000000000000000000000000000000000000..792640720d37b8797264101bcbf922d0a6d0bfb7 --- /dev/null +++ b/src/utils/navigation.ts @@ -0,0 +1,33 @@ +// navigation.ts + +import { useEffect } from 'react'; +import { useLocation } from 'react-router-dom'; +import { handleScrollToCollapse, openNestedTab, openTab } from './TabNavigation'; +import { openFromOtherPage } from './openFromOtherpAge'; + +export const useNavigateTabs = (): void => { + const location = useLocation(); + + useEffect(() => { + const params = new URLSearchParams(location.search); + const collapseId = params.get('collapseId'); + const tabId = params.get('tab'); + const subTabId = params.get('subTab'); + + if (tabId) { + if (subTabId) { + openNestedTab(tabId, subTabId); + } else { + openTab(tabId); + } + } + + if (collapseId) { + handleScrollToCollapse(collapseId); + } + + if (tabId) { + openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! }); + } + }, [location.search]); +};