{% load i18n mvp %}
<c-vars :breakpoint="mvp_config.layout.sidebar.breakpoint"
        :collapse="mvp_config.layout.sidebar.collapse" />
<div class="navbar px-3 w-full transition-shadow duration-100 print:hidden">
  <div class="navbar-start gap-1 ">
    <label for="mvp-app-toggle"
           aria-label="{% trans "Open sidebar" %}"
           class="btn btn-ghost btn-square {% sidebar_navbar_toggle_class breakpoint collapse %}">
      <c-icon name="menu" />
    </label>
    <a href="/">
      {% comment %} <c-brand.icon size="sm" /> {% endcomment %}
      <div class="text-2xl hidden lg:flex items-center">{{ request.site.name }}</div>
      {% comment %} <div class="lg:hidden">
        <c-brand.logo max-height="1rem" />
      </div> {% endcomment %}
    </a>
  </div>
  <div class="navbar-end gap-3">
    {{ right }}
    {# Mobile and desktop widget lists (issue #176) render as two separate #}
    {# regions toggled by Tailwind's responsive display utilities, matching #}
    {# the "hidden lg:flex" convention already used above for the site name. #}
    {# A display:none region is dropped from the accessibility tree by every #}
    {# evergreen browser/screen-reader pairing, so the hidden copy needs no #}
    {# aria-hidden of its own. #}
    <div id="mvp-navbar-widgets-mobile" class="flex lg:hidden items-center gap-3">
      {% for widget in mvp_config.layout.navbar.mobile.end %}
        <c-component :is="widget" />
      {% endfor %}
    </div>
    <div id="mvp-navbar-widgets-desktop" class="hidden lg:flex items-center gap-3">
      {% for widget in mvp_config.layout.navbar.desktop.end %}
        <c-component :is="widget" />
      {% endfor %}
    </div>
  </div>
</div>