ethS.tsx

import { useEffect } from "react";
import { Highlight, NewHighlight } from "../utils/Highlight-functions";

export function EthicsSidebar(){
    let numsBig = [""]
    let numsSub = [ "BS1", "BS2"]
    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
      }, []);
      const handleScroll = () => {
          for(let idx in numsSub){
            
              const item = numsSub[idx];
              let ind = numsSub.findIndex((e) => e == item)
              let subdi = "newsubtitle" + ind 

              console.log("We are looking at 'item' = " + numsSub[idx])
              console.log("ind is: " + ind)
              console.log("subdi is: " + subdi)
              console.log("we use " +  document.getElementById(item)?.id + " and " + document.getElementById(subdi)?.id)
              NewHighlight({el: document.getElementById(item)!}, {subtitle: document.getElementById(subdi)!});
          }    
          for(let idx in numsBig){
            
            const item = numsBig[idx];
            let ind = numsBig.findIndex((e) => e == item)
            let subdi = "subtitle" + ind 

            console.log("We are looking at 'item' = " + numsBig[idx])
            console.log("ind is: " + 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("function HighlightCheck")
      }
      console.log(numsSub)
    return(
        <div className="col-2 d-none d-lg-block">
            <div className="sticky-top">
                <nav className="sidebar">
                    <div> 
                        <a onClick={openThem({it: "our-cycle"})}>
                            <div className="detail-sideitem">
                                <div id="parent-our-cycle" className="sideitem">
                                    <summary>Our Cycle</summary>
                                    <span id="our-cycle" className="sidesubtab" style={{display: "none"}}>
                                        <ul>
                                            <a href="#"><li>Iteration 1</li></a>
                                            <a href="#"><li>Iteration 2</li></a>
                                            <a href="#"><li>Iteration 3</li></a>
                                        </ul>
                                    </span>
                                </div> 
                            </div>
                        </a>
                    </div> 
                </nav>
            </div>
        </div>
    )
}




function openThem({it}: {it: string}){
    const gotoandopen =  (_event : React.MouseEvent<HTMLElement, MouseEvent>) => {

      console.log("it classname: " + document.getElementById(it)?.className)
      console.log("it: " + it)
      let contenttabid = "tab-" + it; 
      let parent = "parent-" + it; 
      console.log("we want to open " + it + " and " + contenttabid)
      let sideitems = document.getElementsByClassName("sideitem"); 
      let subtabs = document.getElementsByClassName("sidesubtab");
      let contenttabs = document.getElementsByClassName("enginneeringtab");
      for (let i = 0; i < subtabs.length; i++) {
         (subtabs[i] as HTMLElement).style.display = "none";
         console.log("Hiding sidebar subtab...")
       }
       for (let i = 0; i < contenttabs.length; i++) {
        (contenttabs[i] as HTMLElement).style.display = "none";
        console.log("Hiding content tab...")
      }
      for (let i = 0; i < sideitems.length; i++) {
        (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
        console.log("Hiding sidebar subtab...")
      }
      
        document.getElementById(it)!.style.display = "block";
        document.getElementById(parent)!.classList.add("active-sideitem");
        document.getElementById(contenttabid)!.style.display = "block";
      
        
    }
    return gotoandopen; 
  }