test the image navbar

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 文件的1
+
+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

@@ -86,4 +86,111 @@
   .apple-nav .dropdown-toggle {
     padding: 10px 20px;
   }
+}@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500&display=swap');
+
+.apple-navbar {
+  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;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+}
+
+.nav-icon {
+  width: 24px;
+  height: 24px;
+  margin-bottom: 4px;
+}
+
+.nav-text {
+  font-size: 12px;
+  font-weight: 300;
+}
+
+.apple-nav .nav-link,
+.apple-nav .dropdown-toggle {
+  color: #000;
+  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: 14px;
+  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;
+  }
+  
+  .nav-item {
+    flex-direction: row;
+  }
+  
+  .nav-icon {
+    margin-right: 8px;
+    margin-bottom: 0;
+  }
+  
+  .nav-text {
+    font-size: 16px;
+  }
 }
\ No newline at end of file

src/components/Navbar.tsx

-
+import React from 'react';
 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 Pages from "../pages";
 import { Container } from "react-bootstrap";
-import "./Navbar.css"; // 添加这行来引入自定义 CSS 文件的1
+import "./Navbar.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>
-          );
-        }
-      });
+  const renderNavItem = (item: any, pageIndex: number, isSubItem: boolean = false) => {
+    if (item.folder) {
+      const folderItems = item.folder.map((subpage: any, subpageIndex: number) =>
+        renderNavItem(subpage, subpageIndex, true)
+      );
       return (
         <NavDropdown
           key={`page-${pageIndex}`}
-          title={item.name}
-          id="basic-nav-dropdown"
-          className="custom-dropdown-menu"
+          title={
+            <span className="nav-item">
+              <img src={`/icons/${item.name.toLowerCase()}.png`} alt={item.name} className="nav-icon" />
+              <span className="nav-text">{item.name}</span>
+            </span>
+          }
+          id={`dropdown-${item.name.toLowerCase()}`}
+          className="custom-dropdown"
         >
           {folderItems}
         </NavDropdown>
       );
-    } else if ("path" in item && item.path) {
-      return (
-        <Nav.Link 
-        key={`page-${pageIndex}`} as={Link} to={item.path}
-        className="custom-dropdown-menu"
+    } else if (item.path) {
+      const content = (
+        <span className="nav-item">
+          <img src={`/icons/${item.name.toLowerCase()}.png`} alt={item.name} className="nav-icon" />
+          <span className="nav-text">{item.name}</span>
+        </span>
+      );
+      
+      return isSubItem ? (
+        <NavDropdown.Item
+          key={`subpage-${pageIndex}`}
+          as={Link}
+          to={item.path}
+          className="custom-dropdown-item"
         >
-          {item.name}
+          {content}
+        </NavDropdown.Item>
+      ) : (
+        <Nav.Link
+          key={`page-${pageIndex}`}
+          as={Link}
+          to={item.path}
+          className="custom-nav-link"
+        >
+          {content}
         </Nav.Link>
       );
     }
-  });
+    return null;
+  };
+
+  const pages = Pages.map((item, index) => renderNavItem(item, index));
 
   return (
     <BootstrapNavbar expand="lg" className="apple-navbar" fixed="top">