# Sidebar Drawer Pattern (project note)

The app's responsive sidebar uses DaisyUI's drawer in the **combined
mobile-overlay + desktop-persistent** configuration. The drawer container,
the `mobile-drawer` toggle checkbox and the mobile header live in the `app/1`
layout (`lib/mv_web/components/layouts.ex`); the sidebar body and the
tap-to-close `drawer-overlay` live in `lib/mv_web/components/layouts/sidebar.ex`.

## Chosen pattern

- `drawer lg:drawer-open` on the container — sidebar is a slide-in overlay on
  mobile (`< lg`, 1024px) and permanently visible on desktop (`≥ lg`).
- A hidden checkbox (`class="drawer-toggle"`, `id="mobile-drawer"`) holds the
  open/close state; `<label for="mobile-drawer">` elements toggle it. Pure CSS,
  no JavaScript; the native checkbox provides keyboard accessibility.
- The mobile hamburger toggle and the `drawer-overlay` (tap-to-close) are
  marked `lg:hidden`, so on desktop there is no toggle and no overlay — main
  content shifts to make room for the fixed-width sidebar.

This is DaisyUI's standard recommended approach for responsive sidebars; see
the DaisyUI drawer docs for the full component API if extending it.