add progress of home

src/components/Navbar.css

@@ -43,6 +43,7 @@
 .apple-nav {
   font-family: 'pangolin', cursive;
   margin-right: auto;
+  z-index: 999;
 }
 
 .apple-nav .nav-link,
@@ -55,13 +56,23 @@
   padding: 12px 20px;
   transition: opacity 0.2s ease;
 }
-
+.scroll-progress-bar {
+  width: var(--scroll-progress);
+}
 
 .apple-nav .nav-link:hover,
 .apple-nav .dropdown-toggle:hover {
   opacity: 0.65;
 }
-
+.scroll-progress-bar {
+  position: fixed;
+  top: 68px; /* 调整这个值以匹配你的导航栏高度 */
+  left: 0;
+  height: 3px;
+  background-color: #007aff; /* 使用 Apple 风格的蓝色 */
+  z-index: 1000;
+  transition: width 0.1s ease-out;
+}
 .apple-nav .dropdown-menu {
   background-color: rgba(255, 255, 255, 0.8);
   backdrop-filter: saturate(180%) blur(20px);

src/components/Navbar.tsx

+import React, { useState, useEffect } 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 { Link, useLocation } from "react-router-dom";
 import Pages from "../pages.ts";
 import { Container } from "react-bootstrap";
-import "./Navbar.css"; // 添加这行来引入自定义 CSS 文件的1
+import "./Navbar.css";
 
 export function Navbar() {
+  const [scrollProgress, setScrollProgress] = useState(0);
+  const location = useLocation();
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const totalScroll = document.documentElement.scrollHeight - window.innerHeight;
+      const currentScroll = window.pageYOffset;
+      const scrollPercentage = (currentScroll / totalScroll) * 100;
+      setScrollProgress(scrollPercentage);
+    };
+
+    if (location.pathname === "/") {
+      window.addEventListener("scroll", handleScroll);
+      handleScroll(); // 初始化进度
+    }
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [location]);
   const pages = Pages.map((item, pageIndex) => {
     if ("folder" in item && item.folder) {
       const folderItems = item.folder.map((subpage, subpageIndex) => {
@@ -49,6 +70,8 @@ export function Navbar() {
   });
 
   return (
+
+  <>
     <BootstrapNavbar expand="lg" className="apple-navbar" fixed="top">
       <Container fluid>
         <Link to="/" className="apple-brand">
@@ -60,5 +83,12 @@ export function Navbar() {
         </BootstrapNavbar.Collapse>
       </Container>
     </BootstrapNavbar>
+    {location.pathname === "/" && (
+        <div 
+          className="scroll-progress-bar" 
+          style={{ width: `${scrollProgress}%` }}
+        ></div>
+      )}
+    </>
   );
 }
\ No newline at end of file