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:
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user