21 lines
1.1 KiB
Markdown
21 lines
1.1 KiB
Markdown
# 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.
|