• Components
  • Drawer
Drawer required alpineJS

Drawer 

@jrmc.drawer()
  @jrmc.drawer.content()
    @!jrmc.button({ text: 'Open drawer', ...$context.event.open })
  @end

  @jrmc.drawer.side()
    <ul class="menu text-base-content">
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  @end
@end
<div class="drawer" x-data="{ open: false }" @click.outside="open = false">
  <input type="checkbox" :checked="open" class="drawer-toggle" />
  <div class="drawer-content">
<button @click="open = true" class="btn">
  Open drawer
</button>
</div>
<div class="drawer-side z-50 ">
  <label class="drawer-overlay" @click="open = false"></label>
  <div class="overflow-y-auto h-full overflow-y-auto p-4 h-full w-80 bg-base-100">
    <ul class="menu text-base-content">
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>
</div>

Drawer mobile

This example only works on mobile

@jrmc.drawer({ class: 'drawer-mobile' })
  @jrmc.drawer.content()
    @!jrmc.button({ text: 'Open drawer', class: 'lg:hidden', ...$context.event.open })
  @end

  @jrmc.drawer.side()
    <ul class="menu text-base-content">
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  @end
@end
<div class="drawer drawer-mobile" x-data="{ open: false }" @click.outside="open = false">
  <input type="checkbox" :checked="open" class="drawer-toggle" />
  <div class="drawer-content">
<button @click="open = true" class="btn lg:hidden">
  Open drawer
</button>
</div>
<div class="drawer-side z-50 ">
  <label class="drawer-overlay" @click="open = false"></label>
  <div class="overflow-y-auto h-full overflow-y-auto p-4 h-full w-80 bg-base-100">
    <ul class="menu text-base-content">
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>
</div>

Drawer navbar desktop

Navbar Title
Content 
@jrmc.drawer()
  @jrmc.drawer.content()

    <!-- Navbar -->
    <div class="w-full navbar bg-base-300">
      <div class="flex-none lg:hidden">
        @jrmc.button({ class: 'btn-square btn-ghost', ...$context.event.open })
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        @end
      </div>
      <div class="flex-1 px-2 mx-2">Navbar Title</div>
      <div class="flex-none hidden lg:block">
        <ul class="menu menu-horizontal">
          <!-- Navbar menu content here -->
          <li><a>Navbar Item 1</a></li>
          <li><a>Navbar Item 2</a></li>
        </ul>
      </div>
    </div>
    <!-- Page content here -->
    Content

  @end

  @jrmc.drawer.side()
    <ul class="menu text-base-content">
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  @end
@end
<div class="drawer" x-data="{ open: false }" @click.outside="open = false">
  <input type="checkbox" :checked="open" class="drawer-toggle" />
  <div class="drawer-content">

    <!-- Navbar -->
    <div class="w-full navbar bg-base-300">
      <div class="flex-none lg:hidden"><button @click="open = true" class="btn btn-square btn-ghost">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
      </div>
      <div class="flex-1 px-2 mx-2">Navbar Title</div>
      <div class="flex-none hidden lg:block">
        <ul class="menu menu-horizontal">
          <!-- Navbar menu content here -->
          <li><a>Navbar Item 1</a></li>
          <li><a>Navbar Item 2</a></li>
        </ul>
      </div>
    </div>
    <!-- Page content here -->
    Content

</div>
<div class="drawer-side z-50 ">
  <label class="drawer-overlay" @click="open = false"></label>
  <div class="overflow-y-auto h-full overflow-y-auto p-4 h-full w-80 bg-base-100">
    <ul class="menu text-base-content">
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>
</div>

Drawer right 

@jrmc.drawer({ class: 'drawer-end' })
  @jrmc.drawer.content()
    @!jrmc.button({ text: 'Open drawer', ...$context.event.open })
  @end

  @jrmc.drawer.side()
    <ul class="menu text-base-content">
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  @end
@end
<div class="drawer drawer-end" x-data="{ open: false }" @click.outside="open = false">
  <input type="checkbox" :checked="open" class="drawer-toggle" />
  <div class="drawer-content">
<button @click="open = true" class="btn">
  Open drawer
</button>
</div>
<div class="drawer-side z-50 ">
  <label class="drawer-overlay" @click="open = false"></label>
  <div class="overflow-y-auto h-full overflow-y-auto p-4 h-full w-80 bg-base-100">
    <ul class="menu text-base-content">
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>
</div>

Drawer color 

@jrmc.drawer()
  @jrmc.drawer.content()
    @!jrmc.button({ text: 'Open drawer', ...$context.event.open })
  @end

  @jrmc.drawer.side({ class: 'bg-primary' })
    <ul class="menu text-base-content">
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  @end
@end
<div class="drawer" x-data="{ open: false }" @click.outside="open = false">
  <input type="checkbox" :checked="open" class="drawer-toggle" />
  <div class="drawer-content">
<button @click="open = true" class="btn">
  Open drawer
</button>
</div>
<div class="drawer-side z-50 ">
  <label class="drawer-overlay" @click="open = false"></label>
  <div class="overflow-y-auto h-full bg-primary">
    <ul class="menu text-base-content">
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>
</div>

Drawer size 

@jrmc.drawer()
  @jrmc.drawer.content()
    @!jrmc.button({ text: 'Open drawer', ...$context.event.open })
  @end

  @jrmc.drawer.side({ class: ['w-3/4', 'bg-base-100'] })
    <ul class="menu text-base-content">
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  @end
@end
<div class="drawer" x-data="{ open: false }" @click.outside="open = false">
  <input type="checkbox" :checked="open" class="drawer-toggle" />
  <div class="drawer-content">
<button @click="open = true" class="btn">
  Open drawer
</button>
</div>
<div class="drawer-side z-50 ">
  <label class="drawer-overlay" @click="open = false"></label>
  <div class="overflow-y-auto h-full w-3/4 bg-base-100">
    <ul class="menu text-base-content">
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>
</div>