Drawer & Sheet

Design two mobile overlay components: a side drawer and a bottom sheet. Treat them as distinct tools, not variants of the same panel. The drawer is for app-level navigation or persistent options; the sheet is for context-specific actions, settings, or short details tied to the current screen.

Show the drawer sliding in from the left with a clear header, grouped links, and a visible dismissal affordance. Include the collapsed state, the open state, and what happens when the user taps outside the panel. Keep the main screen visible behind it so the navigation feels layered, not like a full page replacement.

Design the bottom sheet as a shorter, task-focused surface that rises from the bottom. It should support a title, brief supporting copy or controls, and one primary action when needed. Show how it handles longer content, dragging, and partial expansion without losing the sense of what screen it belongs to.

Use one shared visual language across both components, but let their structure communicate different intent. The result should make it obvious when the user is navigating, and when they are making a quick decision in context.

Highlight usability by creating a Drawer that's easily accessible and a Sheet that complements the content without overwhelming it. Enliven the experience with subtle animations and responsive design.