all

src/components/Navbar copy.tsx

+import  { useState, useEffect } from "react";
+import Nav from "react-bootstrap/Nav";
+import BootstrapNavbar from "react-bootstrap/Navbar";
+import NavDropdown from "react-bootstrap/NavDropdown";
+import { Link, useLocation } from "react-router-dom";
+import Pages from "../pages.ts";
+import { Container } from "react-bootstrap";
+import "./Navbar.css";
+
+export function Navbar() {
+  const [scrollProgress, setScrollProgress] = useState(0);
+  const location = useLocation();
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const totalScroll = document.documentElement.scrollHeight - window.innerHeight;
+      const currentScroll = window.pageYOffset;
+      const scrollPercentage = (currentScroll / totalScroll) * 100;
+      setScrollProgress(scrollPercentage);
+    };
+
+    if (location.pathname === "/") {
+      window.addEventListener("scroll", handleScroll);
+      handleScroll(); // 初始化进度
+    }
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [location]);
+  const pages = Pages.map((item, pageIndex) => {
+    if ("folder" in item && item.folder) {
+      const folderItems = item.folder.map((subpage, subpageIndex) => {
+        if (subpage.path) {
+          const SubpageIcon = subpage.icon; // 获取子页面图标
+          return (
+            <NavDropdown.Item
+              key={`subpage-${pageIndex}-${subpageIndex}`}
+              as={Link}
+              to={subpage.path}
+              className="custom-dropdown-menu"
+            >
+              {SubpageIcon && <SubpageIcon />} {subpage.name} {/* 添加图标 */}
+            </NavDropdown.Item>
+          );
+        }
+      });
+      const ItemIcon = item.icon; // 获取文件夹图标
+      return (
+        <NavDropdown
+          key={`page-${pageIndex}`}
+          title={<>{ItemIcon && <ItemIcon  />} {item.name}</>} // 添加图标
+          id="basic-nav-dropdown"
+          className="custom-dropdown-menu"
+        >
+          {folderItems}
+        </NavDropdown>
+      );
+    } else if ("path" in item && item.path) {
+      const ItemIcon = item.icon; // 获取页面图标
+      return (
+        <Nav.Link 
+        key={`page-${pageIndex}`} as={Link} to={item.path}
+        className="custom-dropdown-menu"
+        >
+          {ItemIcon && <ItemIcon />} {item.name} {/* 添加图标 */}
+        </Nav.Link>
+      );
+    }
+  });
+
+  return (
+
+  <>
+    <BootstrapNavbar expand="lg" className="apple-navbar" fixed="top">
+      <Container fluid>
+        <Link to="/" className="apple-brand">
+          <img src="https://static.igem.wiki/teams/5378/school-badge/liverbrainguardian.webp" className="apple-logo" alt="Logo" />
+        </Link>
+        <BootstrapNavbar.Toggle aria-controls="basic-navbar-nav" className="apple-toggler" />
+        <BootstrapNavbar.Collapse id="basic-navbar-nav">
+          <Nav className="ms-auto apple-nav">{pages}</Nav>
+        </BootstrapNavbar.Collapse>
+      </Container>
+    </BootstrapNavbar>
+    {location.pathname === "/" && (
+        <div 
+          className="scroll-progress-bar" 
+          style={{ width: `${scrollProgress}%` }}
+        ></div>
+      )}
+    </>
+  );
+}
\ No newline at end of file

src/components/Navbar.css

@@ -68,8 +68,8 @@
   position: fixed;
   top: 68px; /* 调整这个值以匹配你的导航栏高度 */
   left: 0;
-  height: 3px;
-  background-color: #007aff; /* 使用 Apple 风格的蓝色 */
+  height: 7px;
+  background-color: #d9534f; /* 使用 Apple 风格的蓝色 */
   z-index: 1000;
   transition: width 0.1s ease-out;
 }

src/components/Navbar.tsx

@@ -11,6 +11,8 @@ export function Navbar() {
   const [scrollProgress, setScrollProgress] = useState(0);
   const location = useLocation();
 
+
+
   useEffect(() => {
     const handleScroll = () => {
       const totalScroll = document.documentElement.scrollHeight - window.innerHeight;
@@ -19,10 +21,9 @@ export function Navbar() {
       setScrollProgress(scrollPercentage);
     };
 
-    if (location.pathname === "/") {
-      window.addEventListener("scroll", handleScroll);
-      handleScroll(); // 初始化进度
-    }
+    // Remove the condition for the home page
+    window.addEventListener("scroll", handleScroll);
+    handleScroll(); // Initialize progress
 
     return () => {
       window.removeEventListener("scroll", handleScroll);
@@ -83,12 +84,10 @@ export function Navbar() {
         </BootstrapNavbar.Collapse>
       </Container>
     </BootstrapNavbar>
-    {location.pathname === "/" && (
-        <div 
-          className="scroll-progress-bar" 
-          style={{ width: `${scrollProgress}%` }}
-        ></div>
-      )}
+    <div 
+        className="scroll-progress-bar" 
+        style={{ width: `${scrollProgress}%` }}
+      ></div>
     </>
   );
 }
\ No newline at end of file