Nav: current-page indicator and underline on hover#45
Merged
Kanyandula merged 1 commit intomasterfrom May 4, 2026
Merged
Conversation
Desktop nav (Home / About / Contact) and the mobile menu links now reflect the page you are on, instead of always rendering identically. Desktop: - Active link: text-primary + permanent underline (offset-4, decoration-2). - Inactive link: existing text-on-surface/70 → hover:text-primary-container color shift, plus a hover:underline that animates in via transition-colors. Mobile menu: - Active link: text-primary + font-medium (no underline; small targets). - Inactive: text-on-surface/70 baseline (matches existing other links). - Home is no longer hardcoded as the active state — drops to inactive when the user is on /about or /contact. Active detection uses request.resolver_match.url_name (matches the pattern already used by the mobile bottom nav). Active link also gets aria-current="page" for screen readers. Tailwind rebuilt to pull underline-offset-4, decoration-2, and hover:underline into the bundle.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Make the desktop nav (Home / About / Contact) and the mobile menu links feel navigated — they now reflect the page the user is on, and they react on hover instead of just sitting there.
This is the small follow-up the audit flagged but didn't itemise: top-level nav links had a soft color tween on hover and no current-page indicator at all.
Desktop nav
text-primary+ permanent underline (underline-offset-4 decoration-2).text-on-surface/70 → hover:text-primary-containercolor shift and gainshover:underlineon top.{% with active=request.resolver_match.url_name %}— same pattern the mobile bottom nav already uses.aria-current="page"for screen readers.Mobile menu
text-primary+font-medium. No underline (taps are small).text-on-surface/70(matches the existing Account / Logout / Sign in baseline).aria-current="page"on the active link.Tailwind
Rebuilt
static/css/tailwind.min.cssto pullunderline-offset-4,decoration-2, andhover:underlineinto the bundle (they weren't used before).Test plan
/— Home is highlighted with the underline; About / Contact are not./aboutand/contact— only the matching link is highlighted in both light and dark mode.decoration-2 underline-offset-4doesn't push neighbouring nav items.Out of scope
hx-boostfor full-page navigation transitions are still PR 2.