From 1d4162582a2f8e30f6324eb4770b3b332e69ba08 Mon Sep 17 00:00:00 2001
From: Tobias Kunze <r@rixx.de>
Date: Thu, 20 Mar 2025 10:51:56 +0100
Subject: [PATCH] Add auto-active links to sidebar

---
 .../frontend/templates/includes/sidebar.html  |  3 ++-
 src/servala/static/js/sidebar.js              | 22 +++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 src/servala/static/js/sidebar.js

diff --git a/src/servala/frontend/templates/includes/sidebar.html b/src/servala/frontend/templates/includes/sidebar.html
index ae08b51..4b7bc77 100644
--- a/src/servala/frontend/templates/includes/sidebar.html
+++ b/src/servala/frontend/templates/includes/sidebar.html
@@ -1,4 +1,4 @@
-{% load i18n %}
+{% load i18n static %}
 <div id="sidebar">
     <div id="sidebar">
         <div class="sidebar-wrapper active">
@@ -132,3 +132,4 @@
             </div>
         </div>
     </div>
+    <script src="{% static 'js/sidebar.js' %}" defer></script>
diff --git a/src/servala/static/js/sidebar.js b/src/servala/static/js/sidebar.js
new file mode 100644
index 0000000..1f79795
--- /dev/null
+++ b/src/servala/static/js/sidebar.js
@@ -0,0 +1,22 @@
+/**
+ * This script marks the current path as active in the sidebar.
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+    const currentPath = window.location.pathname;
+    const sidebarLinks = document.querySelectorAll('.sidebar-link');
+
+    sidebarLinks.forEach(link => {
+        // Skip links that are inside buttons (like logout)
+        if (link.tagName === 'BUTTON') return;
+
+        if (link.getAttribute('href') === currentPath) {
+            const parentItem = link.closest('.sidebar-item');
+            if (parentItem) {
+                parentItem.classList.add('active');
+            } else {
+                link.classList.add('active');
+            }
+        }
+    })
+})