edge-components

Drawer: Navbar Desktop 

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

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