benjaminpalko/.opencode/skills/daisyui/components/drawer.md

drawer

Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page

drawer docs

Class names

• component: drawer
• part: drawer-toggle, drawer-content, drawer-side, drawer-overlay, drawer-button
• placement: drawer-end
• modifier: drawer-open
• variant: is-drawer-open:, is-drawer-close:

Syntax

<div class="drawer {MODIFIER}">
	<input id="my-drawer" type="checkbox" class="drawer-toggle" />
	<div class="drawer-content">{CONTENT}</div>
	<div class="drawer-side">{SIDEBAR}</div>
</div>

where {CONTENT} can be navbar, site content, footer, etc and {SIDEBAR} can be a menu like:

<ul class="menu bg-base-100 text-base-content min-h-full w-80 p-4">
	<li><a>Item 1</a></li>
	<li><a>Item 2</a></li>
</ul>

To open/close the drawer, use a label that points to the drawer-toggle input:

<label for="my-drawer" class="btn drawer-button">Open/close drawer</label>

Example: This sidebar is always visible on large screen, can be toggled on small screen:

<div class="drawer lg:drawer-open">
	<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
	<div class="drawer-content flex flex-col items-center justify-center">
		<!-- Page content here -->
		<label for="my-drawer-3" class="btn drawer-button lg:hidden"> Open drawer </label>
	</div>
	<div class="drawer-side">
		<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"></label>
		<ul class="menu bg-base-200 min-h-full w-80 p-4">
			<!-- Sidebar content here -->
			<li><button>Sidebar Item 1</button></li>
			<li><button>Sidebar Item 2</button></li>
		</ul>
	</div>
</div>

Example: This sidebar is always visible. When it's close we only see icons, when it's open we see icons and text

<div class="drawer lg:drawer-open">
	<input id="my-drawer-4" type="checkbox" class="drawer-toggle" />
	<div class="drawer-content">
		<!-- Page content here -->
	</div>
	<div class="drawer-side is-drawer-close:overflow-visible">
		<label for="my-drawer-4" aria-label="close sidebar" class="drawer-overlay"></label>
		<div
			class="is-drawer-close:w-14 is-drawer-open:w-64 bg-base-200 flex min-h-full flex-col items-start"
		>
			<!-- Sidebar content here -->
			<ul class="menu w-full grow">
				<!-- list item -->
				<li>
					<button class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Homepage">
						{ICON_HERE}
						<span class="is-drawer-close:hidden">Homepage</span>
					</button>
				</li>
				<!-- list item -->
				<li>
					<button class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Settings">
						{ICON_HERE}
						<span class="is-drawer-close:hidden">Settings</span>
					</button>
				</li>
			</ul>
			<!-- button to open/close drawer -->
			<div class="is-drawer-close:tooltip is-drawer-close:tooltip-right m-2" data-tip="Open">
				<label
					for="my-drawer-4"
					class="btn btn-ghost btn-circle drawer-button is-drawer-open:rotate-y-180"
				>
					{ICON_HERE}
				</label>
			</div>
		</div>
	</div>
</div>

Rules

• {MODIFIER} is optional and can have one of the modifier/placement class names
• id is required for the drawer-toggle input. change my-drawer to a unique id according to your needs
• lg:drawer-open can be used to make sidebar visible on larger screens
• drawer-toggle is a hidden checkbox. Use label with "for" attribute to toggle state
• if you want to open the drawer when a button is clicked, use <label for="my-drawer" class="btn drawer-button">Open drawer</label> where my-drawer is the id of the drawer-toggle input
• when using drawer, every page content must be inside drawer-content element. for example navbar, footer, etc should not be outside of drawer