diff --git a/src/components/Navbar copy.css b/src/components/Navbar copy.css
new file mode 100644
index 0000000000000000000000000000000000000000..f8689bf184060e2a787649d48896a482204e4a6c
--- /dev/null
+++ b/src/components/Navbar copy.css
@@ -0,0 +1,89 @@
+@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
diff --git a/src/components/Navbar copy.tsx b/src/components/Navbar copy.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6ffa8b2730767691ba033aad55bc2c591bfc6287
--- /dev/null
+++ b/src/components/Navbar copy.tsx
@@ -0,0 +1,62 @@
+
+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
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 6ffa8b2730767691ba033aad55bc2c591bfc6287..b3dd8fbf9e6cf2abb7afa8513f8361137239f6ee 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,17 +1,46 @@
-
+// å¯¼å…¥å›¾æ ‡
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