all

package.json

@@ -17,6 +17,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0",
     "react-mathjax": "^1.0.1",
     "react-router-dom": "^6.23.0",
     "react-scroll": "^1.9.0"

src/components/Navbar copy.tsx

+
+import Nav from "react-bootstrap/Nav";
+import BootstrapNavbar from "react-bootstrap/Navbar";
+import NavDropdown from "react-bootstrap/NavDropdown";
+import { Link } from "react-router-dom";
+import Pages from "../pages.ts";
+import { Container } from "react-bootstrap";
+import "./Navbar.css"; // 添加这行来引入自定义 CSS 文件
+
+export function Navbar() {
+  const pages = Pages.map((item, pageIndex) => {
+    if ("folder" in item && item.folder) {
+      const folderItems = item.folder.map((subpage, subpageIndex) => {
+        if (subpage.path) {
+          return (
+            <NavDropdown.Item
+              key={`subpage-${pageIndex}-${subpageIndex}`}
+              as={Link}
+              to={subpage.path}
+              className="custom-dropdown-menu"
+            >
+              {subpage.name}
+            </NavDropdown.Item>
+          );
+        }
+      });
+      return (
+        <NavDropdown
+          key={`page-${pageIndex}`}
+          title={item.name}
+          id="basic-nav-dropdown"
+          className="custom-dropdown-menu"
+        >
+          {folderItems}
+        </NavDropdown>
+      );
+    } else if ("path" in item && item.path) {
+      return (
+        <Nav.Link 
+        key={`page-${pageIndex}`} as={Link} to={item.path}
+        className="custom-dropdown-menu"
+        >
+          {item.name}
+        </Nav.Link>
+      );
+    }
+  });
+
+  return (
+    <BootstrapNavbar expand="lg" className="apple-navbar" fixed="top">
+      <Container fluid>
+        <BootstrapNavbar.Brand as={Link} to="/" className="apple-brand">
+          <img src="https://static.igem.wiki/teams/5378/lesser-panda/logo.webp" className="apple-logo" alt="Logo" />
+        </BootstrapNavbar.Brand>
+        <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>
+  );
+}
\ No newline at end of file

src/components/Navbar.css

 @import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500&display=swap');
+.nav-icon {
+  margin-right: 8px;
+  font-size: 0.9em;
+  vertical-align: middle;
+}
+
 
 .apple-navbar {
   background-color: rgba(255, 255, 255, 0.8);
@@ -26,6 +32,8 @@
 
 .apple-nav .nav-link,
 .apple-nav .dropdown-toggle {
+  display: flex;
+  align-items: center;
   color: #000;
   font-size: 20px;
   font-weight: 300;
@@ -33,6 +41,7 @@
   transition: opacity 0.2s ease;
 }
 
+
 .apple-nav .nav-link:hover,
 .apple-nav .dropdown-toggle:hover {
   opacity: 0.65;

src/components/Navbar.tsx

-
+// 导入图标
 import Nav from "react-bootstrap/Nav";
 import BootstrapNavbar from "react-bootstrap/Navbar";
 import NavDropdown from "react-bootstrap/NavDropdown";
 import { Link } from "react-router-dom";
 import Pages from "../pages.ts";
 import { Container } from "react-bootstrap";
-import "./Navbar.css"; // 添加这行来引入自定义 CSS 文件
+import "./Navbar.css";
+// 导入更多图标
+import { 
+  FaHome, 
+  FaFolder, 
+  FaInfo, 
+  FaFlask, 
+  FaUsers, 
+  FaCog, 
+  FaBook, 
+  FaTrophy,
+  FaLightbulb,
+  FaChartBar
+} from "react-icons/fa";
+
+// 创建一个图标映射对象
+const iconMap = {
+  Home: FaHome,
+  About: FaInfo,
+  Team: FaUsers,
+  Project: FaFlask,
+  Parts: FaCog,
+  Lab: FaBook,
+  Human: FaUsers,
+  Model: FaChartBar,
+  Results: FaTrophy,
+  Implementation: FaLightbulb,
+  // 添加更多映射...
+};
 
 export function Navbar() {
   const pages = Pages.map((item, pageIndex) => {
     if ("folder" in item && item.folder) {
       const folderItems = item.folder.map((subpage, subpageIndex) => {
         if (subpage.path) {
+          const SubIcon = iconMap[subpage.name] || FaFolder;
           return (
             <NavDropdown.Item
               key={`subpage-${pageIndex}-${subpageIndex}`}
@@ -19,7 +48,7 @@ export function Navbar() {
               to={subpage.path}
               className="custom-dropdown-menu"
             >
-              {subpage.name}
+              <SubIcon className="nav-icon" /> {subpage.name}
             </NavDropdown.Item>
           );
         }
@@ -27,7 +56,11 @@ export function Navbar() {
       return (
         <NavDropdown
           key={`page-${pageIndex}`}
-          title={item.name}
+          title={
+            <>
+              <FaFolder className="nav-icon" /> {item.name}
+            </>
+          }
           id="basic-nav-dropdown"
           className="custom-dropdown-menu"
         >
@@ -35,28 +68,33 @@ export function Navbar() {
         </NavDropdown>
       );
     } else if ("path" in item && item.path) {
+      const Icon = iconMap[item.name] || FaFolder;
       return (
         <Nav.Link 
-        key={`page-${pageIndex}`} as={Link} to={item.path}
-        className="custom-dropdown-menu"
+          key={`page-${pageIndex}`}
+          as={Link}
+          to={item.path}
+          className="custom-dropdown-menu"
         >
-          {item.name}
+          <Icon className="nav-icon" /> {item.name}
         </Nav.Link>
       );
     }
   });
 
-  return (
-    <BootstrapNavbar expand="lg" className="apple-navbar" fixed="top">
-      <Container fluid>
-        <BootstrapNavbar.Brand as={Link} to="/" className="apple-brand">
-          <img src="https://static.igem.wiki/teams/5378/lesser-panda/logo.webp" className="apple-logo" alt="Logo" />
-        </BootstrapNavbar.Brand>
-        <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>
-  );
+
+
+return (
+  <BootstrapNavbar expand="lg" className="apple-navbar" fixed="top">
+    <Container fluid>
+      <BootstrapNavbar.Brand as={Link} to="/" className="apple-brand">
+        <img src="https://static.igem.wiki/teams/5378/lesser-panda/logo.webp" className="apple-logo" alt="Logo" />
+      </BootstrapNavbar.Brand>
+      <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>
+);
 }
\ No newline at end of file