progress bar

src/App/App.css

@@ -3982,4 +3982,28 @@ figure img{
 
 .lorem{
   background-color: red !important;
+}
+
+
+
+.navbar .scroll-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 5px;
+  width: 100%;
+  background: linear-gradient(90deg,var(--lightblue),var(--text-primary));
+  z-index: 10;
+  overflow: visible;
+}
+
+
+
+.navbar .scroll-progress img {
+  position: absolute;
+  top: -20px;
+  height: 25px;
+  width: 30px;
+  z-index: 11;
+  transition: transform .5s ease-in-out;
 }
\ No newline at end of file

src/App/App.tsx

-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import "./App.css";
 import "./HP.css"
 import "./mediarules.css"
@@ -74,10 +74,7 @@ const App = () => {
       
       {/* Navigation */}
       <Navbar />
-      <motion.div
-        className="progress-bar"
-        style={{ scaleX: scrollYProgress }}
-      />
+      
 
       {/* Header and PageContent */}
       <Routes>

src/components/Navbar.tsx

+import { useEffect, useRef, useState } from 'react';
 import Container from "react-bootstrap/Container";
 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 { NavPages } from "../pages.ts";
+import {NavPages }from "../pages.ts";
 
-export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
+export function Navbar() {
+  const navbarCollapseRef = useRef<HTMLDivElement>(null);
+  const progressBarRef = useRef<HTMLDivElement>(null);
+  const progressImageRef = useRef<HTMLImageElement>(null);
+  const [isCollapsed, setIsCollapsed] = useState(false); // State to control navbar collapsed state
+  const [openDropdowns, setOpenDropdowns] = useState<{ [key: string]: boolean }>({}); // Track each dropdown state
+  let scrollTimeout: NodeJS.Timeout;
 
-  /* const handleToggle = () => {
-    setIsLightMode(!isLightMode);
-  }; */
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      
+      // Use document.body.scrollHeight to get the full height of the document
+      const scrollHeight = document.body.scrollHeight - window.innerHeight;
+  
+      // Calculate the scroll percentage properly
+      const scrollPercentage = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
+  
+      const screenWidth = window.innerWidth; // Get the screen width
+  
+      // Only collapse the navbar on larger screens (greater than 768px)
+      if (screenWidth > 768) {
+        if (scrollTop > 50) {
+          setIsCollapsed(true); // Collapse navbar when scrolling down
+          setOpenDropdowns({}); // Close all dropdowns when collapsed
+        } else {
+          setIsCollapsed(false); // Expand navbar when scrolling up
+          setOpenDropdowns({}); // Also close all dropdowns when expanded
+        }
+      } else {
+        setIsCollapsed(false); // Always keep the navbar expanded on smaller screens
+        setOpenDropdowns({}); // Close all dropdowns on smaller screens as well
+      }
+  
+      // Progress bar logic
+      if (progressBarRef.current && progressImageRef.current) {
+        progressBarRef.current.style.width = `${scrollPercentage}%`;
+        const progressBarWidth = progressBarRef.current.offsetWidth;
+        progressImageRef.current.style.left = `${progressBarWidth - progressImageRef.current.offsetWidth / 2}px`;
+  
+        if (scrollPercentage <= 2) {
+          progressImageRef.current.style.display = 'none';
+        } else {
+          progressImageRef.current.style.display = 'block';
+        }
+  
+        progressImageRef.current.classList.add('walking');
+  
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(() => {
+          if (progressImageRef.current) {
+            progressImageRef.current.classList.remove('walking');
+            progressImageRef.current.style.transform = 'translateY(0)';
+          }
+        }, 1000);
+      }
+    };
+  
+    const onLoad = () => {
+      // Trigger scroll event manually to ensure progress is set correctly on load
+      handleScroll();
+    };
+  
+    // Listen for the page load event to ensure content is fully loaded
+    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('load', onLoad); // Trigger when the page is fully loaded
+  
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('load', onLoad);
+      clearTimeout(scrollTimeout);
+    };
+  }, []);
+  
+  
+  
+
+  useEffect(() => {
+    const handleLinkClick = (event: Event) => {
+      if (navbarCollapseRef.current && navbarCollapseRef.current.classList.contains('show')) {
+        const target = event.target as HTMLElement;
+        if (target.closest('.dropdown-text')) {
+          navbarCollapseRef.current.classList.remove('show');
+        }
+      }
+    };
+
+    const links = document.querySelectorAll('.navbar-text');
+    links.forEach(link => link.addEventListener('click', handleLinkClick));
+
+    return () => {
+      links.forEach(link => link.removeEventListener('click', handleLinkClick));
+    };
+  }, []);
+
+  // Handle the dropdown toggle state individually
+  const handleDropdownToggle = (index: string, isOpen: boolean) => {
+    setOpenDropdowns((prevState) => ({
+      ...prevState,
+      [index]: isOpen,
+    }));
+  };
 
   const pages = NavPages.map((item, pageIndex) => {
     if ("folder" in item && item.folder) {
@@ -20,11 +119,12 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
               key={`subpage-${pageIndex}-${subpageIndex}`}
               as={Link}
               to={subpage.path}
-            >
+              >
               {subpage.name}
             </NavDropdown.Item>
           );
         }
+        return null;
       });
       return (
         <NavDropdown
@@ -32,7 +132,7 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
           title={item.name}
           renderMenuOnMount={true}
           id="basic-nav-dropdown"
-        >
+          >
           {folderItems}
         </NavDropdown>
       );
@@ -49,7 +149,7 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
     <BootstrapNavbar className="navbar-custom" expand="lg" bg="bg-transparent" variant="light"/* bg={isLightMode ? "d" : "l"} variant={isLightMode ? "dark" : "light"}  */fixed="top">
       <Container>
         <BootstrapNavbar.Brand>
-          {import.meta.env.VITE_TEAM_NAME}
+        {import.meta.env.VITE_TEAM_NAME}
         </BootstrapNavbar.Brand>
         <BootstrapNavbar.Toggle aria-controls="basic-navbar-nav"/>
         <BootstrapNavbar.Collapse id="basic-navbar-nav">
@@ -58,8 +158,16 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
               {isLightMode ? '🌙' : '🔆' }
             </button> */}
             {pages}
-          </Nav> 
-        </BootstrapNavbar.Collapse>
+          </Nav>
+          </BootstrapNavbar.Collapse>
+        <div id="scroll-progress" className="scroll-progress" ref={progressBarRef}>
+          <img
+            src=""
+            alt="Progress Icon"
+            ref={progressImageRef}
+            style={{ filter: 'grayscale(100%) brightness(50%)', left: '0' }} 
+          />
+        </div>
       </Container>
     </BootstrapNavbar>
   );