A panel that slides in from the edge of the screen — left for nav, right for filters/cart/details. Modal-but-spatial.
A panel that slides in from the edge of the viewport, covering part of the page while leaving the rest dimmed. Two common uses: a left drawer for navigation (especially on mobile, replacing or augmenting the hamburger menu) and a right drawer for contextual actions — filters, cart, notification details, or settings. Implemented natively as <dialog> in modern browsers, or as a div + JS for full control.
Two elements: a full-screen overlay (semi-transparent black, blocks page interaction) and the panel itself. Panel is position: fixed; top: 0; bottom: 0; right: 0; width: 360px (or left: 0 for left drawer). It starts off-screen at transform: translateX(100%) and transitions to translateX(0) when opened. Click overlay or press Escape to close. Lock body scroll while open. The panel typically contains a header (title + close), a scrollable body, and a sticky footer with primary action.
Try both drawers. Esc or click outside to close.
Two variants: a left nav drawer (tap the hamburger above), and a right contextual drawer (tap the buttons below).
Build a slide-out drawer system with TWO variants: a left navigation drawer and a right contextual drawer (cart/filters). Common pieces: (1) An overlay div position:fixed inset:0 background:rgba(0,0,0,0.4), opacity:0 pointer-events:none default — adds .open class to fade in and become interactive. (2) The drawer panel: position:fixed top:0 bottom:0, width:min(360px, 92%), white background, 1px edge border. RIGHT variant: right:0, transform:translateX(100%) default, on .open translateX(0). LEFT variant: left:0, transform:translateX(-100%) default, on .open translateX(0). Both transition:transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) with a deep edge box-shadow. Panel layout: hairline-bordered header (title + close X button), flex-1 scrollable body containing grouped link sections (small mono group label + indented link rows with icon + label, hover background), and a footer (account avatar + name, or cart subtotal + checkout button). Open/close behavior: clicking a trigger toggles .open on overlay + panel, locks body scroll. Click on overlay or press Escape closes. Different triggers ([data-open="left"] or [data-open="right"]) open the appropriate panel.