Mobile: Hamburger menu for navigation

- Collapsible hamburger menu (☰) for mobile
- Clean header with just 'LandveX' title
- Developer mode toggle as small lock icon
- Menu items with emoji icons for clarity
- Full navigation hidden behind menu toggle
- Tested on pilot.landvex.com

packages/ui/src/App.tsx

@@ -11,42 +11,60 @@ import KillList from './pages/KillList';
 
 function App() {
   const [developerMode, setDeveloperMode] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
 
   return (
-    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: 1200, margin: '0 auto', padding: 20 }}>
+    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: 1200, margin: '0 auto', padding: 12 }}>
-      <header style={{ borderBottom: '2px solid #333', paddingBottom: 20, marginBottom: 20 }}>
+      <header style={{ borderBottom: '2px solid #333', paddingBottom: 12, marginBottom: 12 }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <h1 style={{ fontSize: 'clamp(1.2rem, 5vw, 2rem)', margin: 0 }}>LandveX {developerMode ? '(Dev)' : ''}</h1>
+          <h1 style={{ fontSize: '1.3rem', margin: 0 }}>LandveX</h1>
-          <button
+          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-            onClick={() => setDeveloperMode(!developerMode)}
+            <button
-            style={{
+              onClick={() => setDeveloperMode(!developerMode)}
-              padding: '6px 12px',
+              style={{
-              background: developerMode ? '#ffd700' : '#f0f0f0',
+                padding: '4px 8px',
-              border: '1px solid #ccc',
+                background: developerMode ? '#ffd700' : '#f0f0f0',
-              borderRadius: 4,
+                border: '1px solid #ccc',
-              cursor: 'pointer',
+                borderRadius: 4,
-              fontSize: '0.8rem',
+                cursor: 'pointer',
-            }}
+                fontSize: '0.7rem',
-          >
+              }}
-            {developerMode ? '🔓 Dev' : '🔒 Normal'}
+            >
-          </button>
+              {developerMode ? '🔓' : '🔒'}
+            </button>
+            <button
+              onClick={() => setMenuOpen(!menuOpen)}
+              style={{
+                padding: '4px 8px',
+                background: '#f0f0f0',
+                border: '1px solid #ccc',
+                borderRadius: 4,
+                cursor: 'pointer',
+                fontSize: '0.9rem',
+              }}
+            >
+              ☰
+            </button>
+          </div>
         </div>
-        <nav style={{ display: 'flex', gap: 10, marginTop: 10, flexWrap: 'wrap', fontSize: '0.85rem' }}>
+        {menuOpen && (
-          <Link to="/">Explorer</Link>
+          <nav style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12, fontSize: '0.9rem' }}>
-          <Link to="/upload">Upload</Link>
+            <Link to="/" onClick={() => setMenuOpen(false)}>📊 Explorer</Link>
-          <Link to="/console">Console</Link>
+            <Link to="/upload" onClick={() => setMenuOpen(false)}>📤 Upload</Link>
-          <Link to="/health">Health</Link>
+            <Link to="/console" onClick={() => setMenuOpen(false)}>🎮 Console</Link>
-          <Link to="/pilot">Pilot</Link>
+            <Link to="/health" onClick={() => setMenuOpen(false)}>🏥 Health</Link>
-          <Link to="/readiness">Ready</Link>
+            <Link to="/pilot" onClick={() => setMenuOpen(false)}>✅ Pilot</Link>
-          <Link to="/kill">Kill</Link>
+            <Link to="/readiness" onClick={() => setMenuOpen(false)}>📋 Ready</Link>
-          {developerMode && (
+            <Link to="/kill" onClick={() => setMenuOpen(false)}>🔥 Kill</Link>
-            <>
+            {developerMode && (
-              <Link to="/datasets">Data</Link>
+              <>
-              <Link to="/models">Models</Link>
+                <Link to="/datasets" onClick={() => setMenuOpen(false)}>🗂️ Data</Link>
-              <Link to="/training">Train</Link>
+                <Link to="/models" onClick={() => setMenuOpen(false)}>🧠 Models</Link>
-            </>
+                <Link to="/training" onClick={() => setMenuOpen(false)}>🏋️ Train</Link>
-          )}
+              </>
-        </nav>
+            )}
+          </nav>
+        )}
       </header>
 
       <Routes>