AI Drawer Generator.

Create a right-edge modal slide-over for settings: 420px wide, sliding from the right over 250ms ease-out with a 40% black overlay fading behind it. role="dialog" with aria-modal="true" and aria-labelledby to the title, focus moves to the close button on open, Tab is trapped inside, Escape and overlay click both close and restore focus to the trigger. Lock body scroll with scrollbar-width compensation so the page does not shift. Structure: header with title and close icon, scrollable body with three labeled sections, sticky footer with Cancel and Save pinned at the bottom. On viewports under 640px, the drawer is full-width stopping 24px short of the left edge so the page peeks through. Animate transform only, honor prefers-reduced-motion, close on route change, and unsaved-changes guard that asks before closing while the form is dirty.

Create a non-modal inspector drawer docked to the right on desktop: 400px wide, part of the layout flow rather than overlaying — it slides in and the adjacent content reflows rather than dimming. No overlay, no focus trap, no scroll lock; the table beside it remains fully interactive, and clicking a different row updates the inspector content in place without closing. Escape does not close this panel — only its explicit close button or a selection change does. Include a small header with the item name and a close icon, a scrollable details body, and two quick actions. On mobile it degrades to a bottom sheet covering 70% height with a drag handle, snap points at 70% and 95%, and swipe-down to dismiss. Announce content changes with aria-live polite on the panel title.

Create a mobile navigation drawer that opens from a hamburger button below 768px: full-height, 85% viewport width anchored left, sliding in over 200ms with a 40% overlay. Contains the same link list as the desktop sidebar plus the primary action button, with the current route marked by aria-current="page" and a tinted background. Lock body scroll while open, trap focus, close on Escape, overlay tap, and — most importantly — on every link tap before the route change, with focus returned to the hamburger. Support swipe-left to dismiss and add a subtle active-route indicator bar on the left of the current link. Below the links add a secondary group for account and logout. Prevent the drawer from rendering at all on desktop viewports so no hidden duplicate of the nav exists in the DOM.

Create a bottom-sheet drawer for mobile: rises from the bottom edge with a 150ms ease-out, rounded top corners, and a 36px drag-handle pill centered at the top. Modal with a 40% overlay, focus trap, Escape and overlay-tap to close, body scroll locked with overscroll containment. Two snap points at 50% and 90% of viewport height with the handle draggable between them and swipe-down past 50% dismissing with velocity awareness. Content: a filter form with a sticky header showing a live result count and a sticky bottom row with Reset and Apply buttons. While dragging, pause the sheet body scroll and resume it at a snap point; respect reduced motion by snapping without animation. On screens wider than 768px, offer a fallback rendering as a right-edge slide-over instead.