{# App menu in the top bar (PYVELM_MENU_LAYOUT=apps, md+). Dropdowns start
   closed; click the section label to toggle. Only one section's
   dropdown is open at a time — the shared ``openKey`` lifts state into
   the nav so opening a new section auto-closes the previous one.
   Click outside the nav also resets the state. Navigation reloads the
   page. #}
<nav class="pv-app-menu flex-1 min-w-0 flex flex-wrap items-center gap-1 overflow-visible"
     x-data="{ openKey: '' }"
     @click.outside="openKey = ''"
     @keydown.escape.window="openKey = ''"
     aria-label="{% if menu_active_root %}{{ menu_active_root.label }} menu{% else %}App menu{% endif %}">
    {% if menu_active_root and not menu_secondary %}
    <span class="shrink-0 text-sm font-semibold text-heading truncate max-w-[12rem]">
        {{ menu_active_root.label }}
    </span>
    {% endif %}
    {% if menu_secondary %}
    {% for item in menu_secondary %}
        {% if item.children %}
            {% set key = 'sec-' ~ loop.index %}
            <div class="relative shrink-0">
                <button type="button"
                        @click="openKey = openKey === '{{ key }}' ? '' : '{{ key }}'"
                        class="flex items-center gap-1 px-2.5 py-1.5 rounded-md text-sm whitespace-nowrap
                               {% if item.active %}bg-brand-soft text-fg-brand-strong font-medium{% else %}
                               text-body hover:text-heading hover:bg-neutral-secondary{% endif %}"
                        :aria-expanded="(openKey === '{{ key }}').toString()">
                    {{ item.label }}
                    <svg class="w-3 h-3 text-body-subtle transition-transform"
                         :class="{ 'rotate-180': openKey === '{{ key }}' }"
                         fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"
                         aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
                    </svg>
                </button>
                <div x-show="openKey === '{{ key }}'"
                     x-cloak
                     x-transition
                     class="absolute left-0 top-full z-50 mt-1 min-w-[10rem] rounded-lg
                            bg-neutral-primary border border-default shadow-lg py-1">
                    {% for child in item.children %}
                        <a href="{{ child.href }}" data-nav-link
                           class="block px-3 py-1.5 text-sm whitespace-nowrap
                                  {% if child.active %}text-fg-brand font-medium bg-brand-softer{% else %}
                                  text-body hover:bg-neutral-secondary hover:text-heading{% endif %}">
                            {{ child.label }}
                        </a>
                    {% endfor %}
                </div>
            </div>
        {% else %}
            <a href="{{ item.href }}" data-nav-link
               class="shrink-0 px-2.5 py-1.5 rounded-md text-sm whitespace-nowrap
                      {% if item.active %}bg-brand-soft text-fg-brand-strong font-medium{% else %}
                      text-body hover:text-heading hover:bg-neutral-secondary{% endif %}">
                {{ item.label }}
            </a>
        {% endif %}
    {% endfor %}
    {% endif %}
</nav>