From 4ab54270db598b355146c8ffc220f2cb0a1e572e Mon Sep 17 00:00:00 2001
From: anonymous <contributor@automaker.dev>
Date: Sat, 10 Jan 2026 16:52:29 +0100
Subject: [PATCH] fix: enable sidebar expand and project switching on mobile

- Sidebar now uses overlay pattern on mobile (fixed position when open)
- Added backdrop overlay that dismisses sidebar on tap
- Made collapse toggle button visible on all screen sizes
- Made project options menu visible on all screen sizes

Previously the sidebar was forced to collapsed width (w-16) on mobile
even when sidebarOpen was true, and the toggle/options buttons were
hidden with `hidden lg:flex`.
---
 apps/ui/src/components/layout/sidebar.tsx           | 13 ++++++-------
 .../sidebar/components/collapse-toggle-button.tsx   |  4 +---
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/apps/ui/src/components/layout/sidebar.tsx b/apps/ui/src/components/layout/sidebar.tsx
index a8c70cb6..be547e04 100644
--- a/apps/ui/src/components/layout/sidebar.tsx
+++ b/apps/ui/src/components/layout/sidebar.tsx
@@ -258,26 +258,25 @@ export function Sidebar() {
 
   return (
     <>
-      {/* Mobile overlay backdrop */}
+      {/* Mobile backdrop overlay */}
       {sidebarOpen && (
         <div
-          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+          className="fixed inset-0 bg-black/50 z-20 lg:hidden"
           onClick={toggleSidebar}
-          aria-hidden="true"
+          data-testid="sidebar-backdrop"
         />
       )}
       <aside
         className={cn(
-          'flex-shrink-0 flex flex-col z-50 relative',
+          'flex-shrink-0 flex flex-col z-30',
           // Glass morphism background with gradient
           'bg-gradient-to-b from-sidebar/95 via-sidebar/85 to-sidebar/90 backdrop-blur-2xl',
           // Premium border with subtle glow
           'border-r border-border/60 shadow-[1px_0_20px_-5px_rgba(0,0,0,0.1)]',
           // Smooth width transition
           'transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]',
-          // Mobile: hidden when closed, full width overlay when open
-          // Desktop: always visible, toggle between narrow and wide
-          sidebarOpen ? 'fixed lg:relative left-0 top-0 h-full w-72' : 'hidden lg:flex w-16'
+          // Mobile: overlay when open, collapsed when closed
+          sidebarOpen ? 'fixed inset-y-0 left-0 w-72 lg:relative lg:w-72' : 'relative w-16'
         )}
         data-testid="sidebar"
       >
diff --git a/apps/ui/src/components/layout/sidebar/components/collapse-toggle-button.tsx b/apps/ui/src/components/layout/sidebar/components/collapse-toggle-button.tsx
index fc33f6ed..16c00a37 100644
--- a/apps/ui/src/components/layout/sidebar/components/collapse-toggle-button.tsx
+++ b/apps/ui/src/components/layout/sidebar/components/collapse-toggle-button.tsx
@@ -17,9 +17,7 @@ export function CollapseToggleButton({
     <button
       onClick={toggleSidebar}
       className={cn(
-        // Show on desktop always, show on mobile only when sidebar is open
-        sidebarOpen ? 'flex' : 'hidden lg:flex',
-        'absolute top-[68px] -right-3 z-9999',
+        'flex absolute top-[68px] -right-3 z-9999',
         'group/toggle items-center justify-center w-7 h-7 rounded-full',
         // Glass morphism button
         'bg-card/95 backdrop-blur-sm border border-border/80',