feat: added scroll indicator

src/app/page.tsx

@@ -3,6 +3,7 @@ import Footer from "@/components/core/footer";
 import Navbar from "@/components/core/navbar";
 import { cookies } from "next/headers";
 import { getGithubStars } from "@/helper/getGithubStars";
+import ProgressBar from "@/components/ProgressBar";
 
 export default async function Home() {
   const starCount: number = await getGithubStars();
@@ -13,6 +14,7 @@ export default async function Home() {
 
   return (
     <>
+      <ProgressBar />
       <Navbar starCount={starCount} />
       <HomePage accountId={accountId} />
       <Footer />

src/components/ProgressBar/index.tsx

@@ -0,0 +1,33 @@
+"use client";
+import { useEffect, useState } from "react"
+
+const ProgressBar = () => {
+    const [progressWidth, setProgressWidth] = useState(0)
+
+    useEffect(() => {
+        const handleScroll = ()=>{
+            const windowHeight = window.innerHeight;
+            const docHeight = document.documentElement.scrollHeight;
+
+            const scrollY = window.scrollY;
+
+            const scrollPercentage = Math.floor((scrollY / (docHeight - windowHeight)) * 100);
+            setProgressWidth(scrollPercentage);
+        }
+
+      window.addEventListener("scroll", handleScroll);
+
+      return ()=>{
+        window.removeEventListener("scroll", handleScroll);
+      }
+    }, [progressWidth])
+
+
+  return (
+    <div className="progress-container h-2 w-full bg-transparent fixed top-0 z-10 backdrop-blur-sm">
+        <div className={`progress-fill bg-[rgb(240,46,101)] h-full`} style={{width : `${progressWidth}%`}}></div>
+    </div>
+  )
+}
+
+export default ProgressBar

src/components/core/navbar/index.tsx

@@ -109,7 +109,7 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
 
   return (
     <>
-      <nav className="w-full sticky top-0 shadow-md py-2 px-4 md:px-10 backdrop-blur-sm dark:shadow-gray-600 z-50">
+      <nav className="w-full sticky top-2 shadow-md py-2 px-4 md:px-10 backdrop-blur-sm dark:shadow-gray-600 z-50">
         {/* Desktop menu items */}
         <div className="max-w-screen-lg mx-auto flex items-center content-center justify-between backdrop-blur-sm bg-grey-100 bg-opacity-20 h-16 my-2">
           <Link href={userAuth.creds?.userId ? "/feed" : "/"}>