<.drawer class="z-10" selector_id="my-drawer">
  <:drawer_content>
    <!-- Page content here -->
    <label for="my-drawer" class="btn btn-primary drawer-button">Open drawer</label>
  </:drawer_content>
  <:drawer_side>
    <.menu class="bg-base-200 text-base-content min-h-full w-80 p-4">
      <!-- Sidebar content here -->
      <:item><a>Sidebar Item 1</a></:item>
      <:item><a>Sidebar Item 2</a></:item>
    </.menu>
  </:drawer_side>
</.drawer>

<.drawer class="h-56 lg:drawer-open" selector_id="my-drawer-2">
  <:drawer_content class="flex flex-col items-center justify-center">
    <!-- Page content here -->
    <label for="my-drawer-2" class="btn btn-primary drawer-button lg:hidden">
      Open drawer
    </label>
  </:drawer_content>
  <:drawer_side class="h-full absolute">
    <.menu class="bg-base-200 text-base-content min-h-full w-80 p-4">
      <!-- Sidebar content here -->
      <:item><a>Sidebar Item 1</a></:item>
      <:item><a>Sidebar Item 2</a></:item>
    </.menu>
  </:drawer_side>
</.drawer>

<.drawer class="z-10" end selector_id="my-drawer-4">
  <:drawer_content>
    <!-- Page content here -->
    <label for="my-drawer-4" class="drawer-button btn btn-primary">Open drawer</label>
  </:drawer_content>
  <:drawer_side>
    <.menu class="bg-base-200 text-base-content min-h-full w-80 p-4">
      <!-- Sidebar content here -->
      <:item><a>Sidebar Item 1</a></:item>
      <:item><a>Sidebar Item 2</a></:item>
    </.menu>
  </:drawer_side>
</.drawer>