{% load flex_menu %}
<c-vars bg="bg-base-200"
        brand-url="/"
        class
        menu="AppMenu"
        :collapse="mvp_config.layout.sidebar.collapse"
        :title="mvp_config.layout.sidebar.title"
        :boost="mvp_config.layout.sidebar.boost" />
{% comment %}
  hx-boost sits on the sidebar root so every link inside it inherits the
  boost — menu items, the brand link and the footer actions alike. htmx
  swaps the body's innerHTML, and the drawer lives inside the body, so a
  boosted click renders a fresh drawer in its server-side (closed) state
  and the mobile overlay closes on its own.
{% endcomment %}
<aside class="mvp-sidebar flex flex-col min-h-full items-start transition-[width] duration-200 {% if collapse == 'icons' %}mvp-sidebar--icons is-drawer-close:w-16 is-drawer-open:w-65{% else %}is-drawer-close:w-0 is-drawer-close:overflow-hidden is-drawer-open:w-65{% endif %} {{ bg }} {{ class }}"
       {% if boost %}hx-boost="true"{% endif %}
       {{ attrs }}>
  <c-app.sidebar.header link="{{ brand_url }}" :bg="bg" :title="title" />
  <nav class="flex w-full">
    {% render_menu menu renderer="sidebar" %}
  </nav>
  <c-app.sidebar.footer :bg="bg" />
</aside>