mobile responsiveness

public/css/styles.css

@@ -65,16 +65,135 @@ select:disabled{ opacity:.55; cursor:not-allowed; }
 html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,sans-serif}
 .wrap{max-width:var(--max);margin:0 auto;padding:16px}
 
-.bar{position:sticky;top:0;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,0));backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:10}
-.bar__inner{display:flex;align-items:center;gap:12px;justify-content:space-between}
+.bar{position:sticky;top:0;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,0));backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:10;min-height:70px}
+.bar__inner{display:flex;align-items:center;gap:12px;justify-content:space-between;min-height:70px}
 .brand{font-weight:700}
 
 .btn{background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:999px;cursor:pointer}
 
+/* Mobile navigation toggle button */
+.nav-toggle {
+  display: none;
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+}
+
+.nav-toggle svg {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+
 /* ---- Layout ---- */
 .layout{display:grid;grid-template-columns:240px 1fr;gap:16px}
 @media (max-width: 820px){
   .layout{grid-template-columns:1fr}
+  
+  /* Show mobile nav toggle */
+  .nav-toggle {
+    display: flex !important;
+  }
+  
+  /* Hide desktop navigation by default on mobile */
+  .sidenav {
+    display: none;
+    position: fixed;
+    top: 70px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
+    background: var(--card);
+    border-radius: 0;
+    border: none;
+    box-shadow: var(--shadow);
+    overflow-y: auto;
+  }
+  
+  /* Show navigation when active */
+  .sidenav.mobile-active {
+    display: block;
+  }
+  
+  /* Add mobile overlay */
+  .sidenav::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: -1;
+  }
+  
+  /* Adjust main content spacing for mobile */
+  .content {
+    margin-top: 16px;
+  }
+  
+  /* Improve mobile spacing */
+  .wrap {
+    padding: 12px;
+  }
+  
+  /* Better mobile grid */
+  .content {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+  
+  /* Mobile-friendly cards */
+  .card {
+    padding: 12px;
+  }
+  
+  /* Mobile-friendly inputs */
+  input, select, textarea {
+    padding: 12px;
+    font-size: 16px; /* Prevents zoom on iOS */
+  }
+  
+  /* Mobile-friendly results */
+  .result {
+    margin-top: 16px;
+    padding: 12px;
+    overflow-x: auto;
+  }
+  
+  /* Mobile-friendly tables */
+  table {
+    font-size: 14px;
+  }
+  
+  /* Mobile-friendly calculator inputs */
+  .calculator-container {
+    padding: 16px 0;
+  }
+  
+  /* Ensure proper spacing from navigation */
+  .layout {
+    padding-top: 16px;
+  }
+  
+  /* Mobile-friendly footer */
+  .footer-content {
+    flex-direction: column;
+    gap: 12px;
+    text-align: center;
+  }
+  
+  .source-link {
+    margin-left: 0;
+  }
 }
 
 /* ---- Vertical nav ---- */

public/index.html

@@ -14,7 +14,14 @@
   <header class="bar">
     <div class="wrap bar__inner">
       <div class="brand">calculator.127local.net</div>
-      <button id="themeToggle" class="btn" aria-label="Toggle color scheme">Auto</button>
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <button id="navToggle" class="nav-toggle" aria-label="Toggle navigation">
+          <svg viewBox="0 0 24 24">
+            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+          </svg>
+        </button>
+        <button id="themeToggle" class="btn" aria-label="Toggle color scheme">Auto</button>
+      </div>
     </div>
   </header>
 

public/js/app.js

@@ -12,8 +12,29 @@ const CALCS = [
 const navEl   = document.getElementById('nav');
 const viewEl  = document.getElementById('view');
 const themeBtn= document.getElementById('themeToggle');
+const navToggleBtn = document.getElementById('navToggle');
 initTheme(themeBtn);
 
+// Mobile navigation toggle
+navToggleBtn.addEventListener('click', () => {
+  navEl.classList.toggle('mobile-active');
+});
+
+// Close mobile nav when clicking outside
+document.addEventListener('click', (e) => {
+  if (!navEl.contains(e.target) && !navToggleBtn.contains(e.target)) {
+    navEl.classList.remove('mobile-active');
+  }
+});
+
+// Close mobile nav when clicking on a nav link
+navEl.addEventListener('click', (e) => {
+  const a = e.target.closest('a[data-calc]');
+  if (a) {
+    navEl.classList.remove('mobile-active');
+  }
+});
+
 const moduleCache = new Map();
 const viewCache   = new Map();