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