descS.tsx

import { useEffect } from "react";
import { ScrollLink } from "../components/ScrollLink";
import { Highlight } from "../utils/Highlight-functions.ts";
import { openAndScroll, openAndCloseAndScroll } from "../utils/openAndScroll";

export function DescSidebar(){
    let nums = [ "del1"]
    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
      }, []);
      const handleScroll = () => {
          for(let idx in nums){
            /* console.log("We are looking at 'item' = " + nums[idx]) */
              const item = nums[idx];
              let ind = nums.findIndex((e) => e == item)
             /*  console.log("ind is: " + ind) */
              let subdi = "subtitle" + ind 
              /* console.log("subdi is: " + subdi)
              console.log("we use " +  document.getElementById(item)?.id + " and " + document.getElementById(subdi)?.id) */
              Highlight({el: document.getElementById(item)!}, {subtitle: document.getElementById(subdi)!});
          }       
          /*     */
      }
      /* console.log(nums) */


    return(
        <div className="col-2 d-none d-lg-block">
            <br/>
            <div className="sticky-top">
            <nav className="sidebar">
            <div> 
                <a onClick={openAndCloseAndScroll({ it: "tab-Abstract", scrollTarget: "Abstract", close: ["Cystic-Fibrosis"] })}>
                    <div className="detail-sideitem">
                        <div id="parent-Abstract" className="sideitem">
                            <summary>Abstract</summary>
                        </div>
                    </div>
                </a>
            </div>
                <div> 
                    {/* Fznktioniert:  <a onClick={openThem({it: "tab-Cystic-Fibrosis"})}  > */}
                        <div className="detail-sideitem">
                            <div id="parent-Cystic-Fibrosis" className="sideitem">
                              <a onClick={openAndScroll({ it: "tab-Cystic-Fibrosis", scrollTarget: "Cystic-Fibrosis" })}><summary>Cystic Fibrosis</summary></a> 
                                <span id="tab-Cystic-Fibrosis" className="sidesubtab" style={{display: "none"}}>
                                     <ul>
                                        <li><ScrollLink label="General" targetId="CF1"/></li>
                                        <li><ScrollLink label="CFTR" targetId="CF2"/></li>
                                        <li><ScrollLink label="ΔF508" targetId="CF3"/></li>
                                        <li><ScrollLink label="Symptoms" targetId="CF4"/></li>
                                        <li><ScrollLink label="Diagnosis" targetId="CF5"/></li>
                                        <li><ScrollLink label="Treatment" targetId="CF6"/></li>
                                    </ul>
                                </span>
                            </div> 
                        </div>
                </div> 
                <div> 
                    <a onClick={openAndCloseAndScroll({it: "tab-Our-motivation", scrollTarget: "Our-motivation", close: ["Cystic-Fibrosis"]})}>
                        <div className="detail-sideitem">
                            <div id="parent-pe-systems" className="sideitem">
                                <summary>Our Motivation</summary>
                            </div> 
                        </div>
                    </a>
                </div> 
                <div> 
                    <a onClick={openAndCloseAndScroll({it: "tab-Our-motivation", scrollTarget: "Approach", close: ["Cystic-Fibrosis"]})}>
                        <div className="detail-sideitem">
                            <div id="parent-nikase" className="sideitem">
                                <summary>Approach</summary>
                            </div> 
                        </div>
                    </a>
                </div> 
                <div> 
                    <a onClick={openAndCloseAndScroll({it: "tab-Our-motivation", scrollTarget: "Delivery", close: ["Cystic-Fibrosis"]})}>
                        <div className="detail-sideitem">
                            <div id="parent-delivery" className="sideitem">
                                <summary>Delivery</summary>
                            </div> 
                        </div>
                    </a>
                </div> {/*  */}
                <div> 
                    <a onClick={openAndCloseAndScroll({it: "tab-Our-motivation", scrollTarget: "Our-vision", close: ["Cystic-Fibrosis"]})}>
                        <div className="detail-sideitem">
                            <div id="parent-pegrna" className="sideitem">
                                <summary>Our vision</summary>
                            </div> 
                        </div>
                    </a>
                </div>   
                <div> 
                    <a onClick={openAndCloseAndScroll({it: "tab-Our-motivation", scrollTarget: "References", close: ["Cystic-Fibrosis"]})}>
                        <div className="detail-sideitem">
                            <div id="parent-references" className="sideitem">
                                <summary>References</summary>
                            </div> 
                        </div>
                    </a>
                </div>  
            </nav>   
        <br/>
        <div className="col" style={{display: "flex", alignItems: "right"}}>
            <a href='#' className="backtotop">
                Back to Top &#8593;
            </a>
        </div>  
            </div>
        </div>
        
    )
}