{# Nav-tree fragment — rendered by blog, consumed by all apps.
   Uses frag_app_name / frag_first_seg instead of request.path / app_name
   so the consuming app's context is reflected correctly.
   No hx-boost — cross-app nav links are full page navigations. #}
{% set _app_slugs = {
  'cart': cart_url('/'),
  'market': market_url('/'),
  'events': events_url('/'),
  'federation': federation_url('/'),
  'account': account_url('/'),
} %}
<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 %}
  {% call(item) scrolling_menu('menu-items-container', menu_items) %}
    {% set _href = _app_slugs.get(item.slug, blog_url('/' + item.slug + '/')) %}
    <a
      href="{{ _href }}"
      aria-selected="{{ 'true' if (item.slug == frag_first_seg or item.slug == frag_app_name) else 'false' }}"
      class="{{styles.nav_button_less_pad}}"
    >
      {% if item.feature_image %}
        <img src="{{ item.feature_image }}"
             alt="{{ item.label }}"
             class="w-8 h-8 rounded-full object-cover flex-shrink-0" />
      {% else %}
        <div class="w-8 h-8 rounded-full bg-stone-200 flex-shrink-0"></div>
      {% endif %}
      <span>{{ item.label }}</span>
    </a>
  {% endcall %}
</div>