fix: progress bar behind navbar

fezcode · fezcode · commit 84a8ac38f9bc · 2026-01-18T16:51:50.000+03:00
diff --git a/src/pages/blog-views/DossierBlogPostPage.jsx b/src/pages/blog-views/DossierBlogPostPage.jsx
@@ -344,6 +344,13 @@ const DossierBlogPostPage = () => {
         image={post?.attributes?.ogImage || post?.attributes?.image}
         keywords={post?.attributes?.tags}
       />
+      {/* Reading Progress */}
+      <div className="fixed top-0 left-0 w-full h-1 z-[9999] bg-black/5">
+        <div
+          className="h-full bg-red-800 origin-left transition-all duration-150"
+          style={{ width: `${readingProgress}%` }}
+        />
+      </div>
       <GrainOverlay />
       <CoffeeStain />
 
diff --git a/src/pages/blog-views/OldBlogPostPage.jsx b/src/pages/blog-views/OldBlogPostPage.jsx
@@ -325,6 +325,14 @@ const OldBlogPostPage = () => {
               keywords={post.attributes.tags}
             />
 
+            {/* Reading Progress */}
+            <div className="fixed top-0 left-0 w-full h-1 z-[9999] bg-white/5">
+              <div
+                className="h-full bg-emerald-500 origin-left transition-all duration-150"
+                style={{ width: `${readingProgress}%` }}
+              />
+            </div>
+
             <h1 className="text-3xl md:text-5xl font-bold text-emerald-400 mb-6 tracking-tight font-mono">
               {post.attributes.title}
             </h1>
diff --git a/src/pages/blog-views/StandardBlogPostPage.jsx b/src/pages/blog-views/StandardBlogPostPage.jsx
@@ -199,7 +199,7 @@ const StandardBlogPostPage = () => {
         keywords={post?.attributes?.tags}
       />
       {/* Reading Progress */}
-      <div className="fixed top-0 left-0 w-full h-1 z-50 bg-white/5">
+      <div className="fixed top-0 left-0 w-full h-1 z-[9999] bg-white/5">
         <motion.div
           className="h-full bg-emerald-500 origin-left"
           style={{ width: `${readingProgress}%` }}
diff --git a/src/pages/blog-views/TerminalBlogPostPage.jsx b/src/pages/blog-views/TerminalBlogPostPage.jsx
@@ -331,6 +331,14 @@ const TerminalBlogPostPage = () => {
         body { background-color: black; }
       `}</style>
 
+      {/* Reading Progress */}
+      <div className="fixed top-0 left-0 w-full h-1 z-[9999] bg-orange-950/20">
+        <div
+          className="h-full bg-orange-500 shadow-[0_0_10px_#f97316]"
+          style={{ width: `${readingProgress}%` }}
+        />
+      </div>
+
       {/* Optional Scanline Effect Overlay */}
       <div
         className="fixed inset-0 pointer-events-none z-50 opacity-20"
diff --git a/src/pages/blog-views/TerminalGreenBlogPostPage.jsx b/src/pages/blog-views/TerminalGreenBlogPostPage.jsx
@@ -185,7 +185,7 @@ const TerminalGreenBlogPostPage = () => {
             'repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 1px, transparent 2px)',
         }}
       ></div>
-      <div className="fixed top-0 left-0 w-full h-1 bg-emerald-950 z-50">
+      <div className="fixed top-0 left-0 w-full h-1 bg-emerald-950 z-[9999]">
         <div
           className="h-full bg-emerald-500 shadow-[0_0_10px_#10b981]"
           style={{ width: `${readingProgress}%` }}
