test

src/components/Navbar copy.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: 1em;
-  vertical-align: middle;
-}
-
-
-.apple-navbar {
-  /* background-color: rgba(255, 255, 255, 0.8); */
-  background-color: rgba(245, 245, 220,0.8);
-  backdrop-filter: saturate(180%) blur(20px);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 0;
-  display: flex;
-  justify-content: center;
-}
-
-.apple-brand {
-  padding: 0 20px;
-  margin-right: auto;
-}
-
-.apple-logo {
-  height: 68px;
-  width: auto;
-}
-
-.apple-nav {
-  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  margin-right: auto;
-}
-
-.apple-nav .nav-link,
-.apple-nav .dropdown-toggle {
-  display: flex;
-  align-items: center;
-  color: #000;
-  font-size: 20px;
-  font-weight: 300;
-  padding: 12px 20px;
-  transition: opacity 0.2s ease;
-}
-
-
-.apple-nav .nav-link:hover,
-.apple-nav .dropdown-toggle:hover {
-  opacity: 0.65;
-}
-
-.apple-nav .dropdown-menu {
-  background-color: rgba(255, 255, 255, 0.8);
-  backdrop-filter: saturate(180%) blur(20px);
-  border: none;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
-
-.apple-nav .dropdown-item {
-  color: #000;
-  font-size: 18px;
-  font-weight: 300;
-  padding: 10px 20px;
-}
-
-.apple-nav .dropdown-item:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-
-.apple-toggler {
-  border: none;
-  padding: 0 20px;
-}
-
-.apple-toggler:focus {
-  box-shadow: none;
-}
-
-@media (max-width: 991px) {
-  .apple-navbar {
-    padding: 10px 0;
-    justify-content: flex-start;
-  }
-  
-  .apple-nav .nav-link,
-  .apple-nav .dropdown-toggle {
-    padding: 10px 20px;
-  }
-}
\ No newline at end of file

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.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";
-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,
-};
+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) {
-          const SubIcon = iconMap[subpage.name] || FaFolder;
           return (
             <NavDropdown.Item
               key={`subpage-${pageIndex}-${subpageIndex}`}
@@ -44,7 +19,7 @@ export function Navbar() {
               to={subpage.path}
               className="custom-dropdown-menu"
             >
-              <SubIcon className="nav-icon" /> {subpage.name}
+              {subpage.name}
             </NavDropdown.Item>
           );
         }
@@ -52,11 +27,7 @@ export function Navbar() {
       return (
         <NavDropdown
           key={`page-${pageIndex}`}
-          title={
-            <>
-              <FaFolder className="nav-icon" /> {item.name}
-            </>
-          }
+          title={item.name}
           id="basic-nav-dropdown"
           className="custom-dropdown-menu"
         >
@@ -64,15 +35,12 @@ 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"
         >
-          <Icon className="nav-icon" /> {item.name}
+          {item.name}
         </Nav.Link>
       );
     }