import { useEffect } from "react";
import { NewHighlight } from "../utils/Highlight-functions";
import { openThem } from "../utils/openThem";
export function EngSide(){
let nums = [ "cyc1", "cyc2", "cyc3", "cyc4", "pe1", "pe2", "pe3", "nik1", "nik2", "nik3", "nik4", "nik5", "nik6",
"peg1", "peg2", "peg3", "peg4", "peg5", "peg6", "del1", "del2", "del3"]
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)
NewHighlight({el: document.getElementById(item)!}, {subtitle: document.getElementById(subdi)!});
}
console.log("function HighlightCheck")
}
console.log(nums)
return(
<div className="col-2 d-none d-lg-block">
<br/>
<div className="sticky-top">
<nav className="sidebar">
<div>
<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>
<span id="our-cycle" className="sidesubtab" style={{display: "block"}}>
</span>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "proof-of-concept"})}>
<div className="detail-sideitem">
<div id="parent-proof-of-concept" className="sideitem">
<summary>Proof Of Concept</summary>
<span id="proof-of-concept" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a href="#cyc1">
<span id="subtitle0" className='sideitem'>Iteration 1</span>
</a></li>
<li><a href="#cyc2">
<span id="subtitle1" className='sideitem'>Iteration 2</span>
</a></li>
<li><a href="#cyc3">
<span id="subtitle2" className='sideitem'>Iteration 3</span>
</a></li>
<li><a href="#cyc4">
<span id="subtitle3" className='sideitem'>Iteration 4 </span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "pe-systems"})}>
<div className="detail-sideitem">
<div id="parent-pe-systems" className="sideitem">
<summary>PE Systems</summary>
<span id="pe-systems" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a href="#pe1">
<span id="subtitle4" className='sideitem'>Iteration 1</span>
</a></li>
<li><a href="#pe2">
<span id="subtitle5" className='sideitem'>Iteration 2</span>
</a></li>
<li><a href="#pe3">
<span id="subtitle6" className='sideitem'>Iteration 3</span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "nikase"})}>
<div className="detail-sideitem">
<div id="parent-nikase" className="sideitem">
<summary>Nikase</summary>
<span id="nikase" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a href="#nik1">
<span id="subtitle7" className='sideitem'>Iteration 1</span>
</a></li>
<li><a href="#nik2">
<span id="subtitle8" className='sideitem'>Iteration 2</span>
</a></li>
<li><a href="#nik3">
<span id="subtitle9" className='sideitem'>Iteration 3</span>
</a></li>
<li><a href="#nik4">
<span id="subtitle10" className='sideitem'>Iteration 4</span>
</a></li>
<li><a href="#nik5">
<span id="subtitle11" className='sideitem'>Iteration 5</span>
</a></li>
<li><a href="#nik6">
<span id="subtitle12" className='sideitem'>Iteration 6</span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "pegrna"})}>
<div className="detail-sideitem">
<div id="parent-pegrna" className="sideitem">
<summary>pegRNA</summary>
<span id="pegrna" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a href="#peg1">
<span id="subtitle13" className='sideitem'>Iteration 1</span>
</a></li>
<li><a href="#peg2">
<span id="subtitle14" className='sideitem'>Iteration 2</span>
</a></li>
<li><a href="#peg3">
<span id="subtitle15" className='sideitem'>Iteration 3</span>
</a></li>
<li><a href="#peg4">
<span id="subtitle16" className='sideitem'>Iteration 4</span>
</a></li>
<li><a href="#peg5">
<span id="subtitle17" className='sideitem'>Iteration 6</span>
</a></li>
<li><a href="#peg6">
<span id="subtitle18" className='sideitem'>Iteration 7</span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "delivery"})}>
<div className="detail-sideitem">
<div id="parent-delivery" className="sideitem">
<summary>Delivery</summary>
<span id="delivery" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a href="#del2">
<span id="subtitle19" className='sideitem'>Iteration 1</span>
</a></li>
<li><a href="#del2">
<span id="subtitle20" className='sideitem'>Iteration 2</span>
</a></li>
<li><a href="#del3">
<span id="subtitle21" className='sideitem'>Iteration 3</span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "references"})}>
<div className="detail-sideitem">
<div id="parent-references" className="sideitem">
<summary>References</summary>
<span id="references" className="sidesubtab" style={{display: "none"}}>
</span>
</div>
</div>
</a>
</div>
</nav>
<br/>
<div className="col" style={{display: "flex", alignItems: "right"}}>
<a href='#' className="backtotop">
Back to Top ↑
</a>
</div>
</div>
</div>
)
}
/* function SideItemEng({hesh, num}:{hesh: string; num: number}){
let subdi = "subtitle" + num
let openmore = stringToSlug(hesh)
console.log("openmore: " + openmore)
return(
<div>
<a onClick={openThem({it: openmore})}>
<div className="detail-sideitem">
<div id={subdi} className="sideitem">
<summary>{hesh}</summary>
<span id={openmore} className="sidesubtab" style={{display: "none"}}>
<ul>
<li>Other</li>
</ul>
</span>
</div>
</div>
</a>
</div>
)
}
*/