all

src/components/Navbar.css

-.custom-navbar {
-    background-color: #f8f9fa;
-    box-shadow: 0 2px 4px rgba(0,0,0,.1);
+@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500&display=swap');
+
+.apple-navbar {
+  background-color: rgba(255, 255, 255, 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: 66px;
+  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 {
+  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;
   }
   
-  .navbar-img {
-    height: 40px;
-    width: auto;
+  .apple-nav .nav-link,
+  .apple-nav .dropdown-toggle {
+    padding: 10px 20px;
   }
-  
-  .custom-nav .nav-link {
-    color: #333;
-    font-weight: 500;
-    padding: 0.5rem 1rem;
-    transition: color 0.3s ease;
-  }
-  
-  .custom-nav .nav-link:hover {
-    color: #007bff;
-  }
-  
-  .custom-dropdown-menu {
-    background-color: #fff;
-    border: none;
-    box-shadow: 0 2px 4px rgba(0,0,0,.1);
-  }
-  
-  .custom-dropdown-menu .dropdown-item {
-    color: #333;
-    padding: 0.5rem 1rem;
-    transition: background-color 0.3s ease;
-  }
-  
-  .custom-dropdown-menu .dropdown-item:hover {
-    background-color: #f8f9fa;
-    color: #007bff;
-  }
\ No newline at end of file
+}
\ 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";
-
-
-// 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 (
-
-//     // 这部分是顶部展开navBar
-//     <BootstrapNavbar expand="lg" className="bg-body-tertiary" fixed="top">
-//       <Container>
-//         <BootstrapNavbar.Brand className="left-aligned">
-//           {/* {import.meta.env.VITE_TEAM_NAME} */}
-//           <img src="https://static.igem.wiki/teams/5378/lesser-panda/logo.webp" className="navbar-img" />
-//         </BootstrapNavbar.Brand>
-//         <BootstrapNavbar.Toggle aria-controls="basic-navbar-nav" />
-//         <BootstrapNavbar.Collapse id="basic-navbar-nav">
-//           <Nav className="custom-nav-item">{pages}</Nav>
-//         </BootstrapNavbar.Collapse>
-//       </Container>
-//     </BootstrapNavbar>
-
-
-//   );
-// }
-
-
-
 
 import Nav from "react-bootstrap/Nav";
 import BootstrapNavbar from "react-bootstrap/Navbar";
@@ -116,16 +47,16 @@ export function Navbar() {
   });
 
   return (
-    <BootstrapNavbar expand="lg" className="bg-body-tertiary custom-navbar" fixed="top">
-      <Container>
-        <BootstrapNavbar.Brand className="left-aligned">
-          <img src="https://static.igem.wiki/teams/5378/lesser-panda/logo.webp" className="navbar-img" alt="Logo" />
+    <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" />
+        <BootstrapNavbar.Toggle aria-controls="basic-navbar-nav" className="apple-toggler" />
         <BootstrapNavbar.Collapse id="basic-navbar-nav">
-          <Nav className="ms-auto custom-nav">{pages}</Nav>
+          <Nav className="ms-auto apple-nav">{pages}</Nav>
         </BootstrapNavbar.Collapse>
       </Container>
     </BootstrapNavbar>
   );
-}
+}
\ No newline at end of file