Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • 2024/bielefeld-cebitec
  • l-sanfilippo/bielefeld-ce-bi-tec-temp
2 results
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 214 additions and 238 deletions
src/headers/ibie-h.tsx
View file @ 3fd292fd
export function IBIE() {
return (
<HeaderBox title="iGEM" title2="Bielefeld">
<HeaderBox title="iGEM" title2="Bielefeld" id="ibhead">
</HeaderBox>
);
......
src/headers/imp-h.tsx
View file @ 3fd292fd
export function IMPH() {
return (
<HeaderBox title="">
<HeaderBox title="" id="imphead">
</HeaderBox>
);
......
src/headers/ints-h.tsx deleted 100644 → 0
View file @ 935e4d5e
export function INTSH() {
return (
<HeaderBox title="Interviews">
</HeaderBox>
);
}
import HeaderBox from "../components/HeaderBox";
\ No newline at end of file
src/headers/judge-h.tsx
View file @ 3fd292fd
......@@ -4,7 +4,7 @@ export function JUDGEH() {
return (
<HeaderBox title="Judging">
<HeaderBox title="Judging" id="jughead">
</HeaderBox>
);
......
src/headers/meth-h.tsx
View file @ 3fd292fd
export function METHH() {
return (
<HeaderBox title="Materials" title2="& Methods">
<HeaderBox title="Materials" title2="& Methods" id="mmhead">
</HeaderBox>
);
......
src/headers/note-h.tsx
View file @ 3fd292fd
export function NOTEH() {
return (
<HeaderBox title="Notebook">
<HeaderBox title="Notebook" id="nothead">
</HeaderBox>
);
......
src/headers/part-h.tsx
View file @ 3fd292fd
export function PARTH() {
return (
<HeaderBox title="Parts">
<HeaderBox title="Parts" id="parhead">
</HeaderBox>
);
......
src/headers/prodesc-h.tsx
View file @ 3fd292fd
export function PRODESC() {
return (
<HeaderBox title="Project" title2="Documentation" >
<HeaderBox title="Project" title2="Documentation" id="dochead">
</HeaderBox>
);
......
src/headers/res-h.tsx
View file @ 3fd292fd
export function RESH() {
return (
<HeaderBox title="Results">
<HeaderBox title="Results" id="reshead">
</HeaderBox>
);
......
src/headers/safe-h.tsx
View file @ 3fd292fd
export function SAFEH() {
return (
<HeaderBox title="Biosafety">
<HeaderBox title="Biosafety" id="safehead">
</HeaderBox>
);
......
src/headers/spons-h.tsx
View file @ 3fd292fd
export function SPONH() {
return (
<HeaderBox title="Sponsors" title2="& Partners">
<HeaderBox title="Sponsors" title2="& Partners" id="sphead">
</HeaderBox>
);
......
src/headers/sup-h.tsx
View file @ 3fd292fd
export function SUPH() {
return (
<HeaderBox title="Supplementary" title2="Material">
<HeaderBox title="Supplementary" title2="Material" id="suphead">
</HeaderBox>
);
......
src/headers/team-h.tsx
View file @ 3fd292fd
export function TEAMH() {
return (
<HeaderBox title="Our Team">
<HeaderBox title="Our Team" id="teamhead">
</HeaderBox>
);
......
src/headers/wiki-h.tsx deleted 100644 → 0
View file @ 935e4d5e
export function WIKIH() {
return (
<HeaderBox title="Wiki Documentation">
</HeaderBox>
);
}
import HeaderBox from "../components/HeaderBox";
\ No newline at end of file
src/main.tsx
View file @ 3fd292fd
......@@ -2,12 +2,15 @@ import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App/App";
import { BrowserRouter } from "react-router-dom";
import { LoadingProvider } from "./utils/LoadingContext";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<LoadingProvider>
<BrowserRouter basename={import.meta.env.BASE_URL}>
<App />
</BrowserRouter>
</LoadingProvider>
</React.StrictMode>,
);
src/pages.ts
View file @ 3fd292fd
......@@ -2,11 +2,9 @@
Contribution,
Description,
Engineering,
Experiments,
Home,
Attributions,
HumanPractices,
Supplementary,
Parts,
Judging,
ProDesc,
......@@ -22,11 +20,12 @@
SafetySidebar
} from "./contents";
import { DescSidebar, NoSidebar, EngSide } from "./contents";
import { IBIE, JUDGEH, PRODESC, SUPH, PARTH, ENGH, HOMEH, HPH, SPONH, RESH, ATTH, CONTH, DESCH, EXPH, IMPH, NOTEH, SAFEH, TEAMH } from "./contents";
import { IBIE, JUDGEH, PRODESC, PARTH, ENGH, HOMEH, HPH, SPONH, RESH, ATTH, CONTH, DESCH, IMPH, NOTEH, SAFEH, TEAMH } from "./contents";
import { Methods } from "./contents/methods";
import { METHH } from "./headers/meth-h";
import { ConSidebar } from "./sidebars/conS";
import { iGemBielefeldSidebar } from "./sidebars/igbS";
import { JudSidebar } from "./sidebars/jugS";
import { MethSidebar } from "./sidebars/methS";
import { PartSidebar } from "./sidebars/prtS";
import { ResultSidebar } from "./sidebars/resS";
......@@ -99,14 +98,6 @@ const Pages: (Page | Folder)[] = [
header: HOMEH,
navlist: NoSidebar,
},
{
name: "Experiments",
title: "Experiments",
path: "/experiments",
component: Experiments,
header: EXPH,
navlist: NoSidebar,
},
{
name: "Human Practices",
title: "Human Practices",
......@@ -116,7 +107,14 @@ const Pages: (Page | Folder)[] = [
navlist: HpSidebar
},
{
name: "Home",
title: "Bielefeld CeBiTec",
path: "/home",
component: Home,
header: HOMEH,
navlist: NoSidebar
},
{
name: "Home",
title: "Bielefeld CeBiTec",
......@@ -155,11 +153,11 @@ const Pages: (Page | Folder)[] = [
path: "/judging",
component: Judging,
header: JUDGEH,
navlist: NoSidebar,
navlist: JudSidebar,
},
{
name: "Materials and Methods",
title: "Materials and Methods",
name: "Materials & Methods",
title: "Materials & Methods",
path: "/materials-methods",
component: Methods,
header: METHH,
......@@ -174,8 +172,8 @@ const Pages: (Page | Folder)[] = [
navlist: NoSidebar,
},
{
name: "Sponsors and Partners",
title: "Sponsors and Partners",
name: "Sponsors & Partners",
title: "Sponsors & Partners",
path: "/partners",
component: Partners,
header: SPONH,
......@@ -214,16 +212,8 @@ const Pages: (Page | Folder)[] = [
navlist: SafetySidebar,
},
{
name: "Supplementary Material",
title: "Supplementary",
path: "/supplement",
component: Supplementary,
header: SUPH,
navlist: NoSidebar,
},
{
name: "Rooster",
title: "Rooster",
name: "Roster",
title: "Roster",
path: "/team",
component: Team,
header: TEAMH,
......@@ -236,10 +226,7 @@ export const NavPages: (Page | PageRef | Folder)[] = [
{
name: "Home",
title: "Bielefeld CeBiTec",
path: "/",
component: Home,
header: HOMEH,
navlist: NoSidebar,
path: "/home?=scrollTo=lpbild",
},
{
name: "Highlights",
......@@ -252,22 +239,22 @@ export const NavPages: (Page | PageRef | Folder)[] = [
{
name: "Engineering",
title: "Engineering",
path: "/engineering"
path: "/engineering?tab=tab-our-cycle&scrollTo=ourcycle"
},
{
name: "Experiments",
title: "Experiments",
path: "/experiments?tab=heading"
name: "Materials & Methods",
title: "Materials & Methods",
path: "/materials-methods?scrollTo=introduction"
},
{
name: "Results",
title: "Results",
path: "/results?scrollTo=experimental-design"
path: "/results?scrollTo=abstract"
},
{
name: "Parts",
title: "Parts",
path: "/parts?scrollTo=Parts Collection2H"
path: "/parts?scrollTo=parts-collection"
},
{
name: "Judging",
......@@ -280,36 +267,24 @@ export const NavPages: (Page | PageRef | Folder)[] = [
name: "Team",
folder: [
{
name: "Rooster",
title: "Rooster",
name: "Roster",
title: "Roster",
path: "/team",
component: Team,
header: TEAMH,
navlist: NoSidebar,
},
{
name: "Attributions",
title: "Attributions",
path: "/attributions",
component: Attributions,
header: ATTH,
navlist: NoSidebar,
},
{
name: "Sponsors and Partners",
title: "Sponsors and Partners",
path: "/partners",
component: Partners,
header: SPONH,
navlist: NoSidebar,
name: "Sponsors & Partners",
title: "Sponsors & Partners",
path: "/partners?scrollTo=gold",
},
{
name: "iGEM Bielefeld",
title: "iGEM Bielefeld",
path: "/igem-bielefeld",
component: igemBielefeld,
header: IBIE,
navlist: iGemBielefeldSidebar,
path: "/igem-bielefeld?scrollTo=bielefeld-university",
},
],
},
......@@ -319,84 +294,47 @@ export const NavPages: (Page | PageRef | Folder)[] = [
{
name: "Description",
title: "Project Description",
path: "/description",
component: Description,
header: DESCH,
navlist: DescSidebar
path: "/description?scrollTo=Abstract",
},
{
name: "Engineering",
title: "Engineering",
path: "/engineering",
component: Engineering,
header: ENGH,
navlist: EngSide ,
path: "/engineering?tab=tab-our-cycle&scrollTo=ourcycle",
},
{
name: "Biosafety",
title: "Biosafety",
path: "/safety",
component: Safety,
header: SAFEH,
navlist: SafetySidebar,
path: "/safety?scrollTo=role-in-igem",
},
{
name: "Project Documentation",
title: "Project Documentation",
path: "/project-documentation",
component: ProDesc,
header: PRODESC,
navlist: NoSidebar
},
{
name: "Supplementary Material",
title: "Supplementary",
path: "/supplement",
component: Supplementary,
header: SUPH,
navlist: NoSidebar,
},
path: "/project-documentation?scrollTo=our-meeting-protocols",
}
],
},
{
name: "Lab",
folder: [
{
name: "Experiments",
title: "Experiments",
path: "/experiments",
component: Experiments,
header: EXPH,
navlist: NoSidebar,
},
{
name: "Materials and Methods",
title: "Materials and Methods",
path: "/materials-methods",
component: Methods,
header: METHH,
navlist: MethSidebar,
name: "Materials & Methods",
title: "Materials & Methods",
path: "/materials-methods?scrollTo=introduction",
},
{
name: "Results",
title: "Results",
path: "/results",
component: Results,
header: RESH,
navlist: ResultSidebar,
path: "/results?scrollTo=abstract",
},
{
name: "Parts",
title: "Parts",
path: "/parts",
path: "/parts?scrollTo=Description1H",
},
{
name: "Notebook",
title: "Notebook",
path: "/notebook",
component: Notebook,
header: NOTEH,
navlist: NoSidebar,
path: "/notebook?scrollTo=notebookH",
},
]
},
......@@ -411,24 +349,21 @@ export const NavPages: (Page | PageRef | Folder)[] = [
{
name: "Integrated Human Practices",
title: "Integrated Human Practices",
path: "/human-practices",
component: HumanPractices,
header: HPH,
navlist: HpSidebar
path: "/human-practices?scrollTo=overview-stakeholders",
},
{
name: "Feedback and Implementation",
title: "Feedback and Implementation",
path: "/human-practices?scrollTo=Integrated Human Practices3"
name: "Feedback & Implementation",
title: "Feedback & Implementation",
path: "/human-practices?scrollTo=Integrated Human Practices2"
},
{
name: "Education",
title: "Education and Outreach",
title: "Education & Outreach",
path: "/human-practices?scrollTo=Further Engagement1H"
},
{
name: "Public Engagement",
title: "Education and Outreach",
title: "Education & Outreach",
path: "/human-practices?scrollTo=Further Engagement2H"
},
{
......@@ -452,20 +387,25 @@ export const NavPages: (Page | PageRef | Folder)[] = [
path: "/judging?scrollTo=Overview",
},
{
name: "Best New Part",
name: "Best Integrated Human Practice",
title: "Judging",
path: "/judging?scrollTo=Best New Part",
path: "/judging?scrollTo=best-integrated-human-practice",
},
{
name: "Safety & Security",
title: "Judging",
path: "/judging?scrollTo=Safety and Security",
path: "/judging?scrollTo=safety-security",
},
{
name: "Best Integrated Human Practice",
name: "Best New Basic Part",
title: "Judging",
path: "/judging?scrollTo=Best Integrated Human Practice",
},
path: "/judging?scrollTo=best-new-basic-part",
},
{
name: "Judging Session",
title: "Judging",
path: "/judging?scrollTo=judging-session",
},
]
},
{
......@@ -474,16 +414,23 @@ export const NavPages: (Page | PageRef | Folder)[] = [
{
name: "Contribution",
title: "Contribution",
path: "/contribution",
component: Contribution,
header: CONTH,
navlist: ConSidebar,
path: "/contribution?scrollTo=abstract",
},
{
name: "BFH European MeetUp",
title: "MeetUp",
path: "contribution/?scrollTo=BFH European MeetUp"
}
path: "contribution/?scrollTo=bfh-european-meetup"
},
{
name: "Our Contributions",
title: "Our Contributions",
path: "contribution/?scrollTo=our-contributions"
},
{
name: "Collaborations",
title: "Collaborations",
path: "contribution/?scrollTo=our-collaborations"
},
]
},
];
......
src/sidebars/conS.tsx
View file @ 3fd292fd
......@@ -3,7 +3,7 @@ import { createSidebar } from "../utils/createSidebar";
export function ConSidebar(){
let sidebar = createSidebar(tabs);
return(
<div className="col-2 d-lg-block">
<div className="col-2 d-none d-lg-block">
{sidebar}
</div>
)
......@@ -11,8 +11,9 @@ export function ConSidebar(){
const tabs = [
{ tab: "BFH European MeetUp", subtabs: ["Aftervideo", "Timeline", "About", "Posters", "Guideline", "Gallery", "Downloads"]},
{tab: "Safety Guidelines"},
{tab: "Collaborations"},
{tab: "Wiki"}
{tab: "Abstract"},
{ tab: "BFH European MeetUp", subtabs: ["Aftervideo", "Timeline", "About", "Posters", "Gallery", "Downloads"]},
{tab: "Our Collaborations", subtabs: ["MeetUp Guideline", "LNP Handbook"]},
{tab: "Our Contributions", subtabs: ["Biosafety & Security", "Wiki Developement"]},
{tab: "Conclusion"}
];
src/sidebars/descS.tsx
View file @ 3fd292fd
......@@ -3,7 +3,7 @@ import { createSidebar } from "../utils/createSidebar";
export function DescSidebar(){
let sidebar = createSidebar(tabs);
return(
<div className="col-2 d-lg-block">
<div className="col-2 d-none d-lg-block">
{sidebar}
</div>
)
......
src/sidebars/engS.tsx
View file @ 3fd292fd
......@@ -6,12 +6,35 @@ import { useNavigation } from "../utils";
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"]
let nums = ["rep1", "rep2", "rep3", "rep4", "rep5", "rep6", "trf1", "trf2", "trf3", "trf4", "pe1", "pe2", "pe3", "peg1", "peg2", "peg3", "peg4", "peg5",
"nic1", "nic2", "nic3", "nic4", "nic5", "nic6","del1", "del2", "del3", "del4", "del5"]
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, [nums]);
// Restore active tab on reload
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const tabId = params.get("tab");
const subTabId = params.get("subTab");
if (tabId) {
// Find the parent element and mark it as active
const parentTab = document.querySelector(`#parent-${tabId}`);
if (parentTab) {
document.querySelectorAll(".active-sideitem").forEach((el) => el.classList.remove("active-sideitem"));
parentTab.classList.add("active-sideitem");
}
// Optionally expand the subtab if available
if (subTabId) {
const subTab = document.querySelector(`#${subTabId}`);
if (subTab) {
subTab.classList.add("highlight-subitem"); // Add a custom class for highlighting subtabs if needed
}
}
}
}, []);
const handleScroll = () => {
for(let idx in nums){
/* console.log("We are looking at 'item' = " + nums[idx]) */
......@@ -34,10 +57,10 @@ export function EngSide(){
<div className="sticky-top">
<nav className="sidebar" id="eng-sidebar">
<div>
<a onClick={openThem({it: "our-cycle", scrollToId: "ourcycle"})}>
<a onClick={openThem({it: "our-cycle", scrollToId: "our-cycle-header"})}>
<div className="detail-sideitem">
<div id="parent-our-cycle" className="sideitem active-sideitem">
<summary>Our Cycle</summary>
<summary>Our Cycles</summary>
<span id="our-cycle" className="sidesubtab" style={{display: "block"}}>
</span>
......@@ -46,76 +69,76 @@ export function EngSide(){
</a>
</div>
<div>
<a onClick={openThem({it: "proof-of-concept", scrollToId: "Proof of Concept"})}>
<a onClick={openThem({it: "reporter", scrollToId: "reporter-header"})}>
<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"}}>
<div id="parent-reporter" className="sideitem">
<summary>Reporter System</summary>
<span id="reporter" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc1"})}>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-reporter", scrollToId: "rep1head"})}>
<span id="subtitle0" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc2"})}>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-reporter", scrollToId: "rep2head"})}>
<span id="subtitle1" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc3"})}>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-reporter", scrollToId: "rep3head"})}>
<span id="subtitle2" className='sideitem'>Iteration 3</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc4"})}>
<span id="subtitle3" className='sideitem'>Iteration 4 </span>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-reporter", scrollToId: "rep4head"})}>
<span id="subtitle3" className='sideitem'>Iteration 4</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-reporter", scrollToId: "rep5head"})}>
<span id="subtitle4" className='sideitem'>Iteration 5</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-reporter", scrollToId: "rep6head"})}>
<span id="subtitle5" className='sideitem'>Outlook</span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</div>
</div>
<div>
<a onClick={openThem({it: "pe-systems", scrollToId: "PE Systems"})}>
<a onClick={openThem({it: "transfection", scrollToId: "transfection-header"})}>
<div className="detail-sideitem">
<div id="parent-pe-systems" className="sideitem">
<summary>PE Systems</summary>
<span id="pe-systems" className="sidesubtab" style={{display: "none"}}>
<div id="parent-transfection" className="sideitem">
<summary>Transfection</summary>
<span id="transfection" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del1"})}>
<span id="subtitle4" className='sideitem'>Iteration 1</span>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-transfection", scrollToId: "trf1head"})}>
<span id="subtitle6" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del2"})}>
<span id="subtitle5" className='sideitem'>Iteration 2</span>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-transfection", scrollToId: "trf2head"})}>
<span id="subtitle7" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del3"})}>
<span id="subtitle6" className='sideitem'>Iteration 3</span>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-transfection", scrollToId: "trf3head"})}>
<span id="subtitle8" className='sideitem'>Iteration 3</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-transfection", scrollToId: "trf4head"})}>
<span id="subtitle9" className='sideitem'>Iteration 4</span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</a>
</div>
<div>
<a onClick={openThem({it: "nikase", scrollToId: "Nikase"})}>
<a onClick={openThem({it: "pe-systems", scrollToId: "pe-systems-header"})}>
<div className="detail-sideitem">
<div id="parent-nikase" className="sideitem">
<summary>Nikase</summary>
<span id="nikase" className="sidesubtab" style={{display: "none"}}>
<div id="parent-pe-systems" className="sideitem">
<summary>PE Systems</summary>
<span id="pe-systems" className="sidesubtab" style={{display: "none"}}>
<ul>
<li ><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik1"})}>
<span id="subtitle7" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik2"})}>
<span id="subtitle8" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik3"})}>
<span id="subtitle9" className='sideitem'>Iteration 3</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik4"})}>
<span id="subtitle10" className='sideitem'>Iteration 4</span>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-pe-systems", scrollToId: "pe1head"})}>
<span id="subtitle10" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik5"})}>
<span id="subtitle11" className='sideitem'>Iteration 5</span>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-pe-systems", scrollToId: "pe2head"})}>
<span id="subtitle11" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik6"})}>
<span id="subtitle12" className='sideitem'>Iteration 6</span>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-pe-systems", scrollToId: "pe3head"})}>
<span id="subtitle12" className='sideitem'>Outlook</span>
</a></li>
</ul>
</span>
......@@ -124,29 +147,26 @@ export function EngSide(){
</a>
</div>
<div>
<a onClick={openThem({it: "pegrna", scrollToId: "pegRNA"})}>
<a onClick={openThem({it: "pegrna", scrollToId: "pegrna-header"})}>
<div className="detail-sideitem">
<div id="parent-pegrna" className="sideitem">
<summary>pegRNA</summary>
<span id="pegrna" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg1"})}>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-pegrna", scrollToId: "peg1head"})}>
<span id="subtitle13" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg2"})}>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-pegrna", scrollToId: "peg2head"})}>
<span id="subtitle14" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg3"})}>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-pegrna", scrollToId: "peg3head"})}>
<span id="subtitle15" className='sideitem'>Iteration 3</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg4"})}>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-pegrna", scrollToId: "peg4head"})}>
<span id="subtitle16" className='sideitem'>Iteration 4</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg5"})}>
<span id="subtitle17" className='sideitem'>Iteration 6</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg6"})}>
<span id="subtitle18" className='sideitem'>Iteration 7</span>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-pegrna", scrollToId: "peg5head"})}>
<span id="subtitle17" className='sideitem'>Iteration 5</span>
</a></li>
</ul>
</span>
......@@ -155,39 +175,64 @@ export function EngSide(){
</a>
</div>
<div>
<a onClick={openThem({it: "delivery", scrollToId: "Delivery"})}>
<a onClick={openThem({it: "nickase", scrollToId: "nickase-header"})}>
<div className="detail-sideitem">
<div id="parent-delivery" className="sideitem">
<summary>Delivery</summary>
<span id="delivery" className="sidesubtab" style={{display: "none"}}>
<div id="parent-nickase" className="sideitem">
<summary>Nickase</summary>
<span id="nickase" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del1"})}>
<span id="subtitle19" className='sideitem'>Iteration 1</span>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-nickase", scrollToId: "nic1head"})}>
<span id="subtitle18" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-nickase", scrollToId: "nic2head"})}>
<span id="subtitle19" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del2"})}>
<span id="subtitle20" className='sideitem'>Iteration 2</span>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-nickase", scrollToId: "nic3head"})}>
<span id="subtitle20" className='sideitem'>Iteration 3</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del3"})}>
<span id="subtitle21" className='sideitem'>Iteration 3</span>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-nickase", scrollToId: "nic4head"})}>
<span id="subtitle21" className='sideitem'>Iteration 4</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-nickase", scrollToId: "nic5head"})}>
<span id="subtitle22" className='sideitem'>Iteration 5</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-nickase", scrollToId: "nic6head"})}>
<span id="subtitle23" className='sideitem'>Iteration 6</span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</div>
</div>
<div>
<a onClick={openThem({it: "references", scrollToId: "References"})}>
<a onClick={openThem({it: "delivery", scrollToId: "delivery-header"})}>
<div className="detail-sideitem">
<div id="parent-references" className="sideitem">
<summary>References</summary>
<span id="references" className="sidesubtab" style={{display: "none"}}>
<div id="parent-delivery" className="sideitem">
<summary>Delivery</summary>
<span id="delivery" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-delivery", scrollToId: "del1head"})}>
<span id="subtitle24" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-delivery", scrollToId: "del2head"})}>
<span id="subtitle25" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-delivery", scrollToId: "del3head"})}>
<span id="subtitle26" className='sideitem'>Iteration 3</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-delivery", scrollToId: "del4head"})}>
<span id="subtitle27" className='sideitem'>Iteration 4</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-delivery", scrollToId: "del5head"})}>
<span id="subtitle28" className='sideitem'>Outlook</span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</div>
</div>
</nav>
<BackUp></BackUp>
</div>
......
src/sidebars/hpS.tsx
View file @ 3fd292fd
......@@ -5,7 +5,7 @@ import { createSidebar } from "../utils/createSidebar";
export function HpSidebar(){
let sidebar = createSidebar(tabs);
return(
<div className="col-2 d-lg-block">
<div className="col-2 d-none d-lg-block">
{sidebar}
</div>
)
......@@ -15,7 +15,7 @@ const tabs = [
{tab: "Abstract"},
{ tab: "Overview" },
{tab: "Introduction"},
{tab: "Integrated Human Practices", subtabs: ["Framework", "Timeline", "Implementation", "Feedback", "Conclusion"]},
{tab: "Integrated Human Practices", subtabs: ["Framework", "Timeline", "Feedback & Implementation", "Conclusion"]},
{tab: "Further Engagement", subtabs: [ "Education", "Public Engagement", "Entrepreneurship", "Collaborations", "Partnerships"]},
{tab: "Supplementary Material"},
// {tab: ""},
......