Drawers can be used to slide in a menu or other content from the side of the screen. They can be used to provide additional navigation or to display additional information.
In a real app, drawers cover the whole viewport. The examples below wrap
each drawer in a fixed-height box with [contain:layout], isolate, and
overflow-hidden so the drawers open inside their preview boxes instead
of the whole screen.
The basic drawer slides in from the left side of the screen.
.w-full.h-48.isolate.overflow-hidden{ class: "[contain:layout]" }
= daisy_drawer do |drawer|
- drawer.with_sidebar do
.bg-base-100.p-4.w-40.h-48
Hello sidebar!
= daisy_button(tag_name: "label", css: "m-8 btn btn-primary", title: "Open Drawer", html: { for: drawer.id })
The right drawer slides in from the right side of the screen.
.w-full.h-48.isolate.overflow-hidden{ class: "[contain:layout]" }
= daisy_drawer(css: "drawer-end") do |drawer|
- drawer.with_sidebar do
.w-48.bg-base-100.p-4.h-48
Right sidebar!
= daisy_button(tag_name: "label", css: "m-8 btn btn-primary", title: "Open Drawer", html: { for: drawer.id })
The advanced drawer slides in from the left side of the screen and has multiple ways to close it, along with some extra styling.
.w-full.h-48.isolate.overflow-hidden{ class: "[contain:layout]" }
= daisy_drawer do |drawer|
- drawer.with_sidebar do
.bg-base-100.p-4.h-48
.flex.items-center.justify-between.gap-8
%h1.text-lg
Sidenav Menu
= daisy_button(tag_name: "label", css: "btn-sm btn-ghost", html: { for: drawer.id }) do
= loco_icon(icon: "x-circle", css: "size-4")
%ul.mt-4
%li= link_to "Home", "/", class: "link-hover"
%li= link_to "API Docs", "/api-docs", class: "link-hover", target: "_blank"
%li= link_to "GitHub", "https://github.com/profoundry-us/loco_motion", class: "link-hover", target: "_blank"
.flex.items-center.justify-center.h-48
%div
%p.my-4
Click the button below to open the drawer!
= daisy_button(tag_name: "label", css: "btn btn-primary", title: "Open Drawer", html: { for: drawer.id })
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.