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.
The relative / absolute and the h-48 classes allow the drawer to
render properly inside the example preview box 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.
Drawers are not designed to work with multiple on the page, so this example behaves a bit weirdly on desktop, showing both drawers.
.w-full.h-48
= daisy_drawer(css: "drawer-end") do |drawer|
- drawer.with_sidebar do
- # The calc accounts for the top nav bar
.w-48.bg-base-100.mt-16.p-4{ class: "h-[calc(100%-4rem)]" }
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.
.relative.w-full.h-48
= daisy_drawer do |drawer|
- drawer.with_sidebar(css: "absolute h-48") 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
= hero_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.