Drawer

For test drawer below, we add script like this to control classNames dynamically:

function toggleDrawer(name) {
  let element = document.getElementById(`drawer-${name}`);
  if (element.classList.contains('show')) {
    element.classList.remove('show');
  } else {
    element.classList.add('show');
  }
}

Position

Left

<div>
  <label class="btn solid success w-fit" onclick="toggleDrawer('left')">Open left</label>
  <label class="drawer-overlay" onclick="toggleDrawer('left')"></label>
  <div class="drawer left" id="drawer-left">
    <div class="content flex flex-col h-full">
      <label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('left')">✕</label>
      <h2 class="text-xl">Your content</h2>
    </div>
  </div>
</div>

Open left

Your content

Right

<div>
  <label class="btn solid success w-fit" onclick="toggleDrawer('right')">Open right</label>
  <label class="drawer-overlay" onclick="toggleDrawer('right')"></label>
  <div class="drawer right" id="drawer-right">
    <div class="content flex flex-col h-full">
      <label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('right')">✕</label>
      <h2 class="text-xl">Your content</h2>
    </div>
  </div>
</div>

Open right

Your content

Top

<div>
  <label class="btn solid success w-fit" onclick="toggleDrawer('top')">Open top</label>
  <label class="drawer-overlay" onclick="toggleDrawer('top')"></label>
  <div class="drawer top" id="drawer-top">
    <div class="content flex flex-col h-full">
      <label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('top')">✕</label>
      <h2 class="text-xl">Your content</h2>
    </div>
  </div>
</div>

Open top

Your content

Bottom

<div>
  <label class="btn solid success w-fit" onclick="toggleDrawer('bottom')">Open bottom</label>
  <label class="drawer-overlay" onclick="toggleDrawer('bottom')"></label>
  <div class="drawer bottom" id="drawer-bottom">
    <div class="content flex flex-col h-full">
      <label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('bottom')">✕</label>
      <h2 class="text-xl">Your content</h2>
    </div>
  </div>
</div>

Open bottom

Your content

Enhanced functions

Overlay click not close

<div>
  <label class="btn solid danger w-fit only-one-line" onclick="toggleDrawer('toggle-overlay-click-not-close')"
    >Overlay click not close</label
  >
  <label class="drawer-overlay"></label>
  <div class="drawer left" id="drawer-toggle-overlay-click-not-close">
    <div class="content flex flex-col h-full">
      <label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('toggle-overlay-click-not-close')"
        >✕</label
      >
      <h2 class="text-xl">Your content</h2>
    </div>
  </div>
</div>

Overlay click not close

Your content

No overlay

<div>
  <label class="btn solid danger w-fit only-one-line" onclick="toggleDrawer('no-overlay')">No overlay</label>
  <div class="drawer left" id="drawer-no-overlay">
    <div class="content flex flex-col h-full">
      <label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('no-overlay')">✕</label>
      <h2 class="text-xl">Your content</h2>
    </div>
  </div>
</div>

No overlay

Your content

Pause scroll

<div>
  <label class="btn solid danger w-fit only-one-line" onclick="toggleDrawer('pause-scroll')">Pause Scroll</label>
  <label class="drawer-overlay" onclick="toggleDrawer('pause-scroll')"></label>
  <div class="drawer left pause-scroll" id="drawer-pause-scroll">
    <div class="content flex flex-col h-full">
      <label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('pause-scroll')">✕</label>
      <h2 class="text-xl">Try to scroll the page 🦎</h2>
    </div>
  </div>
</div>

Pause Scroll

Try to scroll the page 🦎

Classes

Class Name	Description
drawer	Wrapper htmlFor drawer
show	Set at the element where has 'drawer' class name to control the opening of the drawer
drawer-overlay	Wrapper htmlFor overlay when drawer opened
pause-scroll	Set at the element where has 'drawer' class name to make the page non-scrollable when drawer opened
left	Set drawer position on left
right	Set drawer position on right
top	Set drawer position on top
bottom	Set drawer position on bottom

Divider Dropdown