b0rbor4d/spiele-redaktion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

P1: Aktiver Navigationszustand (aria-current + visuell)

Browse Source 
Desktop: emerald Unterstrich + font-semibold auf dem aktiven Eintrag;
mobil: fett + emerald. request.url.path steuert den Zustand, kein JS
nötig. Mobiles Menü schließt weiterhin nach jedem Link-Klick.
This commit is contained in:
Flo Hartmann
2026-08-26 08:51:44 +00:00
parent bba39525a0
commit 117b34653c
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/redaktionskern/templates/base.html
View File

@@ -18,7 +18,9 @@
<!-- Desktop: horizontale Navigationsleiste -->
<span class="hidden md:flex items-center gap-5 flex-1">
{% for eintrag in plugin_nav %}
<a href="{{ eintrag.url }}" class="text-sm text-slate-600 hover:text-emerald-700">{{ eintrag.label }}</a>
{% set aktiv = request.url.path == eintrag.url or request.url.path.startswith(eintrag.url ~ '/') %}
<a href="{{ eintrag.url }}" {% if aktiv %}aria-current="page"{% endif %}
class="text-sm pb-0.5 border-b-2 {% if aktiv %}text-emerald-700 font-semibold border-emerald-600{% else %}text-slate-600 border-transparent hover:text-emerald-700 hover:border-emerald-300{% endif %}">{{ eintrag.label }}</a>
{% endfor %}
</span>
<!-- Mobil: Burger-Button (Alpine.js), Touch-Ziel &ge;&ge; 44px -->
@@ -61,8 +63,9 @@
<div id="hauptmenue-mobil" x-show="menue" x-cloak @click.outside="menue = false"
class="md:hidden border-t border-slate-200 bg-white px-4 pb-3 pt-2">
{% for eintrag in plugin_nav %}
<a href="{{ eintrag.url }}" @click="menue = false"
class="block py-3 text-sm font-medium text-slate-700 hover:text-emerald-700 border-b border-slate-100 last:border-0">
{% set aktiv = request.url.path == eintrag.url or request.url.path.startswith(eintrag.url ~ '/') %}
<a href="{{ eintrag.url }}" @click="menue = false" {% if aktiv %}aria-current="page"{% endif %}
class="block py-3 text-sm border-b border-slate-100 last:border-0 {% if aktiv %}font-semibold text-emerald-700{% else %}font-medium text-slate-700 hover:text-emerald-700{% endif %}">
{{ eintrag.label }}
</a>
{% endfor %}