Skip to content

🤖 Add mobile-responsive sidebar with overlay and hamburger menu #356

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Oct 21, 2025
Merged

🤖 Add mobile-responsive sidebar with overlay and hamburger menu #356

merged 2 commits into from
Oct 21, 2025
+162 −6

Conversation

kylecarbs
Copy link
Member

Makes the sidebar fully responsive on mobile devices with these improvements:

Changes

Mobile Sidebar UX

  • Sidebar becomes a slide-out overlay on mobile (≤768px) instead of pushing content
  • Hamburger menu button (☰) appears in top-left when sidebar is closed
  • Tapping outside the sidebar or the backdrop closes it automatically
  • Smooth slide animations for opening/closing
  • Auto-collapses by default on mobile viewports

Layout Improvements

  • App.tsx: Content takes full width on mobile; flex containers adapt
  • LeftSidebar.tsx: Fixed position overlay with backdrop and hamburger button
  • AIView.tsx: Chat and panels stack vertically on mobile; removed min-width constraints
  • RightSidebar.tsx: Full-width bottom panel on mobile when expanded

Touch Optimization

  • Larger tap targets (44x44px minimum) for buttons and interactive elements
  • Improved text size (15px base on mobile)
  • Prevented unwanted text size adjustments on orientation change
  • Better touch-action handling for responsive interactions

Testing

Typecheck passes. To test mobile view:

  1. Open dev tools (F12)
  2. Toggle device toolbar (Ctrl+Shift+M)
  3. Select a mobile device or set width to <768px
  4. Verify sidebar slides in/out with hamburger button
  5. Test tapping backdrop to close sidebar
  6. Check that content adapts properly

Generated with cmux

@kylecarbs
🤖 Add mobile-responsive sidebar with overlay and hamburger menu
9dd485c 
- Add responsive sidebar that becomes an overlay on mobile (≤768px)
- Add hamburger menu button visible only on mobile when sidebar collapsed
- Add backdrop overlay that closes sidebar on tap (mobile only)
- Auto-collapse sidebar by default on mobile viewports
- Update App, AIView, and RightSidebar layouts for mobile stacking
- Improve touch interactions with larger tap targets on mobile
- Add proper viewport handling and text size adjustment

UX improvements:
- Sidebar slides in/out with smooth animations on mobile
- Overlay provides visual focus and intuitive dismissal
- Chat and panels stack vertically on small screens
- Hamburger button positioned for easy thumb access
- No min-width constraints on mobile for better space usage

Generated with `cmux`
@kylecarbs kylecarbs marked this pull request as ready for review October 21, 2025 05:13
@kylecarbs kylecarbs marked this pull request as draft October 21, 2025 05:13
@kylecarbs kylecarbs marked this pull request as ready for review October 21, 2025 05:13
@kylecarbs kylecarbs merged commit 4d7ba60 into main Oct 21, 2025
9 checks passed
@kylecarbs kylecarbs deleted the mobile-sidebar branch October 21, 2025 16:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@kylecarbs