Add menu highlighting logic via HX-Trigger, update templates for dynamic menu state management, and extend mixins to support menu highlighting.

templates/backend/base.html

@@ -9,7 +9,7 @@
 
     {% if is_member_manager %}
         <li class="menu-title">Members</li>
-        <li><a href="{{ members_list }}" {% if members_list in request.path %}class="menu-active"{% endif %}><i class="fa-solid fa-users"></i> Members</a></li>
+        <li><a href="{{ members_list }}" class="menu-item {% if members_list in request.path %}menu-active{% endif %}" data-menu="members" hx-get="{% url "backend:members:list" %}" hx-target="#content"><i class="fa-solid fa-users"></i> Members</a></li>
     {% endif %}
 
     <li class="menu-title mt-4">Navigation</li>

templates/base.html

@@ -116,6 +116,13 @@
         </footer>
 
         <script>
+            document.body.addEventListener("menuHighlight", (event) => {
+                const active = event.detail.value;
+                document.querySelectorAll(".menu-item").forEach(el => {
+                    el.classList.toggle("menu-active", el.dataset.menu === active);
+                });
+            });
+
             {% comment %}// Shrinking navbar on scroll
             const navbar = document.getElementById("mainNavbar");
             let lastScroll = 0; window.addEventListener("scroll", () => {