local-it/mitgliederverwaltung
local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 57 Pull requests 3 Projects 2 Releases 5 Packages 1 Activity Actions
mitgliederverwaltung/docs/daisyui-drawer-pattern.md

1.1 KiB
Raw Blame History

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.