From 7cf6f14aeb3a9d0ce9e6689a8d03859ccd92affe Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Tue, 21 Jul 2026 08:36:54 +0000
Subject: [PATCH] =?UTF-8?q?Add=20burger=20menu=20to=20mobile=20top-bar=20?=
 =?UTF-8?q?=E2=80=94=20sidebar=20slides=20in=20with=20backdrop=20overlay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/index.css             | 29 +++++++++++++++++++++++++++--
 frontend/src/pages/ReportsPage.tsx | 12 ++++++++++--
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 876d4d00..c6493c58 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -386,13 +386,38 @@ html, body, #root {
 
 /* ── Mobile ─────────────────────────────────────────────────────── */
 @media (max-width: 700px) {
-  .sidebar { display: none; }
-  .page-content { flex-direction: column; }
+  .app-shell { flex-direction: column; }
+  .sidebar {
+    position: fixed;
+    top: 0; left: 0; bottom: 0;
+    z-index: 200;
+    transform: translateX(calc(-1 * var(--sidebar-w)));
+    transition: transform 0.25s ease;
+  }
+  .app-shell.menu-open .sidebar { transform: translateX(0); }
   .top-bar { display: flex; }
   .report-view { padding: 16px; }
   .report-controls { gap: 8px; }
 }
 
+.menu-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 199;
+}
+
+.top-bar-burger {
+  background: none;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  flex-shrink: 0;
+}
+
 /* Sidebar scrollbar */
 .nav-scroll::-webkit-scrollbar,
 .sidebar::-webkit-scrollbar,
diff --git a/frontend/src/pages/ReportsPage.tsx b/frontend/src/pages/ReportsPage.tsx
index 554ff772..ae59b545 100644
--- a/frontend/src/pages/ReportsPage.tsx
+++ b/frontend/src/pages/ReportsPage.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState, useCallback } from 'react'
 import {
   BarChart2, Building2, UtensilsCrossed, ShoppingCart, Database,
   ChevronRight, ChevronDown, Play, Download, Loader2, AlertCircle,
-  FileBarChart, TrendingUp, Settings,
+  FileBarChart, TrendingUp, Settings, Menu,
 } from 'lucide-react'
 import { useAuth } from '../components/AuthGate'
 import { fetchReports, runReport } from '../api'
@@ -276,6 +276,7 @@ export default function ReportsPage() {
   const [reports, setReports]     = useState<ReportMeta[]>([])
   const [selected, setSelected]   = useState<ReportMeta | null>(null)
   const [showSettings, setShowSettings] = useState(false)
+  const [menuOpen, setMenuOpen]   = useState(false)
   const [dateFrom, setDateFrom]   = useState(daysAgo(7))
   const [dateTo, setDateTo]       = useState(today())
   const [result, setResult]       = useState<ReportResult | null>(null)
@@ -291,6 +292,7 @@ export default function ReportsPage() {
   const handleSelect = useCallback((r: ReportMeta) => {
     setSelected(r)
     setShowSettings(false)
+    setMenuOpen(false)
     setResult(null)
     setError(null)
   }, [])
@@ -298,6 +300,7 @@ export default function ReportsPage() {
   const handleSettings = useCallback(() => {
     setShowSettings(true)
     setSelected(null)
+    setMenuOpen(false)
   }, [])
 
   const handleRun = async () => {
@@ -316,11 +319,16 @@ export default function ReportsPage() {
   }
 
   return (
-    <div className="app-shell">
+    <div className={`app-shell${menuOpen ? ' menu-open' : ''}`}>
       <Sidebar tree={tree} selectedId={showSettings ? '__settings__' : (selected?.id ?? null)} onSelect={handleSelect} onSettings={handleSettings} />
 
+      {menuOpen && <div className="menu-backdrop" onClick={() => setMenuOpen(false)} />}
+
       {/* Mobile top bar */}
       <div className="top-bar">
+        <button className="top-bar-burger" onClick={() => setMenuOpen(o => !o)}>
+          <Menu size={20} strokeWidth={1.75} />
+        </button>
         <BarChart2 size={18} strokeWidth={1.75} color="var(--gold)" />
         <span className="top-bar-title">Reports</span>
       </div>