Progress bar

assets/controllers/progress_bar_controller.js

@@ -0,0 +1,33 @@
+// assets/controllers/progress_bar_controller.js
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["bar"];
+
+  connect() {
+    // Listen for clicks on the entire document instead of just the controller element
+    document.addEventListener("click", this.handleClick.bind(this));
+  }
+
+  disconnect() {
+    // Clean up event listener when controller disconnects
+    document.removeEventListener("click", this.handleClick.bind(this));
+  }
+
+  handleClick(event) {
+    const link = event.target.closest("a");
+    if (link && !link.hasAttribute("data-no-progress") &&
+        !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+      this.start();
+    }
+  }
+
+  start() {
+    this.barTarget.style.width = "0";
+    this.barTarget.style.transition = "none";
+    setTimeout(() => {
+      this.barTarget.style.transition = "width 5s ease-in-out";
+      this.barTarget.style.width = "100%";
+    }, 10);
+  }
+}

assets/styles/layout.css

@@ -69,6 +69,17 @@ header {
     justify-content: center;
 }
 
+#progress-bar {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 4px;
+    width: 0;
+    background: var(--color-primary);
+    transition: width 0.4s ease;
+    z-index: 1000;
+}
+
 /* Mobile Styles */
 @media (max-width: 768px) {
     .header__logo {
@@ -78,7 +89,7 @@ header {
     .header__categories {
         display: none;
         flex-direction: column;
-        padding-top: 1rem;
+        padding-top: 10px;
     }
 
     .header__categories.active {
@@ -92,7 +103,7 @@ header {
 
     .header__categories ul {
         flex-direction: column;
-        gap: 0.5rem;
+        gap: 10px;
     }
 }