From 73c1a752c4645dff334bc62f7e1ac6fd3a7079cc Mon Sep 17 00:00:00 2001
From: Sourabh782 <sourabhsinghrawat782@gmail.com>
Date: Thu, 8 Aug 2024 13:24:27 +0530
Subject: [PATCH 1/3] feat: added scroll indicator

---
 src/app/page.tsx                     |  2 ++
 src/components/ProgressBar/index.tsx | 34 ++++++++++++++++++++++++++++
 src/components/core/navbar/index.tsx |  2 +-
 3 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ProgressBar/index.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5ea22ff4..ea235042 100644
--- a/src/app/page.tsx
+++ b/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 />
diff --git a/src/components/ProgressBar/index.tsx b/src/components/ProgressBar/index.tsx
new file mode 100644
index 00000000..b5334b27
--- /dev/null
+++ b/src/components/ProgressBar/index.tsx
@@ -0,0 +1,34 @@
+"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);
+        }
+        console.log(progressWidth)
+
+      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
\ No newline at end of file
diff --git a/src/components/core/navbar/index.tsx b/src/components/core/navbar/index.tsx
index d49f0448..fc7c5743 100644
--- a/src/components/core/navbar/index.tsx
+++ b/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" : "/"}>

From 61e9f0dc1d26e87ecd2da88a019ded219cce9e4c Mon Sep 17 00:00:00 2001
From: Sourabh782 <sourabhsinghrawat782@gmail.com>
Date: Thu, 8 Aug 2024 13:35:20 +0530
Subject: [PATCH 2/3] feat: removed unwanted console.log

---
 src/components/ProgressBar/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ProgressBar/index.tsx b/src/components/ProgressBar/index.tsx
index b5334b27..a59e04fe 100644
--- a/src/components/ProgressBar/index.tsx
+++ b/src/components/ProgressBar/index.tsx
@@ -14,7 +14,6 @@ const ProgressBar = () => {
             const scrollPercentage = Math.floor((scrollY / (docHeight - windowHeight)) * 100);
             setProgressWidth(scrollPercentage);
         }
-        console.log(progressWidth)
 
       window.addEventListener("scroll", handleScroll);
 

From fd2db9fb41063b813aa002963997cac5a88d7b1d Mon Sep 17 00:00:00 2001
From: Sourabh782 <sourabhsinghrawat782@gmail.com>
Date: Thu, 8 Aug 2024 20:35:00 +0530
Subject: [PATCH 3/3] feat: made Progress bar a reusabel component

---
 src/app/page.tsx                          |  2 +-
 src/components/ProgressBar/index.tsx      | 39 ++++++++---------------
 src/components/core/navbar/index.tsx      |  2 +-
 src/components/pages/contribute/index.tsx |  6 ++--
 4 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ea235042..2ec021bc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -14,7 +14,7 @@ export default async function Home() {
 
   return (
     <>
-      <ProgressBar />
+      <ProgressBar start={"origin-left"} />
       <Navbar starCount={starCount} />
       <HomePage accountId={accountId} />
       <Footer />
diff --git a/src/components/ProgressBar/index.tsx b/src/components/ProgressBar/index.tsx
index a59e04fe..00e7b7c5 100644
--- a/src/components/ProgressBar/index.tsx
+++ b/src/components/ProgressBar/index.tsx
@@ -1,32 +1,19 @@
-"use client";
-import { useEffect, useState } from "react"
+"use client"
+import { motion, useScroll, useSpring } from "framer-motion";
 
-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])
-    
+const ProgressBar = ({start}: {start: string}) => {
+    const { scrollYProgress } = useScroll();
+    const scaleX = useSpring(scrollYProgress, {
+        stiffness: 100,
+        damping: 30,
+        restDelta: 0.001,
+    });
 
   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>
+    <motion.div
+      className={`fixed top-0 left-0 right-0 h-2 bg-primary ${start} z-[51]`}
+      style={{ scaleX }}
+    />
   )
 }
 
diff --git a/src/components/core/navbar/index.tsx b/src/components/core/navbar/index.tsx
index fc7c5743..d49f0448 100644
--- a/src/components/core/navbar/index.tsx
+++ b/src/components/core/navbar/index.tsx
@@ -109,7 +109,7 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
 
   return (
     <>
-      <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">
+      <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">
         {/* 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" : "/"}>
diff --git a/src/components/pages/contribute/index.tsx b/src/components/pages/contribute/index.tsx
index d2c007e2..a1a639ac 100644
--- a/src/components/pages/contribute/index.tsx
+++ b/src/components/pages/contribute/index.tsx
@@ -5,6 +5,7 @@ import Footer from "@/components/core/footer";
 import Navbar from "@/components/core/navbar";
 import { Forking, AppwriteSetup, DevSetup } from "@/components/core/contributionSections";
 import { motion, useScroll, useSpring } from "framer-motion";
+import ProgressBar from "@/components/ProgressBar";
 
 // Component to render the contribution guide with dynamic tabs
 export default function Contribute() {
@@ -75,10 +76,11 @@ export default function Contribute() {
         </article>
         <article>
           <Tabs currentTab={currentTab || ""} />
-          <motion.div
+          {/* <motion.div
             className="fixed bottom-0 left-0 right-0 h-2 bg-primary origin-center"
             style={{ scaleX }}
-          />
+          /> */}
+          <ProgressBar start={"origin-center"} />
         </article>
       </section>
       <Footer />