<.dm_drawer id="drawer-single-default-left" open position="left">
  <:header>Navigation</:header>
  Drawer content goes here.
  <:footer>Footer actions</:footer>
</.dm_drawer>

<.dm_drawer id="drawer-single-right-position" open position="right">
  <:header>Settings</:header>
  Settings panel content.
</.dm_drawer>

<.dm_drawer id="drawer-single-modal-drawer" open modal>
  <:header>Modal Drawer</:header>
  This drawer has a backdrop overlay.
</.dm_drawer>

<.dm_drawer id="drawer-single-custom-width" open width="400px">
  <:header>Wide Drawer</:header>
  This drawer is 400px wide.
</.dm_drawer>

<.dm_drawer id="drawer-single-with-label" label="Navigation sidebar" open>
  <:header>Accessible Drawer</:header>
  Inspect element to see aria-label on the drawer container.
</.dm_drawer>

<.dm_drawer id="drawer-single-right-modal" open position="right" width="320px" modal>
  <:header>Filters</:header>
  Apply filters to narrow your results.
  <:footer><button type="button" class="btn btn-primary btn-sm">Apply</button></:footer>
</.dm_drawer>