From 6f392bef657f87cbcbc78e2a82390407de1ca9c5 Mon Sep 17 00:00:00 2001
From: Peter van Arkel <peter@hippogrief.nl>
Date: Thu, 21 May 2026 15:01:14 +0200
Subject: [PATCH] (ui) Highlight current navigation section

Mark the active primary or system navigation link with aria-current and a
subtle visual state so staff users can see where they are in the control
panel without making Admin a primary app route.

Refs #37
---
 .../templates/pobsync_backend/base.html         | 17 +++++++++++------
 src/pobsync_backend/tests/test_views.py         |  9 +++++++++
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/pobsync_backend/templates/pobsync_backend/base.html b/src/pobsync_backend/templates/pobsync_backend/base.html
index 35eef5f..8f6337a 100644
--- a/src/pobsync_backend/templates/pobsync_backend/base.html
+++ b/src/pobsync_backend/templates/pobsync_backend/base.html
@@ -80,6 +80,11 @@
 	      padding-left: 0;
 	    }
 	    nav strong a:hover { background: transparent; }
+	    nav a[aria-current="page"] {
+	      background: #eaf3fb;
+	      color: var(--link-strong);
+	      font-weight: 720;
+	    }
 	    .nav-primary,
 	    .nav-secondary {
 	      align-items: center;
@@ -890,15 +895,15 @@
     <nav>
       <strong><a href="{% url 'dashboard' %}">pobsync</a></strong>
       <span class="nav-primary" aria-label="Primary navigation">
-        <a href="{% url 'dashboard' %}">Dashboard</a>
-        <a href="{% url 'ssh_credentials' %}">SSH Keys</a>
-        <a href="{% url 'logs' %}">Logs</a>
-        <a href="{% url 'purged_snapshots' %}">Purged</a>
+        <a href="{% url 'dashboard' %}" {% if request.resolver_match.url_name == "dashboard" %}aria-current="page"{% endif %}>Dashboard</a>
+        <a href="{% url 'ssh_credentials' %}" {% if request.resolver_match.url_name == "ssh_credentials" or request.resolver_match.url_name == "create_ssh_credential" or request.resolver_match.url_name == "generate_ssh_credential" or request.resolver_match.url_name == "edit_ssh_credential" %}aria-current="page"{% endif %}>SSH Keys</a>
+        <a href="{% url 'logs' %}" {% if request.resolver_match.url_name == "logs" %}aria-current="page"{% endif %}>Logs</a>
+        <a href="{% url 'purged_snapshots' %}" {% if request.resolver_match.url_name == "purged_snapshots" %}aria-current="page"{% endif %}>Purged</a>
       </span>
       <span class="spacer"></span>
       <span class="nav-secondary" aria-label="System navigation">
-        <a href="{% url 'self_check' %}">Self Check</a>
-        <a href="{% url 'changelog' %}">Changelog</a>
+        <a href="{% url 'self_check' %}" {% if request.resolver_match.url_name == "self_check" %}aria-current="page"{% endif %}>Self Check</a>
+        <a href="{% url 'changelog' %}" {% if request.resolver_match.url_name == "changelog" %}aria-current="page"{% endif %}>Changelog</a>
         <a href="/api/status/">Status API</a>
         <a href="{% url 'admin:index' %}">Admin</a>
       </span>
diff --git a/src/pobsync_backend/tests/test_views.py b/src/pobsync_backend/tests/test_views.py
index 497f3ea..8cc5d0d 100644
--- a/src/pobsync_backend/tests/test_views.py
+++ b/src/pobsync_backend/tests/test_views.py
@@ -55,6 +55,15 @@ class ViewTests(TestCase):
         self.assertContains(response, reverse("changelog"))
         self.assertContains(response, "/api/status/")
         self.assertContains(response, reverse("admin:index"))
+        self.assertContains(response, '<a href="/" aria-current="page">Dashboard</a>', html=False)
+
+    def test_base_navigation_marks_current_secondary_page(self) -> None:
+        self.client.force_login(self.staff_user)
+
+        response = self.client.get(reverse("self_check"))
+
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, f'<a href="{reverse("self_check")}" aria-current="page">Self Check</a>', html=False)
 
     def test_changelog_requires_staff_login(self) -> None:
         response = self.client.get(reverse("changelog"))