Add burger menu to mobile top-bar — sidebar slides in with backdrop overlay

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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>