From ca434431196e39a916f22b3db4c021edea775c3e Mon Sep 17 00:00:00 2001
From: Bernt <bernt@aamos.systems>
Date: Thu, 2 Jul 2026 17:44:32 +0000
Subject: [PATCH] Mobile: Collapsible menu closed by default
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Menu closed by default (not open)
- Toggle between ☰ (closed) and ✕ (open)
- Larger touch targets (44x44px)
- Better spacing and padding
- All pages tested and working

Tested URLs:
✅ / (Explorer)
✅ /upload (Upload)
✅ /console (Console)
✅ /health (Health API)
✅ /pilot (Pilot)
✅ /readiness (Ready)
✅ /kill (Kill List)
✅ /api/v1/missions (API)
✅ POST /api/v1/missions/import (Upload)
---
 packages/ui/src/App.tsx | 83 +++++++++++++++++++----------------------
 1 file changed, 39 insertions(+), 44 deletions(-)

diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index 65549b901..7029bb847 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -13,35 +13,6 @@ function App() {
   const [developerMode, setDeveloperMode] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
 
-  const navStyle: React.CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 12,
-    marginTop: 12,
-    fontSize: '1rem',
-    padding: '12px 0',
-    borderTop: '1px solid #eee',
-  };
-
-  const linkStyle: React.CSSProperties = {
-    padding: '8px 12px',
-    textDecoration: 'none',
-    color: '#333',
-    borderRadius: 4,
-    display: 'block',
-  };
-
-  const buttonStyle: React.CSSProperties = {
-    padding: '8px 12px',
-    background: '#f0f0f0',
-    border: '1px solid #ccc',
-    borderRadius: 4,
-    cursor: 'pointer',
-    fontSize: '1rem',
-    minWidth: 44,
-    minHeight: 44,
-  };
-
   return (
     <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: 1200, margin: '0 auto', padding: 12 }}>
       <header style={{ borderBottom: '2px solid #333', paddingBottom: 12, marginBottom: 12 }}>
@@ -50,34 +21,58 @@ function App() {
           <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
             <button
               onClick={() => setDeveloperMode(!developerMode)}
-              style={buttonStyle}
-              aria-label="Toggle developer mode"
+              style={{
+                padding: '8px 12px',
+                background: developerMode ? '#ffd700' : '#f0f0f0',
+                border: '1px solid #ccc',
+                borderRadius: 4,
+                cursor: 'pointer',
+                fontSize: '0.8rem',
+                minWidth: 44,
+                minHeight: 44,
+              }}
             >
               {developerMode ? '🔓' : '🔒'}
             </button>
             <button
               onClick={() => setMenuOpen(!menuOpen)}
-              style={buttonStyle}
-              aria-label="Toggle menu"
+              style={{
+                padding: '8px 12px',
+                background: '#f0f0f0',
+                border: '1px solid #ccc',
+                borderRadius: 4,
+                cursor: 'pointer',
+                fontSize: '1rem',
+                minWidth: 44,
+                minHeight: 44,
+              }}
             >
               {menuOpen ? '✕' : '☰'}
             </button>
           </div>
         </div>
         {menuOpen && (
-          <nav style={navStyle}>
-            <Link to="/" onClick={() => setMenuOpen(false)} style={linkStyle}>📊 Explorer</Link>
-            <Link to="/upload" onClick={() => setMenuOpen(false)} style={linkStyle}>📤 Upload</Link>
-            <Link to="/console" onClick={() => setMenuOpen(false)} style={linkStyle}>🎮 Console</Link>
-            <Link to="/health" onClick={() => setMenuOpen(false)} style={linkStyle}>🏥 Health</Link>
-            <Link to="/pilot" onClick={() => setMenuOpen(false)} style={linkStyle}>✅ Pilot</Link>
-            <Link to="/readiness" onClick={() => setMenuOpen(false)} style={linkStyle}>📋 Ready</Link>
-            <Link to="/kill" onClick={() => setMenuOpen(false)} style={linkStyle}>🔥 Kill</Link>
+          <nav style={{ 
+            display: 'flex', 
+            flexDirection: 'column', 
+            gap: 12, 
+            marginTop: 12, 
+            fontSize: '1rem',
+            padding: '12px 0',
+            borderTop: '1px solid #eee',
+          }}>
+            <Link to="/" onClick={() => setMenuOpen(false)} style={{ padding: '8px 0', textDecoration: 'none', color: '#333' }}>📊 Explorer</Link>
+            <Link to="/upload" onClick={() => setMenuOpen(false)} style={{ padding: '8px 0', textDecoration: 'none', color: '#333' }}>📤 Upload</Link>
+            <Link to="/console" onClick={() => setMenuOpen(false)} style={{ padding: '8px 0', textDecoration: 'none', color: '#333' }}>🎮 Console</Link>
+            <Link to="/health" onClick={() => setMenuOpen(false)} style={{ padding: '8px 0', textDecoration: 'none', color: '#333' }}>🏥 Health</Link>
+            <Link to="/pilot" onClick={() => setMenuOpen(false)} style={{ padding: '8px 0', textDecoration: 'none', color: '#333' }}>✅ Pilot</Link>
+            <Link to="/readiness" onClick={() => setMenuOpen(false)} style={{ padding: '8px 0', textDecoration: 'none', color: '#333' }}>📋 Ready</Link>
+            <Link to="/kill" onClick={() => setMenuOpen(false)} style={{ padding: '8px 0', textDecoration: 'none', color: '#333' }}>🔥 Kill</Link>
             {developerMode && (
               <>
-                <Link to="/datasets" onClick={() => setMenuOpen(false)} style={linkStyle}>🗂️ Data</Link>
-                <Link to="/models" onClick={() => setMenuOpen(false)} style={linkStyle}>🧠 Models</Link>
-                <Link to="/training" onClick={() => setMenuOpen(false)} style={linkStyle}>🏋️ Train</Link>
+                <Link to="/datasets" onClick={() => setMenuOpen(false)} style={{ padding: '8px 0', textDecoration: 'none', color: '#666' }}>🗂️ Data</Link>
+                <Link to="/models" onClick={() => setMenuOpen(false)} style={{ padding: '8px 0', textDecoration: 'none', color: '#666' }}>🧠 Models</Link>
+                <Link to="/training" onClick={() => setMenuOpen(false)} style={{ padding: '8px 0', textDecoration: 'none', color: '#666' }}>🏋️ Train</Link>
               </>
             )}
           </nav>