diff --git a/src/sidebars/engS.tsx b/src/sidebars/engS.tsx
index 3e34a530ed4c840692ab2cb952ae1cf71201dc1f..1d174782f27b3af8967e3aeaa6962aa834863029 100644
--- a/src/sidebars/engS.tsx
+++ b/src/sidebars/engS.tsx
@@ -2,6 +2,7 @@ import { useEffect } from "react";
import { NewHighlight } from "../utils/Highlight-functions";
import { openThem } from "../utils/openThem";
import { BackUp } from "../components/Buttons";
+import { useNavigation } from "../utils";
export function EngSide(){
@@ -26,7 +27,7 @@ export function EngSide(){
}
console.log(nums)
-
+ const {goToPageWithTabAndScroll} = useNavigation();
return(
<div className="col-2 d-none d-lg-block" >
<br/>
@@ -51,23 +52,23 @@ export function EngSide(){
<summary>Proof Of Concept</summary>
<span id="proof-of-concept" className="sidesubtab" style={{display: "none"}}>
<ul>
- <li><a href="#cyc1">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc1"})}>
<span id="subtitle0" className='sideitem'>Iteration 1</span>
</a></li>
- <li><a href="#cyc2">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc2"})}>
<span id="subtitle1" className='sideitem'>Iteration 2</span>
</a></li>
- <li><a href="#cyc3">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc3"})}>
<span id="subtitle2" className='sideitem'>Iteration 3</span>
</a></li>
- <li><a href="#cyc4">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc4"})}>
<span id="subtitle3" className='sideitem'>Iteration 4 </span>
</a></li>
</ul>
</span>
</div>
</div>
- </a>
+ </a>
</div>
<div>
<a onClick={openThem({it: "pe-systems", scrollToId: "PE Systems"})}>
@@ -76,13 +77,13 @@ export function EngSide(){
<summary>PE Systems</summary>
<span id="pe-systems" className="sidesubtab" style={{display: "none"}}>
<ul>
- <li><a href="#pe1">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del1"})}>
<span id="subtitle4" className='sideitem'>Iteration 1</span>
</a></li>
- <li><a href="#pe2">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del2"})}>
<span id="subtitle5" className='sideitem'>Iteration 2</span>
</a></li>
- <li><a href="#pe3">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del3"})}>
<span id="subtitle6" className='sideitem'>Iteration 3</span>
</a></li>
</ul>
@@ -98,22 +99,22 @@ export function EngSide(){
<summary>Nikase</summary>
<span id="nikase" className="sidesubtab" style={{display: "none"}}>
<ul>
- <li><a href="#nik1">
+ <li ><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik1"})}>
<span id="subtitle7" className='sideitem'>Iteration 1</span>
</a></li>
- <li><a href="#nik2">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik2"})}>
<span id="subtitle8" className='sideitem'>Iteration 2</span>
</a></li>
- <li><a href="#nik3">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik3"})}>
<span id="subtitle9" className='sideitem'>Iteration 3</span>
</a></li>
- <li><a href="#nik4">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik4"})}>
<span id="subtitle10" className='sideitem'>Iteration 4</span>
</a></li>
- <li><a href="#nik5">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik5"})}>
<span id="subtitle11" className='sideitem'>Iteration 5</span>
</a></li>
- <li><a href="#nik6">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik6"})}>
<span id="subtitle12" className='sideitem'>Iteration 6</span>
</a></li>
</ul>
@@ -129,22 +130,22 @@ export function EngSide(){
<summary>pegRNA</summary>
<span id="pegrna" className="sidesubtab" style={{display: "none"}}>
<ul>
- <li><a href="#peg1">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg1"})}>
<span id="subtitle13" className='sideitem'>Iteration 1</span>
</a></li>
- <li><a href="#peg2">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg2"})}>
<span id="subtitle14" className='sideitem'>Iteration 2</span>
</a></li>
- <li><a href="#peg3">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg3"})}>
<span id="subtitle15" className='sideitem'>Iteration 3</span>
</a></li>
- <li><a href="#peg4">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg4"})}>
<span id="subtitle16" className='sideitem'>Iteration 4</span>
</a></li>
- <li><a href="#peg5">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg5"})}>
<span id="subtitle17" className='sideitem'>Iteration 6</span>
</a></li>
- <li><a href="#peg6">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg6"})}>
<span id="subtitle18" className='sideitem'>Iteration 7</span>
</a></li>
</ul>
@@ -160,13 +161,13 @@ export function EngSide(){
<summary>Delivery</summary>
<span id="delivery" className="sidesubtab" style={{display: "none"}}>
<ul>
- <li><a href="#del2">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del1"})}>
<span id="subtitle19" className='sideitem'>Iteration 1</span>
</a></li>
- <li><a href="#del2">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del2"})}>
<span id="subtitle20" className='sideitem'>Iteration 2</span>
</a></li>
- <li><a href="#del3">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del3"})}>
<span id="subtitle21" className='sideitem'>Iteration 3</span>
</a></li>
</ul>