{# @description The sticky app header: site icon and breadcrumb trail leading, actions trailing. #}
{# @prop :sticky:boolean | description:"Whether the header sticks to the top of the viewport on scroll." #}
{# @prop class:text | description:"Background classes; defaults to layout.navbar.class." #}
{# @slot:above — Content placed above the navbar row. #}
{# @slot:below — Content placed below the navbar row. #}
{# @slot The navbar row. — Left empty, the header draws <c-app.navbar /> itself. #}
{# @slot:tray — Content placed after the navbar row, e.g. a search tray. #}
<c-vars :sticky="mvp_config.layout.navbar.sticky" :class="mvp_config.layout.navbar.class" />
{# The scroll handler writes to the layout store (assets/js/layout.js) #}
{# instead of local component state, so other regions can read whether #}
{# the header has scrolled. #}
<div class="mvp-header w-full {{ class }}{% if sticky %} sticky z-10 top-0{% endif %}"
     {% if sticky %}x-data @scroll.window="$store.mvp.header.stuck = window.scrollY > 0" :class="{ 'shadow-xs': $store.mvp.header.stuck }"{% endif %}>
  {{ above }}
  {% if slot.strip %}
    {{ slot }}
  {% else %}
    <c-app.navbar />
  {% endif %}
  {{ tray }}
  {{ below }}
</div>