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>

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');
+            }
+        }
+    })
+})