From 17e91cd7f82aa9eff13a18872b3c97512e81d362 Mon Sep 17 00:00:00 2001
From: Bernard Siebens <bernard@siebens.org>
Date: Fri, 16 Jan 2026 23:57:06 +0100
Subject: [PATCH] Add menu highlighting logic via `HX-Trigger`, update
 templates for dynamic menu state management, and extend mixins to support
 menu highlighting.

---
 backend/members/views.py    |  2 ++
 backend/mixins.py           | 19 ++++++++++++++++++-
 templates/backend/base.html |  2 +-
 templates/base.html         |  7 +++++++
 4 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/backend/members/views.py b/backend/members/views.py
index ec70b78..608e69c 100644
--- a/backend/members/views.py
+++ b/backend/members/views.py
@@ -19,6 +19,7 @@ class MemberListView(HTMXViewMixin, PermissionRequiredMixin, FilterView):
     permission_denied_message = _("You do not have permission to view this page.")
     permission_required = "members.view_member"
     partial_name = "members/member_filter.html#content"
+    menu_highlight = "members"
 
     def handle_no_permission(self) -> HttpResponseRedirect:
         messages.error(self.request, self.get_permission_denied_message())
@@ -48,6 +49,7 @@ class MemberDeleteView(HTMXViewMixin, PermissionRequiredMixin, SuccessMessageMix
     permission_required = "members.delete_member"
     permission_denied_message = _("You do not have permission to view this page.")
     success_url = reverse_lazy("backend:members:list")
+    menu_highlight = "members"
     
     def handle_no_permission(self) -> HttpResponseRedirect:
         messages.error(self.request, self.get_permission_denied_message())
diff --git a/backend/mixins.py b/backend/mixins.py
index 60cb82b..ae68850 100644
--- a/backend/mixins.py
+++ b/backend/mixins.py
@@ -1,3 +1,5 @@
+import json
+
 from django.http import HttpResponse
 from django.template.loader import render_to_string
 from django_htmx.http import HttpResponseClientRedirect, HttpResponseClientRefresh
@@ -33,6 +35,9 @@ class HTMXViewMixin:
     # Optional: automatically push URL on GET
     htmx_push_url = None
     
+    # Optional: name of the menu item to highlight
+    menu_highlight = None
+    
     # Optional: trigger events after rendering
     htmx_trigger = None
     htmx_trigger_after_settle = None
@@ -62,9 +67,21 @@ class HTMXViewMixin:
                 response.headers["HX-Push-Url"] = self.htmx_push_url or request.get_full_path()
                 
             print(response.headers)
+            
+        # Build HX-Trigger payload
+        trigger_payload = {}
         
+        # 1. User-defined triggers
         if self.htmx_trigger:
-            response.headers["HX-Trigger"] = self.htmx_trigger
+            trigger_payload.update(json.loads(self.htmx_trigger))
+        
+        # 2. Auto menu highlight trigger
+        if self.menu_highlight:
+            trigger_payload["menuHighlight"] = self.menu_highlight
+        
+        # Emit HX-Trigger if anything is present
+        if trigger_payload:
+            response.headers["HX-Trigger"] = json.dumps(trigger_payload)
         
         if self.htmx_trigger_after_settle:
             response.headers["HX-Trigger-After-Settle"] = self.htmx_trigger_after_settle
diff --git a/templates/backend/base.html b/templates/backend/base.html
index de213ca..1f7de1a 100644
--- a/templates/backend/base.html
+++ b/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>
diff --git a/templates/base.html b/templates/base.html
index 6f66ee7..7194e49 100644
--- a/templates/base.html
+++ b/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", () => {