From 1d3c3ae67280d0f940ad3be725fb6a883c62b1bf Mon Sep 17 00:00:00 2001
From: Bernt <bernt@aamos.systems>
Date: Thu, 2 Jul 2026 17:41:41 +0000
Subject: [PATCH] Mobile: Hamburger menu for navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 | 84 +++++++++++++++++++++++++----------------
 1 file changed, 51 insertions(+), 33 deletions(-)

diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index 778e31372..705301dba 100644
--- a/packages/ui/src/App.tsx
+++ b/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 }}>
-      <header style={{ borderBottom: '2px solid #333', paddingBottom: 20, marginBottom: 20 }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap' }}>
-          <h1 style={{ fontSize: 'clamp(1.2rem, 5vw, 2rem)', margin: 0 }}>LandveX {developerMode ? '(Dev)' : ''}</h1>
-          <button
-            onClick={() => setDeveloperMode(!developerMode)}
-            style={{
-              padding: '6px 12px',
-              background: developerMode ? '#ffd700' : '#f0f0f0',
-              border: '1px solid #ccc',
-              borderRadius: 4,
-              cursor: 'pointer',
-              fontSize: '0.8rem',
-            }}
-          >
-            {developerMode ? '🔓 Dev' : '🔒 Normal'}
-          </button>
+    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: 1200, margin: '0 auto', padding: 12 }}>
+      <header style={{ borderBottom: '2px solid #333', paddingBottom: 12, marginBottom: 12 }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <h1 style={{ fontSize: '1.3rem', margin: 0 }}>LandveX</h1>
+          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+            <button
+              onClick={() => setDeveloperMode(!developerMode)}
+              style={{
+                padding: '4px 8px',
+                background: developerMode ? '#ffd700' : '#f0f0f0',
+                border: '1px solid #ccc',
+                borderRadius: 4,
+                cursor: 'pointer',
+                fontSize: '0.7rem',
+              }}
+            >
+              {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' }}>
-          <Link to="/">Explorer</Link>
-          <Link to="/upload">Upload</Link>
-          <Link to="/console">Console</Link>
-          <Link to="/health">Health</Link>
-          <Link to="/pilot">Pilot</Link>
-          <Link to="/readiness">Ready</Link>
-          <Link to="/kill">Kill</Link>
-          {developerMode && (
-            <>
-              <Link to="/datasets">Data</Link>
-              <Link to="/models">Models</Link>
-              <Link to="/training">Train</Link>
-            </>
-          )}
-        </nav>
+        {menuOpen && (
+          <nav style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12, fontSize: '0.9rem' }}>
+            <Link to="/" onClick={() => setMenuOpen(false)}>📊 Explorer</Link>
+            <Link to="/upload" onClick={() => setMenuOpen(false)}>📤 Upload</Link>
+            <Link to="/console" onClick={() => setMenuOpen(false)}>🎮 Console</Link>
+            <Link to="/health" onClick={() => setMenuOpen(false)}>🏥 Health</Link>
+            <Link to="/pilot" onClick={() => setMenuOpen(false)}>✅ Pilot</Link>
+            <Link to="/readiness" onClick={() => setMenuOpen(false)}>📋 Ready</Link>
+            <Link to="/kill" onClick={() => setMenuOpen(false)}>🔥 Kill</Link>
+            {developerMode && (
+              <>
+                <Link to="/datasets" onClick={() => setMenuOpen(false)}>🗂️ Data</Link>
+                <Link to="/models" onClick={() => setMenuOpen(false)}>🧠 Models</Link>
+                <Link to="/training" onClick={() => setMenuOpen(false)}>🏋️ Train</Link>
+              </>
+            )}
+          </nav>
+        )}
       </header>
 
       <Routes>