🎯 Live Demo in Action
You are currently viewing the Drawer component demo! The responsive layout of this entire application IS the drawer component in action.
✓Responsive behavior: sidebar on desktop, drawer on mobile
✓Click outside drawer area to close (mobile/tablet only)
✓Hamburger menu toggle in header (visible on smaller screens)
✓Overlay mode with backdrop on smaller screens
✓Persistent mode on desktop (≥1024px width)
📱 Mobile-Specific Features
Note: The drawer overlay behavior is only visible when your screen width is smaller than 1024px.
- • Resize your browser window to be narrower to see the drawer in action
- • Use mobile dev tools in your browser to simulate mobile view
- • Hamburger menu (☰) appears in the header on small screens
- • Click the hamburger to toggle the drawer open/closed
- • Click outside the drawer content to close it
- • Press Escape to close the drawer
🖥️ Desktop vs Mobile Behavior
Desktop (≥1024px):
- • Persistent sidebar always visible
- • No overlay or backdrop
- • No hamburger menu button
- • Content adjusts to sidebar width
Mobile/Tablet (under 1024px):
- • Drawer overlay on top of content
- • Backdrop/overlay behind drawer
- • Hamburger menu in header
- • Click outside or ESC to close
Features Demonstrated:
- Responsive drawer component with mobile/desktop modes
- Persistent sidebar mode for larger screens
- Overlay drawer mode for smaller screens
- Click outside to close functionality
- Keyboard navigation (Escape key support)
- Smooth transitions and animations
- Integration with header hamburger menu toggle
- Proper z-index layering and backdrop handling