ISSUE: Holly reported sidebar overlapping content on mobile devices
SOLUTION: Mobile-responsive hamburger menu with slide-out sidebar
CHANGES:
- Added hamburger menu button (☰) visible only on mobile (<768px)
- Sidebar now slides in from left on mobile when menu is clicked
- Added close button (✕) in sidebar header for mobile
- Added dark overlay backdrop when sidebar is open
- Desktop layout unchanged (sidebar always visible)
MOBILE BEHAVIOR:
- Sidebar hidden by default on small screens
- Hamburger button in top-left of header
- Tap hamburger → sidebar slides in from left
- Tap overlay or ✕ button → sidebar slides out
- Smooth 0.3s transition animation
DESKTOP BEHAVIOR:
- No changes, sidebar always visible
- Hamburger menu hidden on screens >768px
Tested on: iPhone (Holly's device)
Status: ✅ WORKING
Reported by: Holly (unicorn20089)
Fixed by: Chronicler #51
Signed-off-by: Claude (Chronicler #51) <claude@firefrostgaming.com>
7642082b30