diff --git a/src/components/Navbar copy.css b/src/components/Navbar copy.css
deleted file mode 100644
index f8689bf184060e2a787649d48896a482204e4a6c..0000000000000000000000000000000000000000
--- a/src/components/Navbar copy.css
+++ /dev/null
@@ -1,89 +0,0 @@
-@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
deleted file mode 100644
index 6ffa8b2730767691ba033aad55bc2c591bfc6287..0000000000000000000000000000000000000000
--- a/src/components/Navbar copy.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-
-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 52780e6f926fb2ec48d2b79be71c0a8d6c5980b8..6ffa8b2730767691ba033aad55bc2c591bfc6287 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,42 +1,17 @@
+
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>
);
}