Added ProgressBar | Issue #122

app/(dashboard)/layout.tsx

@@ -1,21 +1,23 @@
 import { Footer } from "@/components/global/footer";
 import { Header } from "@/components/global/header";
 import { Toaster } from "@/components/ui/sonner";
+import ScrollProgressBar from "@/components/ui/progress-bar";
 
 type Props = {
-	children: React.ReactNode;
+  children: React.ReactNode;
 };
 const DashboardLayout = ({ children }: Props) => {
-	return (
-		<div className=" flex justify-center">
-			<div className="flex flex-col w-full mx-auto min-h-screen max-w-screen-2xl">
-				<Header />
-				<Toaster />
-				<main className="flex-grow px-3 lg:px-14">{children}</main>
-				<Footer />
-			</div>
-		</div>
-	);
+  return (
+    <div className=" flex justify-center">
+      <div className="flex flex-col w-full mx-auto min-h-screen max-w-screen-2xl">
+        <ScrollProgressBar />
+        <Header />
+        <Toaster />
+        <main className="flex-grow px-3 lg:px-14">{children}</main>
+        <Footer />
+      </div>
+    </div>
+  );
 };
 
 export default DashboardLayout;

components/ui/progress-bar.jsx

@@ -0,0 +1,45 @@
+"use client";
+import { useState, useEffect } from "react";
+
+export default function ScrollProgressBar() {
+  const [scrollPercentage, setScrollPercentage] = useState(0);
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const handleScroll = () => {
+    const scrollTop = window.scrollY;
+    const docHeight =
+      document.documentElement.scrollHeight - window.innerHeight;
+    const scrollPercent = (scrollTop / docHeight) * 100;
+    setScrollPercentage(scrollPercent);
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+
+    const darkModeMediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    );
+    setIsDarkMode(darkModeMediaQuery.matches);
+
+    const handleDarkModeChange = (e) => setIsDarkMode(e.matches);
+    darkModeMediaQuery.addEventListener("change", handleDarkModeChange);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
+    };
+  }, []);
+
+  return (
+    <div className="fixed top-0 left-0 w-full h-2 z-50 bg-white">
+      <div
+        className="h-full rounded-full transition-all duration-150"
+        style={{
+          width: `${scrollPercentage}%`,
+          background: isDarkMode ? "#030712" : "white",
+          height: "8px",
+        }}
+      />
+    </div>
+  );
+}