A R R R Associates
87 lines
5.1 KiB
HTML
87 lines
5.1 KiB
HTML
{#
|
|
UI/UX V2 Phase 1A — Mobile navigation component (INERT UNTIL INCLUDED)
|
|
|
|
Uses native <details>, so it requires no JavaScript and cannot interfere with
|
|
the current application shell. It consumes the same navigation_items_v2 data
|
|
as navigation_v2.html.
|
|
#}
|
|
{% set _mobile_items = navigation_items_v2|default([], true) %}
|
|
{% set _mobile_label = navigation_aria_label_v2|default('Mobile navigation', true) %}
|
|
|
|
{% if _mobile_items %}
|
|
<div class="lg:hidden" data-uiux-v2="mobile-navigation">
|
|
<details class="group border-b border-slate-200 bg-white">
|
|
<summary class="mx-auto flex min-h-12 max-w-[1500px] cursor-pointer list-none items-center justify-between gap-3 px-4 py-2 text-sm font-semibold text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500 sm:px-6">
|
|
<span class="inline-flex items-center gap-2">
|
|
<svg class="h-5 w-5 group-open:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path stroke-linecap="round" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
<svg class="hidden h-5 w-5 group-open:block" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path stroke-linecap="round" d="M6 6l12 12M18 6 6 18" />
|
|
</svg>
|
|
<span>Menu</span>
|
|
</span>
|
|
<span class="text-xs font-medium text-slate-500">{{ _mobile_label }}</span>
|
|
</summary>
|
|
|
|
<nav aria-label="{{ _mobile_label }}" class="border-t border-slate-100 bg-slate-50/80 px-4 py-3 sm:px-6">
|
|
<ul class="mx-auto max-w-[1500px] space-y-1" role="list">
|
|
{% for item in _mobile_items %}
|
|
{% if item.get('visible', true) %}
|
|
{% set _children = item.get('children', []) or [] %}
|
|
{% set _active = item.get('active', false) %}
|
|
<li>
|
|
{% if _children %}
|
|
<details class="group/sub rounded-xl border {{ 'border-brand-200 bg-brand-50/60' if _active else 'border-transparent bg-white' }}">
|
|
<summary class="flex cursor-pointer list-none items-center justify-between gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold {{ 'text-brand-700' if _active else 'text-slate-800' }}">
|
|
<span class="inline-flex items-center gap-2">
|
|
{{ item.get('label', '') }}
|
|
{% if item.get('badge') is not none %}
|
|
<span class="rounded-full bg-brand-100 px-2 py-0.5 text-[11px] font-bold text-brand-700">{{ item.get('badge') }}</span>
|
|
{% endif %}
|
|
</span>
|
|
<svg class="h-4 w-4 transition-transform group-open/sub:rotate-180" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.51a.75.75 0 0 1-1.08 0l-4.25-4.51a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd" />
|
|
</svg>
|
|
</summary>
|
|
<div class="space-y-1 border-t border-slate-100 p-2">
|
|
{% for child in _children %}
|
|
{% if child.get('visible', true) %}
|
|
{% set _child_active = child.get('active', false) %}
|
|
<a
|
|
href="{{ child.get('url', '#') }}"
|
|
class="flex items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm {{ 'bg-brand-100 font-semibold text-brand-800' if _child_active else 'text-slate-700 hover:bg-slate-100' }}"
|
|
{% if _child_active %}aria-current="page"{% endif %}
|
|
{% if child.get('external', false) %}target="_blank" rel="noopener noreferrer"{% endif %}
|
|
>
|
|
<span>{{ child.get('label', '') }}</span>
|
|
{% if child.get('badge') is not none %}
|
|
<span class="rounded-full bg-white px-2 py-0.5 text-[11px] font-bold text-slate-600">{{ child.get('badge') }}</span>
|
|
{% endif %}
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</details>
|
|
{% else %}
|
|
<a
|
|
href="{{ item.get('url', '#') }}"
|
|
class="flex items-center justify-between gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold {{ 'bg-brand-50 text-brand-700' if _active else 'bg-white text-slate-800 hover:bg-slate-100' }}"
|
|
{% if _active %}aria-current="page"{% endif %}
|
|
{% if item.get('external', false) %}target="_blank" rel="noopener noreferrer"{% endif %}
|
|
>
|
|
<span>{{ item.get('label', '') }}</span>
|
|
{% if item.get('badge') is not none %}
|
|
<span class="rounded-full bg-brand-100 px-2 py-0.5 text-[11px] font-bold text-brand-700">{{ item.get('badge') }}</span>
|
|
{% endif %}
|
|
</a>
|
|
{% endif %}
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
</nav>
|
|
</details>
|
|
</div>
|
|
{% endif %}
|