From f0b3a39a3bfce85fd3807834b92862d8c77d9764 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= <nusa.puksic@gmail.com>
Date: Sun, 8 Jun 2025 11:36:25 +0200
Subject: [PATCH] Progress bar

---
 assets/controllers/progress_bar_controller.js | 33 +++++++++++++++++++
 assets/styles/layout.css                      | 15 +++++++--
 2 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 assets/controllers/progress_bar_controller.js

diff --git a/assets/controllers/progress_bar_controller.js b/assets/controllers/progress_bar_controller.js
new file mode 100644
index 0000000..830284e
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/assets/styles/layout.css b/assets/styles/layout.css
index 8761c68..0076c36 100644
--- a/assets/styles/layout.css
+++ b/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;
     }
 }