fix mobile reponsiveness

2026-04-16 20:09:41 -03:00
parent 1ae1456502
commit 1ed2ad06b8
6 changed files with 207 additions and 5 deletions
--- a/docs/index.html
+++ b/docs/index.html
@@ -228,6 +228,55 @@
    vertical-align: top;
  }
  .cmp-table tr:last-child td { border-bottom: none; }
+
+  /* Mobile menu toggle — hidden on desktop */
+  .menu-toggle {
+    display: none;
+    background: transparent;
+    border: 1px solid #1e2a4a;
+    color: #e8eaf0;
+    padding: 6px 10px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 14px;
+    cursor: pointer;
+    line-height: 1;
+    margin-left: auto;
+  }
+  .menu-toggle:hover { background: #1a2340; }
+
+  .nav-backdrop {
+    display: none;
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 10;
+  }
+  .layout.nav-open .nav-backdrop { display: block; }
+
+  @media (max-width: 720px) {
+    header { padding: 10px 12px; gap: 8px; }
+    header h1 { font-size: 16px; letter-spacing: 1px; }
+    header .subtitle { display: none; }
+    .menu-toggle { display: inline-block; }
+
+    .layout { position: relative; }
+    nav {
+      position: absolute;
+      left: 0; top: 0; bottom: 0;
+      width: 220px;
+      z-index: 20;
+      transform: translateX(-100%);
+      transition: transform 0.2s ease;
+      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5);
+    }
+    .layout.nav-open nav { transform: translateX(0); }
+
+    main { padding: 16px; }
+    .graph-section h2 { font-size: 13px; }
+    .prose p, .prose ul { font-size: 13px; }
+    .cmp-table { font-size: 12px; }
+    .cmp-table th, .cmp-table td { padding: 6px 8px; }
+  }
 </style>
 </head>
 <body>
@@ -235,9 +284,11 @@
 <header>
  <h1>STELLAR AIR</h1>
  <span class="subtitle">NOVA Operations Platform — Architecture</span>
+  <button class="menu-toggle" onclick="toggleNav()" aria-label="Toggle navigation">☰</button>
 </header>

 <div class="layout">
+<div class="nav-backdrop" onclick="toggleNav()"></div>

 <nav>
  <a class="active" onclick="show('walkthrough')">Walkthrough</a>
@@ -485,8 +536,13 @@ function show(id) {
  document.getElementById(id).classList.add('active');
  var navLink = document.querySelector('nav a[onclick="show(\'' + id + '\')"]');
  if (navLink) navLink.classList.add('active');
+  // auto-close the mobile drawer after selecting
+  document.querySelector('.layout').classList.remove('nav-open');
 }

+function toggleNav() {
+  document.querySelector('.layout').classList.toggle('nav-open');
+}
 </script>

 </body>