Fix menu item highlighting with aria-selected attribute

Added app_name Jinja global and aria-selected to nav menu links.
Matches by first path segment (e.g. /market/... → "market") or by
app_name for cross-domain cases (e.g. cart app → "cart" menu item).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
giles
2026-02-19 13:56:07 +00:00
parent 6db91cb3c1
commit 3febef074b
3 changed files with 5 additions and 0 deletions

View File

@@ -1,4 +1,5 @@
{% set _app_slugs = {'cart': cart_url('/')} %}
{% set _first_seg = request.path.strip('/').split('/')[0] %}
<div class="flex flex-col sm:flex-row sm:items-center gap-2 border-r border-stone-200 mr-2 sm:max-w-2xl"
id="menu-items-nav-wrapper"
hx-swap-oob="outerHTML">
@@ -14,6 +15,7 @@
hx-swap="outerHTML"
hx-push-url="true"
{% endif %}
aria-selected="{{ 'true' if (item.slug == _first_seg or item.slug == app_name) else 'false' }}"
class="{{styles.nav_button}}"
>
{% if item.feature_image %}

View File

@@ -1,4 +1,5 @@
{% set _app_slugs = {'cart': cart_url('/')} %}
{% set _first_seg = request.path.strip('/').split('/')[0] %}
<div class="flex flex-col sm:flex-row sm:items-center gap-2 border-r border-stone-200 mr-2 sm:max-w-2xl"
id="menu-items-nav-wrapper">
{% from 'macros/scrolling_menu.html' import scrolling_menu with context %}
@@ -6,6 +7,7 @@
{% set _href = _app_slugs.get(item.slug, coop_url('/' + item.slug + '/')) %}
<a
href="{{ _href }}"
aria-selected="{{ 'true' if (item.slug == _first_seg or item.slug == app_name) else 'false' }}"
class="{{styles.nav_button_less_pad}}"
>
{% if item.feature_image %}

View File

@@ -37,6 +37,7 @@ def setup_jinja(app: Quart) -> None:
app.jinja_env.globals["level"] = level
app.jinja_env.globals["level_up"] = level_up
app.jinja_env.globals["menu_colour"] = "sky"
app.jinja_env.globals["app_name"] = app.name
nav_button = """justify-center cursor-pointer flex flex-row items-center gap-2 rounded bg-stone-200 text-black
[.hover-capable_&]:hover:bg-yellow-300