{% load i18n mvp %}
<c-vars id :breakpoint="mvp_config.layout.sidebar.breakpoint" />
{% sidebar_has_breakpoint breakpoint as persistent %}
{% comment %}
  Open-state persistence is desktop-only: the persistent sidebar remembers
  open/collapsed across reloads (desktopOpen), while the overlay drawer
  (below the breakpoint, or breakpoint="never") is transient and always
  starts closed. $watch only writes back at/above the breakpoint, so
  toggling the mobile overlay never clobbers the saved desktop state.
{% endcomment %}
<div id="{{ id }}"
     class="drawer {% sidebar_breakpoint_class breakpoint %}"
     {% if persistent %}
     x-data="{ mq: window.matchMedia('(min-width: {% breakpoint_px breakpoint %}px)'), open: false, desktopOpen: $persist(true).as('{{ id }}-drawer-open') }"
     x-init="open = mq.matches && desktopOpen; $watch('open', v => { if (mq.matches) desktopOpen = v })"
     {% else %}
     x-data="{ open: false }"
     {% endif %}
     {{ attrs }}>
  <input id="{{ id }}-toggle"
         type="checkbox"
         x-model="open"
         class="drawer-toggle" />
  <div class="drawer-side is-drawer-close:overflow-visible z-40">
    <label for="{{ id }}-toggle"
           aria-label="{% trans "Close sidebar" %}"
           class="drawer-overlay"></label>
    {{ sidebar }}
  </div>
  <div class="drawer-content">{{ slot }}</div>
</div>