edge-components

Drawer: Mobile 

<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 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>
 
@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

Drawer

Doc : daisyui drawer

Drawer sidebar can be visible by default on large screens or it can be toggleable on both large and small screens.

⚠️ Unlike the native daisyUI, AlpineJS is used to control the display

Class name Type
drawer Component Container element
drawer-toggle Component For checkbox element that controls the drawer
drawer-content Component The content container
drawer-side Component The sidebar container
drawer-overlay Component The label covers the content when drawer is open
drawer-mobile Modifier Makes drawer to open/close on mobile but will be always visible on desktop
drawer-end Modifier puts drawer to the right