made scroll progress bar (on top of page)

Author: steadyfall

src/app/components/navbar.tsx

@@ -0,0 +1,19 @@
+import useReadingProgress from '../hooks/useReadingProgress'
+
+const Navbar = () => {
+    const completion = useReadingProgress();
+
+    return (
+        <nav className="py-0.5 sticky top-0">
+            {/* <div className="flex items-center justify-between container mx-auto text-xl"></div> */}
+            <div className="h-0.5 overflow-hidden">
+                <span
+                    className="absolute bg-midnight-blue-600 dark:bg-midnight-blue-400 h-full w-full top-0 bottom-0"
+                    style={{ transform: `translateX(${completion - 100}%)` }}
+                />
+            </div>
+        </nav>
+    )
+}
+
+export default Navbar

src/app/hooks/useReadingProgress.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react'
+
+const useReadingProgress = () => {
+    const [completion, setCompletion] = useState(0);
+
+    useEffect(() => {
+        const updateScrollCompletion = () => {
+            const currentProgress = window.scrollY;
+            const scrollHeight = document.body.scrollHeight - window.innerHeight;
+            if (scrollHeight) {
+                setCompletion(
+                    Number((currentProgress / scrollHeight).toFixed(2)) * 100
+                );
+            }
+        }
+        window.addEventListener('scroll', updateScrollCompletion);
+        return () => {
+            window.removeEventListener('scroll', updateScrollCompletion);
+        }
+    }, []);
+
+    return completion;
+}
+
+export default useReadingProgress