diff --git a/src/contents/experiments copy.tsx b/src/contents/experiments copy.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b4b0661b49b5ad9a707b7a0eb83302ca89bfbd0b
--- /dev/null
+++ b/src/contents/experiments copy.tsx
@@ -0,0 +1,116 @@
+import { Nav } from 'react-bootstrap';
+import { Link,Element } from 'react-scroll';
+import React,{useEffect,useState} from 'react';
+
+// sidenavbar begin
+interface SideNavbarProps {
+ activeLink: string;
+}
+const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink }) => {
+ return (
+ <div className="side-navbar">
+ <Nav className="flex-column">
+ <Nav.Link as={Link} to="section1" smooth={true} duration={500} className={activeLink === 'section1' ? 'active' : 'notActive'}>Section 1</Nav.Link>
+ <Nav.Link as={Link} to="section2" smooth={true} duration={500} className={activeLink === 'section2' ? 'active' : 'notActive'}>Section 2</Nav.Link>
+
+
+ {/* æ·»åŠ æ›´å¤šå¯¼èˆªé“¾æŽ¥ */}
+ </Nav>
+ </div>
+ );
+};
+// sidenavbar end
+
+export function Experiments() {
+ // sidenavbar begin
+ const [activeLink, setActiveLink] = useState<string>('');
+ useEffect(() => {
+ const handleScroll = () => {
+ const sections = document.querySelectorAll('.element');
+ let currentSection = '';
+ sections.forEach(section => {
+ const sectionTop = section.getBoundingClientRect().top;
+ if (sectionTop <= window.innerHeight / 2 && sectionTop > -section.clientHeight) {
+ currentSection = section.id;
+ }
+ });
+ setActiveLink(currentSection);
+ };
+ window.addEventListener('scroll', handleScroll);
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
+ // sidenavbar end
+
+
+
+ return (
+ <>
+ <div className="custom-header-experiments">
+ <h1 className="centered-title">
+ <img
+ src="https://static.igem.wiki/teams/5378/header/experiment.png"
+ alt="safety header"
+ className="header-img"
+ />
+ <img
+ src="https://static.igem.wiki/teams/5378/header/header-bar.webp"
+ alt="safety header"
+ className="header-bar"
+ />
+ </h1>
+ </div>
+
+
+ <div className="row bg-rice_yellow">
+ <div className="col-2">
+ <SideNavbar activeLink={activeLink} />
+ </div>
+
+
+ <div className="col-10">
+
+
+ <Element name="section1" className="element rounded-border" id='section1'>
+ <h2>Section 1</h2>
+ <p>Content for section 1.</p>
+ </Element>
+
+ <div className="bd-callout bd-callout-info bg-gray">
+ <h1>What do we do to ...? See...</h1>
+ </div>
+
+
+ {/* <Element name="section2" className="element rounded-border" id='section2'>
+ <h2>Section 2</h2>
+ <p>Content for section 2.</p>
+ <img
+ src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp"
+ alt="example"
+ className="responsive-img"
+ />
+ </Element> */}
+
+
+ <Element name="section3" className="element rounded-border" id='section2'>
+ <h2>Section 2</h2>
+ <p>Content for section 2.</p>
+ <div className="rounded-border">
+ <h4 className="center-text">Section 2</h4>
+ <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+ <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+ </div>
+ </Element>
+
+
+
+
+
+ </div>
+ <div className="col-1"></div>
+
+
+
+ </div>
+ </>
+ );
+}
diff --git a/src/contents/experiments.tsx b/src/contents/experiments.tsx
index 7380947cfffc585ae9580534b1f06b496ecadeba..01b0bd7490e47e8476525973f3702693356831c1 100644
--- a/src/contents/experiments.tsx
+++ b/src/contents/experiments.tsx
@@ -1,26 +1,36 @@
import { Nav } from 'react-bootstrap';
-import { Link,Element } from 'react-scroll';
-import React,{useEffect,useState} from 'react';
+import { Link, Element } from 'react-scroll';
+import React, { useEffect, useState } from 'react';
// sidenavbar begin
interface SideNavbarProps {
activeLink: string;
+ onLinkClick: (section: string) => void;
}
-const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink }) => {
+const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink, onLinkClick }) => {
return (
<div className="side-navbar">
<Nav className="flex-column">
- <Nav.Link as={Link} to="section1" smooth={true} duration={500} className={activeLink === 'section1' ? 'active' : 'notActive'}>Section 1</Nav.Link>
- <Nav.Link as={Link} to="section2" smooth={true} duration={500} className={activeLink === 'section2' ? 'active' : 'notActive'}>Section 2</Nav.Link>
- <Nav.Link as={Link} to="section3" smooth={true} duration={500} className={activeLink === 'section3' ? 'active' : 'notActive'}>Section 3</Nav.Link>
- <Nav.Link as={Link} to="section4" smooth={true} duration={500} className={activeLink === 'section4' ? 'active' : 'notActive'}>Section 4</Nav.Link>
- <Nav.Link as={Link} to="section5" smooth={true} duration={500} className={activeLink === 'section5' ? 'active' : 'notActive'}>Section 5</Nav.Link>
- <Nav.Link as={Link} to="section6" smooth={true} duration={500} className={activeLink === 'section6' ? 'active' : 'notActive'}>Section 6</Nav.Link>
- <Nav.Link as={Link} to="section7" smooth={true} duration={500} className={activeLink === 'section7' ? 'active' : 'notActive'}>Section 7</Nav.Link>
- <Nav.Link as={Link} to="section8" smooth={true} duration={500} className={activeLink === 'section8' ? 'active' : 'notActive'}>Section 8</Nav.Link>
- <Nav.Link as={Link} to="section9" smooth={true} duration={500} className={activeLink === 'section9' ? 'active' : 'notActive'}>Section 9</Nav.Link>
- <Nav.Link as={Link} to="section10" smooth={true} duration={500} className={activeLink === 'section10' ? 'active' : 'notActive'}>Section 10</Nav.Link>
- <Nav.Link as={Link} to="section11" smooth={true} duration={500} className={activeLink === 'section11' ? 'active' : 'notActive'}>Section 11</Nav.Link>
+ <Nav.Link
+ as={Link}
+ to="section1"
+ smooth={true}
+ duration={500}
+ className={activeLink === 'section1' ? 'active' : 'notActive'}
+ onClick={() => onLinkClick('section1')}
+ >
+ Section 1
+ </Nav.Link>
+ <Nav.Link
+ as={Link}
+ to="section2"
+ smooth={true}
+ duration={500}
+ className={activeLink === 'section2' ? 'active' : 'notActive'}
+ onClick={() => onLinkClick('section2')}
+ >
+ Section 2
+ </Nav.Link>
{/* æ·»åŠ æ›´å¤šå¯¼èˆªé“¾æŽ¥ */}
</Nav>
</div>
@@ -30,174 +40,86 @@ const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink }) => {
export function Experiments() {
// sidenavbar begin
- const [activeLink, setActiveLink] = useState<string>('');
- useEffect(() => {
- const handleScroll = () => {
- const sections = document.querySelectorAll('.element');
- let currentSection = '';
- sections.forEach(section => {
- const sectionTop = section.getBoundingClientRect().top;
- if (sectionTop <= window.innerHeight / 2 && sectionTop > -section.clientHeight) {
- currentSection = section.id;
- }
- });
- setActiveLink(currentSection);
- };
- window.addEventListener('scroll', handleScroll);
- return () => window.removeEventListener('scroll', handleScroll);
- }, []);
- // sidenavbar end
-
-
+ const [activeLink, setActiveLink] = useState<string>('section1');
+ const [visibleSection, setVisibleSection] = useState<string>('section1');
+
+ useEffect(() => {
+ const handleScroll = () => {
+ const sections = document.querySelectorAll('.element');
+ let currentSection = '';
+ sections.forEach(section => {
+ const sectionTop = section.getBoundingClientRect().top;
+ if (sectionTop <= window.innerHeight / 2 && sectionTop > -section.clientHeight) {
+ currentSection = section.id;
+ }
+ });
+ setActiveLink(currentSection);
+ };
+ window.addEventListener('scroll', handleScroll);
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
+ // sidenavbar end
+
+ const handleMouseEnter = (section: string) => {
+ setVisibleSection(section);
+ };
+
+ const handleLinkClick = (section: string) => {
+ setVisibleSection(section);
+ };
return (
<>
<div className="custom-header-experiments">
-<h1 className="centered-title">
- <img
- src="https://static.igem.wiki/teams/5378/header/experiment.png"
- alt="safety header"
- className="header-img"
- />
- <img
- src="https://static.igem.wiki/teams/5378/header/header-bar.webp"
- alt="safety header"
- className="header-bar"
- />
-</h1>
-</div>
- <div className="row bg-rice_yellow">
+ <h1 className="centered-title">
+ <img
+ src="https://static.igem.wiki/teams/5378/header/experiment.png"
+ alt="safety header"
+ className="header-img"
+ />
+ <img
+ src="https://static.igem.wiki/teams/5378/header/header-bar.webp"
+ alt="safety header"
+ className="header-bar"
+ />
+ </h1>
+ </div>
+
+ <div className="row bg-rice_yellow">
<div className="col-2">
- <SideNavbar activeLink={activeLink} />
+ <SideNavbar activeLink={activeLink} onLinkClick={handleLinkClick} />
</div>
<div className="col-10">
+ <Element
+ name="section1"
+ className="element rounded-border"
+ id='section1'
+ onMouseEnter={() => handleMouseEnter('section1')}
+ style={{ display: visibleSection === 'section1' ? 'block' : 'none' }}
+ >
+ <h2>Section 1</h2>
+ <p>Content for section 1.</p>
+ </Element>
-
- <Element name="section1" className="element rounded-border" id='section1'>
- <h2>Section 1</h2>
- <p>Content for section 1.</p>
-
- <iframe
- src="https://static.igem.wiki/teams/5378/pdf/example.pdf"
- style={{ width: '100%', height: '1000px' }}
- title="PDF Viewer"
- ></iframe>
- </Element>
-
- <div className="bd-callout bd-callout-info bg-gray">
- <h1>What do we do to ...? See...</h1>
- </div>
-
-
- <Element name="section2" className="element rounded-border" id='section2'>
- <h2>Section 2</h2>
- <p>Content for section 2.</p>
- <img
- src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp"
- alt="example"
- className="responsive-img"
- />
- </Element>
-
-
- <Element name="section3" className="element rounded-border" id='section3'>
- <h2>Section 3</h2>
- <p>Content for section 3.</p>
- <div className="rounded-border">
- <h4 className="center-text">Section 3</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
- <Element name="section4" className="element rounded-border" id='section4'>
- <h2>Section 4</h2>
- <p>Content for section 4.</p>
- <div className="rounded-border">
- <h4 className="center-text">我是大帅B</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
- <Element name="section5" className="element rounded-border" id='section5'>
- <h2>Section 5</h2>
- <p>Content for section 5.</p>
- <div className="rounded-border">
- <h4 className="center-text">我是大帅B</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
- <Element name="section6" className="element rounded-border" id='section6'>
- <h2>Section 6</h2>
- <p>Content for section 6.</p>
- <div className="rounded-border">
- <h4 className="center-text">我是大帅B</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
- <Element name="section7" className="element rounded-border" id='section7'>
- <h2>Section 7</h2>
- <p>Content for section 7.</p>
- <div className="rounded-border">
- <h4 className="center-text">我是大帅B</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
- <Element name="section8" className="element rounded-border" id='section8'>
- <h2>Section 8</h2>
- <p>Content for section 8.</p>
- <div className="rounded-border">
- <h4 className="center-text">我是大帅B</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
- <Element name="section9" className="element rounded-border" id='section9'>
- <h2>Section 9</h2>
- <p>Content for section 9.</p>
- <div className="rounded-border">
- <h4 className="center-text">我是大帅B</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
- <Element name="section10" className="element rounded-border" id='section10'>
- <h2>Section 10</h2>
- <p>Content for section 10.</p>
- <div className="rounded-border">
- <h4 className="center-text">我是大帅B</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
- <Element name="section11" className="element rounded-border" id='section11'>
- <h2>Section 11</h2>
- <p>Content for section 11.</p>
- <div className="rounded-border">
- <h4 className="center-text">我是大帅B</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
-
+ <Element
+ name="section2"
+ className="element rounded-border"
+ id='section2'
+ onMouseEnter={() => handleMouseEnter('section2')}
+ style={{ display: visibleSection === 'section2' ? 'block' : 'none' }}
+ >
+ <h2>Section 2</h2>
+ <p>Content for section 2.</p>
+ <div className="rounded-border">
+ <h4 className="center-text">Section 2</h4>
+ <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+ <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+ </div>
+ </Element>
</div>
<div className="col-1"></div>
-
-
-
</div>
</>
);
-}
+}
\ No newline at end of file