diff --git a/src/sidebars/engS.tsx b/src/sidebars/engS.tsx
index 7b96653acd1348406c5ccd42a628ab8d586c6dc2..ae3ff2fcaff282bb67c0788237f3aa47e25743d3 100644
--- a/src/sidebars/engS.tsx
+++ b/src/sidebars/engS.tsx
@@ -31,7 +31,7 @@ export function EngSide(){
<div className="sticky-top">
<nav className="sidebar" id="eng-sidebar">
<div>
- <a onClick={openThem({it: "our-cycle", scrollToId: "Our cycle"})}>
+ <a onClick={openThem({it: "our-cycle", scrollToId: "ourcycle"})}>
<div className="detail-sideitem">
<div id="parent-our-cycle" className="sideitem active-sideitem">
<summary>Our Cycle</summary>
diff --git a/src/utils/openThem.ts b/src/utils/openThem.ts
index fb00b7217bf915a239fab03f1323de12701128e1..b57d56973c6011cce0690544e8a54c7568f443ac 100644
--- a/src/utils/openThem.ts
+++ b/src/utils/openThem.ts
@@ -1,81 +1,102 @@
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);
-
- // Scrollen nach oben
- console.log("Scrolling to top...");
- window.scrollTo({ top: 0, 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}`);
+ 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' }); */
}
- for (let i = 0; i < contenttabs.length; i++) {
- (contenttabs[i] as HTMLElement).style.display = "none";
- console.log(`Hiding content tab: ${contenttabs[i].id}`);
+ };
+
+ 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',
+ });
}
- 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}`);
+}
+/* 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' });
}
-
- // 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 && document.getElementById(scrollToId)) {
- console.log(`Scrolling to ID: ${scrollToId}`);
- document.getElementById(scrollToId)!.scrollIntoView({ 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 scrollToId provided or ID not found: ${scrollToId}`);
+ console.log("No state found in popstate event.");
}
- }
-
- // 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 nach oben beim Zurücknavigieren
- console.log("Scrolling to top on popstate...");
- window.scrollTo({ top: 0, behavior: 'smooth' });
- } else {
- console.log("No state found in popstate event.");
- }
- });
- }
-
\ No newline at end of file
+ });
+}