test the navbar

src/components/Navbar.css

@@ -86,111 +86,4 @@
   .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";
+import Pages from "../pages.ts";
 import { Container } from "react-bootstrap";
-import "./Navbar.css";
-// test
+import "./Navbar.css"; // 添加这行来引入自定义 CSS 文件的1
 
 export function Navbar() {
-  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)
-      );
+  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={
-            <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"
+          title={item.name}
+          id="basic-nav-dropdown"
+          className="custom-dropdown-menu"
         >
           {folderItems}
         </NavDropdown>
       );
-    } 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"
-        >
-          {content}
-        </NavDropdown.Item>
-      ) : (
-        <Nav.Link
-          key={`page-${pageIndex}`}
-          as={Link}
-          to={item.path}
-          className="custom-nav-link"
+    } else if ("path" in item && item.path) {
+      return (
+        <Nav.Link 
+        key={`page-${pageIndex}`} as={Link} to={item.path}
+        className="custom-dropdown-menu"
         >
-          {content}
+          {item.name}
         </Nav.Link>
       );
     }
-    return null;
-  };
-
-  const pages = Pages.map((item, index) => renderNavItem(item, index));
+  });
 
   return (
     <BootstrapNavbar expand="lg" className="apple-navbar" fixed="top">