{% load i18n mvp %}
{% firstof mvp_config.layout.sidebar.breakpoint "lg" as bp %}
{% firstof mvp_config.layout.sidebar.collapse "offcanvas" as collapse_mode %}
<div class="navbar px-3 w-full backdrop-blur 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 bp collapse_mode %}">
      <c-icon name="sidebar-left" />
    </label>
    <a href="/">
      {% if icon %}
        <c-brand.icon size="sm" />
      {% endif %}
      <div class="text-2xl hidden lg:flex items-center">{{ request.site.name }}</div>
      <div class="lg:hidden">
        <c-brand.logo max-height="1.5rem" />
      </div>
    </a>
  </div>
  <div class="navbar-end gap-1">
    {{ right }}
    {% for widget in mvp_config.layout.navbar.end %}
      <c-component :is="widget" />
    {% endfor %}
  </div>
</div>