{# @description The sidebar's top strip: brand icon, optional title, collapse toggle. #}
{# @prop link:text | default:"/" | description:"URL the brand mark links to." #}
{# @prop bg:text | default:"bg-base-200" | description:"Background class." #}
{# @prop :title:text | description:"Title text shown beside the brand icon." #}
{% load i18n %}
<c-vars link="/" bg="bg-base-200" :title="mvp_config.layout.sidebar.title" />
<div class="{{ bg }} mvp-sidebar-header sticky top-0 z-20 flex w-full items-center justify-between gap-2 px-3 py-2">
  <a href="{{ link }}"
     aria-label="{% trans "Home" %}"
     class="mvp-sidebar-brand flex min-w-0 items-center gap-2">
    <span class="mvp-sidebar-brand-icon flex size-10 shrink-0 items-center justify-center">
      <c-brand.icon max-height="1.5rem" class="size-9 object-contain" />
    </span>
    {% if title %}<span class="mvp-sidebar-title mvp-rail-hide truncate font-semibold">{{ title }}</span>{% endif %}
  </a>
  <label for="mvp-app-toggle"
         aria-label="{% trans "Toggle sidebar" %}"
         class="mvp-sidebar-toggle btn btn-ghost btn-square">
    <c-icon name="sidebar-left" />
  </label>
</div>