hippogrief/pobsync
1
0
Fork 0
Code Issues 21 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

(ui) Highlight current navigation section

Browse Source 
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
This commit is contained in:
Peter van Arkel
2026-05-21 15:01:14 +02:00
parent 6035c547ae
commit 6f392bef65
2 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/pobsync_backend/templates/pobsync_backend/base.html
View File

@@ -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>

9
src/pobsync_backend/tests/test_views.py
View File

@@ -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"))