navbar,miami.jpg

src/components/Header.tsx

@@ -5,7 +5,7 @@ interface HeaderProps {
 
 export function Header({ title, lead }: HeaderProps) {
   return (
-    <header className="bg-hero py-5 mb-5">
+    <header className="bg-miami py-5 mb-5">
       <div className="container h-100">
         <div className="row h-100 align-items-center">
           <div className="col-lg-12">

src/components/Navbar.tsx

@@ -5,6 +5,7 @@ import NavDropdown from "react-bootstrap/NavDropdown";
 import { Link } from "react-router-dom";
 import Pages from "../pages.ts";
 
+
 export function Navbar() {
   const pages = Pages.map((item, pageIndex) => {
     if ("folder" in item && item.folder) {
@@ -15,6 +16,7 @@ export function Navbar() {
               key={`subpage-${pageIndex}-${subpageIndex}`}
               as={Link}
               to={subpage.path}
+              className="custom-dropdown-menu"
             >
               {subpage.name}
             </NavDropdown.Item>
@@ -26,13 +28,17 @@ export function Navbar() {
           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}>
+        <Nav.Link 
+        key={`page-${pageIndex}`} as={Link} to={item.path}
+        className="custom-dropdown-menu"
+        >
           {item.name}
         </Nav.Link>
       );
@@ -40,16 +46,61 @@ export function Navbar() {
   });
 
   return (
-    <BootstrapNavbar expand="lg" className="bg-body-tertiary" fixed="top">
-      <Container>
-        <BootstrapNavbar.Brand>
-          {import.meta.env.VITE_TEAM_NAME}
-        </BootstrapNavbar.Brand>
-        <BootstrapNavbar.Toggle aria-controls="basic-navbar-nav" />
-        <BootstrapNavbar.Collapse id="basic-navbar-nav">
-          <Nav className="left-aligned">{pages}</Nav>
-        </BootstrapNavbar.Collapse>
-      </Container>
-    </BootstrapNavbar>
+    // <BootstrapNavbar expand="lg" className="bg-body-tertiary" fixed="top">
+    //   <Container>
+    //     <BootstrapNavbar.Brand>
+    //       {import.meta.env.VITE_TEAM_NAME}
+    //     </BootstrapNavbar.Brand>
+    //     <BootstrapNavbar.Toggle aria-controls="basic-navbar-nav" />
+        // <BootstrapNavbar.Collapse id="basic-navbar-nav">
+        //   <Nav className="left-aligned">{pages}</Nav>
+        // </BootstrapNavbar.Collapse>
+    //   </Container>
+    // </BootstrapNavbar>
+    <nav className="navbar navbar-dark bg-dark fixed-top">
+      <div className="container-fluid">
+           <BootstrapNavbar.Brand>
+              {import.meta.env.VITE_TEAM_NAME}
+            </BootstrapNavbar.Brand>
+        <button
+          className="navbar-toggler"
+          type="button"
+          data-bs-toggle="offcanvas"
+          data-bs-target="#offcanvasDarkNavbar"
+          aria-controls="offcanvasDarkNavbar"
+          aria-label="Toggle navigation"
+        >
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div
+          className="offcanvas offcanvas-end text-bg-dark"
+          tabIndex={-1}
+          id="offcanvasDarkNavbar"
+          aria-labelledby="offcanvasDarkNavbarLabel"
+        >
+          <div className="offcanvas-header">
+            <h5 className="offcanvas-title" id="offcanvasDarkNavbarLabel">
+              I will take you anywhere.
+            </h5>
+            <button
+              type="button"
+              className="btn-close btn-close-white"
+              data-bs-dismiss="offcanvas"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div className="offcanvas-body">
+          
+            <ul className="navbar-nav justify-content-end flex-grow-1 pe-3">
+              <li className="nav-item">
+                <a className="nav-link active " aria-current="page" href="#" >
+                  {pages}
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </nav>
   );
 }

src/containers/App/App.css

@@ -63,3 +63,30 @@ footer a:hover {
   color: white;
   text-decoration: underline;
 }
+
+/* navbar */
+.custom-dropdown-menu {
+  /* navbar folder的设置 */
+  /* background-color: #1b1a1a;  //自定义背景色 */
+  color: #030303;  /* 自定义文字颜色 */
+}
+
+.custom-dropdown-menu.dropdown-item {
+  /* navbar folder 展开时字体颜色与背景 */
+  /* background-color: #4d4949; */
+  color: #000000;  /* 自定义每个菜单项的文字颜色 */
+}
+
+.custom-dropdown-menu.dropdown-item:hover {
+  background-color: #e4dfb4;  /* 鼠标悬停时的背景色 */
+  color: #39d197;  /* 鼠标悬停时的文字颜色 */
+}
+
+/* header */
+.bg-miami {
+  background-image: url('/src/asset/miami.jpg'); /* 背景图片路径 */
+  background-size: cover;        /* 使背景图片覆盖整个容器 */
+  background-position: center;   /* 居中对齐背景图片 */
+  background-repeat: no-repeat;  /* 防止背景图片重复 */
+  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */
+}

src/containers/App/App.tsx

 import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css";
+import 'bootstrap/dist/js/bootstrap.bundle.min.js';  // 引入 Bootstrap JavaScript
 import { Route, Routes } from "react-router-dom";
 import { Footer, Header, Navbar, NotFound } from "../../components";
 import { getPathMapping, stringToSlug } from "../../utils";