sidebars

src/App/App.css

@@ -132,6 +132,17 @@ hr{
 /* * * * * * * */
 /* * * BODY* * */
 /* * * * * * * */
+
+.progress-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 5;
+  height: 4.5rem;
+  background: var(--darkerbeige) !important;
+  transform-origin: 0%;
+}
 body {
   /* padding-top: 56px; */
   background-color: var(--ourbeige);
@@ -236,9 +247,8 @@ color: var(--text-primary);
 .sticky-top {
   position: -webkit-sticky;
   position: sticky !important; 
-  top: 0;
   z-index: 1020;
-  top: 80px !important; 
+  top: 100px !important; 
   overflow-wrap: break-word;
 }
 .small-only{
@@ -3666,4 +3676,5 @@ a{
 .sideitem ul{
   margin-left: 0 !important;
   padding-left: 10px !important;
-}
\ No newline at end of file
+}
+

src/App/App.tsx

@@ -20,9 +20,13 @@ import { stringToSlug } from "../utils/stringToSlug.ts";
 import { Villbuttonrow } from "../components/Buttons.tsx";
 import "../utils/Highlight-functions.js";
 import "./LoadingScreen.css";
-
+import { useScroll, motion } from "framer-motion";
 
 const App = () => {
+  const { scrollYProgress } = useScroll({
+    offset: ["start start", "end end"],
+  });
+
   window.scrollTo(0, 0);
 
   const [isLoading, setIsLoading] = useState(true);
@@ -61,10 +65,13 @@ const App = () => {
     ) : (
 
     <>
+      
       {/* Navigation */}
       <Navbar />
-      {/* Embed the viewer */}
-      
+      <motion.div
+        className="progress-bar"
+        style={{ scaleX: scrollYProgress }}
+      />
 
       {/* Header and PageContent */}
       <Routes>
@@ -74,6 +81,7 @@ const App = () => {
             path={path}
             element={
               <>
+                
                 <Header />
                 {/* Page content */}
                 <div className="container-fluid">