fix: improve mobile navigation and layouts on docs site

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: michaelmcnees

site/src/components/DocsSidebar.astro

@@ -111,7 +111,7 @@ function isParentActive(item: NavItem): boolean {
                 <a
                   href={item.href}
                   class:list={[
-                    'flex items-center justify-between px-3 py-1.5 text-[13px] transition-colors',
+                    'flex items-center justify-between px-3 py-2 text-sm transition-colors',
                     active
                       ? 'text-primary font-medium border-l-2 border-primary bg-primary/5'
                       : 'text-on-surface-variant hover:text-on-surface border-l-2 border-transparent hover:border-outline-variant',
@@ -140,7 +140,7 @@ function isParentActive(item: NavItem): boolean {
                           <a
                             href={child.href}
                             class:list={[
-                              'block pl-6 pr-3 py-1 text-[12px] transition-colors',
+                              'block pl-6 pr-3 py-1.5 text-[13px] transition-colors',
                               childActive
                                 ? 'text-primary font-medium border-l-2 border-primary bg-primary/5'
                                 : 'text-on-surface-variant/80 hover:text-on-surface border-l-2 border-outline-variant/30 hover:border-outline-variant',
@@ -159,32 +159,39 @@ function isParentActive(item: NavItem): boolean {
         </ul>
       </div>
     ))}
+
+    <!-- Site navigation -->
+    <div class="mt-4 pt-4 border-t border-outline-variant">
+      <h4 class="text-[10px] font-headline font-bold uppercase tracking-[0.15em] text-on-surface-variant/60 mb-3 px-3">
+        Site
+      </h4>
+      <ul>
+        <li>
+          <a href="/" class="flex items-center gap-2 px-3 py-2 text-sm text-on-surface-variant hover:text-on-surface transition-colors">
+            Home
+          </a>
+        </li>
+        <li>
+          <a href="https://github.com/dvflw/mantle" class="flex items-center gap-2 px-3 py-2 text-sm text-on-surface-variant hover:text-on-surface transition-colors">
+            GitHub
+          </a>
+        </li>
+      </ul>
+    </div>
   </nav>
 </aside>
 
 <script is:inline>
 function initSidebar() {
-  const toggleBtn = document.getElementById('sidebar-toggle');
   const mobileSidebar = document.getElementById('docs-sidebar-mobile');
   const overlay = document.getElementById('sidebar-overlay');
-  if (!toggleBtn || !mobileSidebar || !overlay) return;
+  if (!mobileSidebar || !overlay) return;
 
-  function openSidebar() {
-    mobileSidebar.classList.remove('-translate-x-full');
-    overlay.classList.remove('hidden');
-  }
   function closeSidebar() {
     mobileSidebar.classList.add('-translate-x-full');
     overlay.classList.add('hidden');
   }
 
-  const newBtn = toggleBtn.cloneNode(true);
-  toggleBtn.parentNode?.replaceChild(newBtn, toggleBtn);
-  newBtn.addEventListener('click', () => {
-    const isOpen = !mobileSidebar.classList.contains('-translate-x-full');
-    if (isOpen) closeSidebar(); else openSidebar();
-  });
-
   const newOverlay = overlay.cloneNode(true);
   overlay.parentNode?.replaceChild(newOverlay, overlay);
   newOverlay.addEventListener('click', closeSidebar);

site/src/components/Nav.astro

@@ -59,11 +59,31 @@ const isDocs = !isHome;
 function initNav() {
   const btn = document.getElementById('mobile-menu-btn');
   const menu = document.getElementById('mobile-menu');
-  if (!btn || !menu) return;
+  const docsSidebar = document.getElementById('docs-sidebar-mobile');
+  const overlay = document.getElementById('sidebar-overlay');
+  if (!btn) return;
+
   // Remove old listeners by cloning
   const newBtn = btn.cloneNode(true);
   btn.parentNode?.replaceChild(newBtn, btn);
-  newBtn.addEventListener('click', () => menu.classList.toggle('hidden'));
+
+  newBtn.addEventListener('click', () => {
+    if (docsSidebar && overlay) {
+      // On docs pages, toggle the sidebar drawer instead of the dropdown
+      const isOpen = !docsSidebar.classList.contains('-translate-x-full');
+      if (isOpen) {
+        docsSidebar.classList.add('-translate-x-full');
+        overlay.classList.add('hidden');
+      } else {
+        docsSidebar.classList.remove('-translate-x-full');
+        overlay.classList.remove('hidden');
+      }
+      // Keep dropdown hidden
+      if (menu) menu.classList.add('hidden');
+    } else if (menu) {
+      menu.classList.toggle('hidden');
+    }
+  });
 }
 initNav();
 document.addEventListener('astro:after-swap', initNav);

site/src/layouts/Docs.astro

@@ -24,20 +24,8 @@ const { prev, next } = getPrevNext(currentPath);
 
 <Base title={`${title} - Mantle Docs`}>
   <Nav />
-  <div class="mx-auto max-w-[1280px] px-4 sm:px-6">
+  <div class="mx-auto max-w-[1280px] px-4 sm:px-6 overflow-x-hidden">
     <div class="flex min-h-screen pt-16">
-      <!-- Mobile sidebar toggle -->
-      <button
-        id="sidebar-toggle"
-        class="lg:hidden fixed bottom-6 left-6 z-50 flex items-center gap-2 px-4 py-2.5 bg-surface-container-high border border-outline-variant text-on-surface text-sm font-medium shadow-lg"
-        aria-label="Toggle sidebar"
-      >
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-        </svg>
-        Menu
-      </button>
-
       <DocsSidebar currentPath={currentPath} />
 
       <!-- Main content -->

site/src/styles/global.css

@@ -317,7 +317,17 @@ body {
   margin-top: 0;
 }
 
-/* Tables */
+/* Tables — horizontally scrollable on small screens */
+.prose .table-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin-top: 1.5em;
+}
+
+.prose .table-wrapper table {
+  margin-top: 0;
+}
+
 .prose table {
   width: 100%;
   border-collapse: collapse;
@@ -365,6 +375,30 @@ body {
   border: 1px solid var(--color-outline-variant);
 }
 
+/* Mobile prose adjustments */
+@media (max-width: 640px) {
+  .prose h1 {
+    font-size: 1.5rem;
+  }
+
+  .prose h2 {
+    font-size: 1.25rem;
+  }
+
+  .prose h3 {
+    font-size: 1.1rem;
+  }
+
+  .prose pre {
+    font-size: 0.8125rem;
+    padding: 0.75em 1em;
+  }
+
+  .prose code {
+    word-break: break-word;
+  }
+}
+
 /* Definition lists (used in some docs) */
 .prose dt {
   font-weight: 600;