Merge pull request #3 from nsitu/copilot/optimize-navigation-for-mobile

Add collapsible sidebar navigation for mobile

Author: nsitu

index.html

@@ -15,12 +15,16 @@
   </svg>
   <h1>MuralAid</h1>
   <span class="subtitle">Measure Tool</span>
+  <button class="menu-toggle" id="menu-toggle" aria-label="Toggle navigation" aria-expanded="false" aria-controls="sidebar">
+    <span></span><span></span><span></span>
+  </button>
 </header>
 
 <div class="app">
 
   <!-- ── SIDEBAR ───────────────────────────────── -->
-  <aside class="sidebar">
+  <div class="sidebar-backdrop" id="sidebar-backdrop"></div>
+  <aside class="sidebar" id="sidebar">
     <nav class="steps-list">
       <div class="step-item active" id="si-1">
         <div class="step-badge">1</div><span class="step-name">Wall Photo</span>

script.js

@@ -296,6 +296,7 @@ function goTo(n) {
     if (cp) cp.classList.toggle('hidden', i !== n);
   }
   document.getElementById('zoom-btns').style.display = n >= 2 ? 'flex' : 'none';
+  if (isMobile()) closeSidebar();
   updateStatus();
   render();
 }
@@ -679,6 +680,39 @@ function renderMarkerList() {
   `).join('');
 }
 
+// ═══════════════════════════════════════════════════════════════
+// MOBILE NAV TOGGLE
+// ═══════════════════════════════════════════════════════════════
+const menuToggle   = document.getElementById('menu-toggle');
+const sidebar      = document.getElementById('sidebar');
+const sidebarBackdrop = document.getElementById('sidebar-backdrop');
+
+function openSidebar() {
+  sidebar.classList.add('open');
+  sidebarBackdrop.classList.add('open');
+  menuToggle.setAttribute('aria-expanded', 'true');
+}
+
+function closeSidebar() {
+  sidebar.classList.remove('open');
+  sidebarBackdrop.classList.remove('open');
+  menuToggle.setAttribute('aria-expanded', 'false');
+}
+
+function isMobile() {
+  return window.matchMedia('(max-width: 640px)').matches;
+}
+
+menuToggle.addEventListener('click', () => {
+  if (sidebar.classList.contains('open')) {
+    closeSidebar();
+  } else {
+    openSidebar();
+  }
+});
+
+sidebarBackdrop.addEventListener('click', closeSidebar);
+
 // ═══════════════════════════════════════════════════════════════
 // KEYBOARD SHORTCUTS
 // ═══════════════════════════════════════════════════════════════

style.css

@@ -34,6 +34,40 @@ header svg { color: var(--teal); }
 header h1 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
 header .subtitle { color: var(--muted); font-size: 0.82rem; }
 
+/* ── HAMBURGER MENU TOGGLE ────────────────────────── */
+.menu-toggle {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  margin-left: auto;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+}
+.menu-toggle span {
+  display: block;
+  width: 22px;
+  height: 2px;
+  background: var(--text);
+  border-radius: 2px;
+  transition: transform 0.2s, opacity 0.2s;
+}
+.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
+.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+
+/* ── SIDEBAR BACKDROP ─────────────────────────────── */
+.sidebar-backdrop {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 9;
+}
+
 /* ── LAYOUT ───────────────────────────────────────── */
 .app {
   display: flex;
@@ -256,3 +290,25 @@ input[type=range] { width: 100%; accent-color: var(--teal); cursor: pointer; }
   pointer-events: none;
   display: none;
 }
+
+/* ── MOBILE ───────────────────────────────────────── */
+@media (max-width: 640px) {
+  .menu-toggle { display: flex; }
+
+  .sidebar {
+    position: fixed;
+    top: 0; left: 0;
+    height: 100%;
+    width: min(300px, 85vw);
+    z-index: 10;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+  }
+  .sidebar.open {
+    transform: translateX(0);
+  }
+
+  .sidebar-backdrop.open {
+    display: block;
+  }
+}