safety.tsx

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { openFromOtherPage } from "../utils/openFromOtherpAge";
import { H2 } from "../components/Headings";
import { openNestedTab, openTab, handleScrollToCollapse } from "../utils/TabNavigation";
export function Safety() {
    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]);
  
  return (
    <>
       <div className="col">
            <section id="RoleH" className="section">
                <div id="Role"><H2 text="Role in iGem"/></div>
            </section>
        </div>
        <div className="col">
            <section id="ChecksH" className="section">
                <div id="Check-Ins"><H2 text="Check-Ins"/></div>
            </section>
        </div>
        <div className="col">
            <section id="LabH" className="section">
                <div id="Our Lab"><H2 text="Our Lab"/></div>
            </section>
        </div>
        <div className="col">
            <section id="BiosafetyH" className="section">
                <div id="Biosafety"><H2 text="Biosafety"/></div>
                <section id="Biosafety1">
                  <div id="Biosafety1H"><h3>Mechanism</h3> </div>
                </section>
                <section id="Biosafety2">
                  <div id="Biosafety2H"><h3>Delivery</h3> </div>
                </section>
            </section>
        </div>
        <div className="col">
            <section id="BiosecurityH" className="section">
                <div id="Biosecurity"><H2 text="Biosecurity"/></div>
                <section id="Biosecurity1">
                  <div id="Biosecurity1H"><h3>Our Project</h3> </div>
                </section>
                <section id="Biosecurity2">
                  <div id="Biosecurity2H"><h3>Risk Assesment</h3> </div>
                </section>
                <section id="Biosecurity3">
                  <div id="Biosecurity3H"><h3>Managing Risks</h3> </div>
                </section>
            </section>
        </div>
        <div className="col">
            <section id="BioethicsH" className="section">
                <div id="Bioethics"><H2 text="Bioethics"/></div>
                <div id="BE1"><h3>Gene Therapy</h3> </div>
                <div id="BE2"><h3>Primary cells</h3> </div>
                <div id="BE3"><h3>Consent and Guidelines</h3> </div>
            </section>
        </div>
    </>
  );
}