<aside class="cab-sidebar" :class="{ 'cab-sidebar--collapsed': sidebarCollapsed }">

  {# Logo #}
  <div class="cab-sidebar__logo d-flex align-items-center px-3" style="height: var(--cab-topbar-height); flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.08);">
    <span class="bi bi-grid-3x3-gap-fill fs-5" style="color: var(--cab-primary);"></span>
    <span class="cab-sidebar__title ms-2 fw-semibold text-white" style="font-size: 1rem; white-space: nowrap;">CabinetApp</span>
  </div>

  {# Sub-navigation within current section — filled by each section template #}
  <nav class="cab-nav flex-grow-1 py-2">
    <ul class="list-unstyled mb-0">
      {% block sidebar_nav %}{% endblock %}
    </ul>
  </nav>

  {# Bottom: settings + collapse #}
  <div style="border-top: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;">
    <a href="#"
       class="cab-nav__item d-flex align-items-center px-3 py-2 mx-2 rounded"
       style="color: var(--cab-sidebar-text); transition: background 0.15s;">
      <span class="bi bi-gear fs-5 flex-shrink-0"></span>
      <span class="cab-nav__label ms-3" style="white-space: nowrap;">Settings</span>
    </a>
    <div class="px-3 py-2">
      <button @click="sidebarCollapsed = !sidebarCollapsed"
              class="btn btn-sm d-flex align-items-center justify-content-center w-100"
              style="background: var(--cab-sidebar-hover-bg); color: var(--cab-sidebar-text); border: none;">
        <span class="bi" :class="sidebarCollapsed ? 'bi-chevron-right' : 'bi-chevron-left'"></span>
        <span class="cab-nav__label ms-2" style="white-space: nowrap; font-size: 0.8rem;">Collapse</span>
      </button>
    </div>
  </div>

</aside>
