Skip to content
Snippets Groups Projects
Commit 0999ead1 authored by Xingan Zhao's avatar Xingan Zhao
Browse files

side-navbar

parent 3c7783db
No related branches found
No related tags found
No related merge requests found
Pipeline #416292 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
src/containers/App/App.css
+ 28
− 0
View file @ 0999ead1
......@@ -170,6 +170,8 @@ footer a:hover {
/* wet-lab,dry-lab用的内容框框 */
.rounded-border {
margin: 50px;
padding: 50px;
border: 2px solid #f7a901; /* 设置边框的宽度和颜色 */
border-radius: 10px; /* 设置圆角半径 */
margin-bottom: 100px;
......@@ -185,3 +187,29 @@ footer a:hover {
.indent {
text-indent: 20px; /* 设置首行缩进 20px */
}
.side-navbar {
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 30%;
background-color: rgb(245, 245, 220);
padding: 20px;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
margin-top: 300px;
margin-left: 20px;
}
.side-navbar .nav-link {
margin-bottom: 10px;
font-weight: bold;
}
.side-navbar .nav-link.active {
background-color: rgb(172, 172, 108);
}
.side-navbar .nav-link.notActive {
background-color: rgb(245, 245, 220);
}
src/containers/App/App.tsx
+ 3
− 0
View file @ 0999ead1
......@@ -17,10 +17,13 @@ const App = () => {
const title =
currentPath in pathMapping ? pathMapping[currentPath].title : "Not Found";
useEffect(() => {
document.title = `${title || ""} | ${import.meta.env.VITE_TEAM_NAME} - iGEM ${import.meta.env.VITE_TEAM_YEAR}`;
}, [title]);
return (
<>
{/* Navigation */}
......
src/contents/description.tsx
+ 70
− 17
View file @ 0999ead1
import { Nav } from 'react-bootstrap';
import { Link,Element } from 'react-scroll';
import React,{useEffect,useState} from 'react';
interface SideNavbarProps {
activeLink: string;
}
export function Description() {
// sidenavbar begin
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.Link as={Link} to="section3" smooth={true} duration={500} className={activeLink === 'section3' ? 'active' : 'notActive'}>Section 3</Nav.Link>
{/* 添加更多导航链接 */}
</Nav>
</div>
);
};
// sidenavbar end
export function Description() {
const [activeLink, setActiveLink] = useState<string>('');
// sidenavbar begin
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="row mt-4">
<div className="col-3 rounded-border"></div>
<div className="row mt-4 bg-rice_yellow">
<div className="col-3">
<SideNavbar activeLink={activeLink} />
</div>
<div className="col-8">
<div className="rounded-border">
<h4 className="center-text" id="section1">Section 1</h4>
<img
src="https://inews.gtimg.com/om_bt/Oyv56nUaV015iJ8TqWik8ZUbAkYJDeULXqoSqcq4OS-zYAA/641"
alt="jojo"
<Element name="section1" className="element rounded-border" id='section1'>
<h2>Section 1</h2>
<p>Content for section 1.</p>
<img
src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp"
alt="example"
className="responsive-img"
/>
</div>
</Element>
<div className="rounded-border" id="section2">
<h4 className="center-text">Section 2</h4>
<img
src="https://ww3.sinaimg.cn/mw690/008awllvgy1hp23n0x2ocj30gs0go79b.jpg"
alt="jojo"
<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"
/>
</div>
</Element>
<div className="rounded-border" id="section3">
<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>
</div>
</div>
<div className="col-1"></div>
......
yarn.lock
+ 21
− 1
View file @ 0999ead1
......@@ -623,6 +623,13 @@
dependencies:
"@types/react" "*"
"@types/react-scroll@^1.8.10":
version "1.8.10"
resolved "https://registry.yarnpkg.com/@types/react-scroll/-/react-scroll-1.8.10.tgz#585a5c4bd0654434f3e55a08e94ed2e048bae7c7"
integrity sha512-RD4Z7grbdNGOKwKnUBKar6zNxqaW3n8m9QSrfvljW+gmkj1GArb8AFBomVr6xMOgHPD3v1uV3BrIf01py57daQ==
dependencies:
"@types/react" "*"
"@types/react-transition-group@^4.4.6":
version "4.4.10"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
......@@ -1387,6 +1394,11 @@ lodash.merge@^4.6.2:
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
lodash.throttle@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
......@@ -1557,7 +1569,7 @@ prop-types-extra@^1.1.0:
react-is "^16.3.2"
warning "^4.0.0"
prop-types@^15.6.2, prop-types@^15.8.1:
prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
......@@ -1632,6 +1644,14 @@ react-router@6.23.0:
dependencies:
"@remix-run/router" "1.16.0"
react-scroll@^1.9.0:
version "1.9.0"
resolved "https://registry.yarnpkg.com/react-scroll/-/react-scroll-1.9.0.tgz#2984006e184afd0e4018f837d127edf5fa8f152c"
integrity sha512-mamNcaX9Ng+JeSbBu97nWwRhYvL2oba+xR2GxvyXsbDeGP+gkYIKZ+aDMMj/n20TbV9SCWm/H7nyuNTSiXA6yA==
dependencies:
lodash.throttle "^4.1.1"
prop-types "^15.7.2"
react-transition-group@^4.4.5:
version "4.4.5"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment