From 71c4654361619eb8bad78930a31716491e97c355 Mon Sep 17 00:00:00 2001
From: Paul Trowbridge <paul@hptrow.me>
Date: Sun, 5 Apr 2026 17:48:07 -0400
Subject: [PATCH] Collapsible sidebar for mobile, fix logout button visibility

On mobile: hamburger button in top bar opens sidebar as a slide-over
with a backdrop overlay. Nav links and source selector close it on tap.
On desktop: sidebar is static as before.

Logout button now sits alongside the close button in the sidebar header
with a gap so both are always visible.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/App.jsx | 126 +++++++++++++++++++++++++++++--------------------
 1 file changed, 76 insertions(+), 50 deletions(-)

diff --git a/ui/src/App.jsx b/ui/src/App.jsx
index bd0f86a..615ad7e 100644
--- a/ui/src/App.jsx
+++ b/ui/src/App.jsx
@@ -20,6 +20,7 @@ export default function App() {
   const [authed, setAuthed] = useState(false)
   const [sources, setSources] = useState([])
   const [source, setSource] = useState(() => localStorage.getItem('selectedSource') || '')
+  const [sidebarOpen, setSidebarOpen] = useState(false)
 
   async function handleLogin(user, pass) {
     setCredentials(user, pass)
@@ -53,64 +54,89 @@ export default function App() {
 
   if (!authed) return <Login onLogin={handleLogin} />
 
+  const sidebar = (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="px-4 py-4 border-b border-gray-200 flex items-center justify-between">
+        <span className="text-sm font-semibold text-gray-800 tracking-wide uppercase">Dataflow</span>
+        <div className="flex items-center gap-2">
+          <button onClick={handleLogout} className="text-xs text-gray-400 hover:text-gray-600 leading-none" title="Sign out">⏻</button>
+          <button onClick={() => setSidebarOpen(false)} className="md:hidden text-gray-400 hover:text-gray-600 leading-none" title="Close">✕</button>
+        </div>
+      </div>
+
+      {/* Source selector */}
+      <div className="px-3 py-3 border-b border-gray-200">
+        <div className="flex items-center justify-between mb-1">
+          <label className="text-xs text-gray-500">Source</label>
+          <NavLink to="/sources" className="text-xs text-blue-400 hover:text-blue-600 leading-none" title="New source" onClick={() => setSidebarOpen(false)}>+</NavLink>
+        </div>
+        <select
+          className="w-full text-sm border border-gray-200 rounded px-2 py-1 bg-white focus:outline-none focus:border-blue-400"
+          value={source}
+          onChange={e => setSource(e.target.value)}
+        >
+          {sources.length === 0 && <option value="">—</option>}
+          {sources.map(s => <option key={s.name} value={s.name}>{s.name}</option>)}
+        </select>
+      </div>
+
+      {/* Nav */}
+      <nav className="flex-1 py-2">
+        {NAV.map(({ to, label }) => (
+          <NavLink
+            key={to}
+            to={to}
+            onClick={() => setSidebarOpen(false)}
+            className={({ isActive }) =>
+              `block px-4 py-2 text-sm ${isActive
+                ? 'bg-blue-50 text-blue-700 font-medium'
+                : 'text-gray-600 hover:bg-gray-50'}`
+            }
+          >
+            {label}
+          </NavLink>
+        ))}
+      </nav>
+    </div>
+  )
+
   return (
     <BrowserRouter>
       <div className="flex h-screen bg-gray-50">
-        {/* Sidebar */}
-        <div className="w-44 bg-white border-r border-gray-200 flex flex-col">
-          <div className="px-4 py-4 border-b border-gray-200 flex items-center justify-between">
-            <span className="text-sm font-semibold text-gray-800 tracking-wide uppercase">Dataflow</span>
-            <button onClick={handleLogout} className="text-xs text-gray-400 hover:text-gray-600" title="Sign out">⏻</button>
-          </div>
 
-          {/* Source selector */}
-          <div className="px-3 py-3 border-b border-gray-200">
-            <div className="flex items-center justify-between mb-1">
-              <label className="text-xs text-gray-500">Source</label>
-              <NavLink to="/sources"
-                className="text-xs text-blue-400 hover:text-blue-600 leading-none"
-                title="New source"
-                onClick={() => {/* nav handled by link */}}
-              >+</NavLink>
-            </div>
-            <select
-              className="w-full text-sm border border-gray-200 rounded px-2 py-1 bg-white focus:outline-none focus:border-blue-400"
-              value={source}
-              onChange={e => setSource(e.target.value)}
-            >
-              {sources.length === 0 && <option value="">—</option>}
-              {sources.map(s => <option key={s.name} value={s.name}>{s.name}</option>)}
-            </select>
-          </div>
+        {/* Mobile overlay */}
+        {sidebarOpen && (
+          <div className="fixed inset-0 z-20 bg-black/30 md:hidden" onClick={() => setSidebarOpen(false)} />
+        )}
 
-          {/* Nav */}
-          <nav className="flex-1 py-2">
-            {NAV.map(({ to, label }) => (
-              <NavLink
-                key={to}
-                to={to}
-                className={({ isActive }) =>
-                  `block px-4 py-2 text-sm ${isActive
-                    ? 'bg-blue-50 text-blue-700 font-medium'
-                    : 'text-gray-600 hover:bg-gray-50'}`
-                }
-              >
-                {label}
-              </NavLink>
-            ))}
-          </nav>
+        {/* Sidebar — fixed on mobile, static on desktop */}
+        <div className={`
+          fixed inset-y-0 left-0 z-30 w-44 bg-white border-r border-gray-200 transform transition-transform duration-200
+          md:static md:translate-x-0 md:z-auto md:transition-none
+          ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
+        `}>
+          {sidebar}
         </div>
 
         {/* Main */}
-        <div className="flex-1 overflow-auto">
-          <Routes>
-            <Route path="/" element={<Navigate to="/sources" replace />} />
-            <Route path="/sources" element={<Sources source={source} sources={sources} setSources={setSources} setSource={setSource} />} />
-            <Route path="/import" element={<Import source={source} />} />
-            <Route path="/rules" element={<Rules source={source} />} />
-            <Route path="/mappings" element={<Mappings source={source} />} />
-            <Route path="/records" element={<Records source={source} />} />
-          </Routes>
+        <div className="flex-1 overflow-auto flex flex-col min-w-0">
+          {/* Mobile top bar */}
+          <div className="md:hidden flex items-center px-3 py-2 bg-white border-b border-gray-200">
+            <button onClick={() => setSidebarOpen(true)} className="text-gray-500 hover:text-gray-700 mr-3 text-lg leading-none">☰</button>
+            <span className="text-sm font-semibold text-gray-800 tracking-wide uppercase">Dataflow</span>
+          </div>
+
+          <div className="flex-1 overflow-auto">
+            <Routes>
+              <Route path="/" element={<Navigate to="/sources" replace />} />
+              <Route path="/sources" element={<Sources source={source} sources={sources} setSources={setSources} setSource={setSource} />} />
+              <Route path="/import" element={<Import source={source} />} />
+              <Route path="/rules" element={<Rules source={source} />} />
+              <Route path="/mappings" element={<Mappings source={source} />} />
+              <Route path="/records" element={<Records source={source} />} />
+            </Routes>
+          </div>
         </div>
       </div>
     </BrowserRouter>