feat: replace mobile top nav with bottom navigation bar for better reachability

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

Author: michaelmcnees

site/src/components/DocsSidebar.astro

@@ -93,7 +93,7 @@ function isParentActive(item: NavItem): boolean {
 <div id="sidebar-overlay" class="fixed inset-0 z-40 bg-black/50 hidden lg:hidden" aria-hidden="true"></div>
 
 <!-- Mobile sidebar drawer -->
-<aside id="docs-sidebar-mobile" class="fixed top-16 left-0 bottom-0 z-50 w-72 bg-surface-container-lowest border-r border-outline-variant transform -translate-x-full transition-transform duration-200 lg:hidden overflow-y-auto">
+<aside id="docs-sidebar-mobile" class="fixed top-16 left-0 bottom-14 md:bottom-0 z-50 w-72 bg-surface-container-lowest border-r border-outline-variant transform -translate-x-full transition-transform duration-200 lg:hidden overflow-y-auto">
   <nav class="py-6 px-4" aria-label="Documentation sidebar mobile">
     {docsNav.map((group) => (
       <div class="mb-8">

site/src/components/Nav.astro

@@ -31,57 +31,68 @@ const isDocs = !isHome;
       </a>
     </div>
 
-    <!-- Mobile hamburger -->
-    <button id="mobile-menu-btn" class="md:hidden text-on-surface-variant hover:text-on-surface" aria-label="Menu">
-      <svg class="w-6 h-6" 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>
-    </button>
   </div>
+</nav>
 
-  <!-- Mobile menu -->
-  <div id="mobile-menu" class="hidden md:hidden border-t border-outline-variant bg-surface/95 backdrop-blur-md">
-    <div class="px-6 py-4 flex flex-col gap-3">
-      <a href={`${prefix}#how-it-works`} class="text-sm text-on-surface-variant hover:text-on-surface transition-colors">How It Works</a>
-      <a href={`${prefix}#connectors`} class="text-sm text-on-surface-variant hover:text-on-surface transition-colors">Connectors</a>
-      <a href={`${prefix}#comparison`} class="text-sm text-on-surface-variant hover:text-on-surface transition-colors">Compare</a>
-      <a href="/docs/getting-started" class:list={["text-sm transition-colors", isDocs ? "text-primary font-medium" : "text-on-surface-variant hover:text-on-surface"]}>Docs</a>
-      <a href={`${prefix}#get-started`} class="inline-flex justify-center px-4 py-2 bg-primary text-on-primary text-sm font-medium mt-2">Get Started</a>
-    </div>
+<!-- Mobile bottom navigation bar -->
+<nav id="mobile-bottom-nav" class="fixed bottom-0 left-0 right-0 z-50 md:hidden border-t border-outline-variant bg-surface/95 backdrop-blur-md">
+  <div class="flex items-center justify-around h-14 px-2">
+    <a href="/" class:list={["bottom-nav-item flex flex-col items-center gap-0.5 px-3 py-1 text-[11px] transition-colors", isHome ? "text-primary" : "text-on-surface-variant hover:text-on-surface"]}>
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955a1.126 1.126 0 011.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
+      <span>Home</span>
+    </a>
+    {isDocs && (
+      <button id="bottom-nav-docs-btn" class="bottom-nav-item flex flex-col items-center gap-0.5 px-3 py-1 text-[11px] text-on-surface-variant hover:text-on-surface transition-colors" aria-label="Documentation menu">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></svg>
+        <span>Menu</span>
+      </button>
+    )}
+    <a href="/docs/getting-started" class:list={["bottom-nav-item flex flex-col items-center gap-0.5 px-3 py-1 text-[11px] transition-colors", isDocs ? "text-primary" : "text-on-surface-variant hover:text-on-surface"]}>
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/></svg>
+      <span>Docs</span>
+    </a>
+    <a href="https://github.com/dvflw/mantle" class="bottom-nav-item flex flex-col items-center gap-0.5 px-3 py-1 text-[11px] text-on-surface-variant hover:text-on-surface transition-colors" aria-label="GitHub">
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+      <span>GitHub</span>
+    </a>
   </div>
 </nav>
 
 <style>
   .nav-inner {
     transition: max-width 0.3s ease;
   }
+  #mobile-bottom-nav {
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+  }
+  .bottom-nav-item {
+    -webkit-tap-highlight-color: transparent;
+    min-width: 3.5rem;
+  }
+  .bottom-nav-item:active {
+    opacity: 0.7;
+  }
 </style>
 
 <script is:inline>
 function initNav() {
-  const btn = document.getElementById('mobile-menu-btn');
-  const menu = document.getElementById('mobile-menu');
+  const btn = document.getElementById('bottom-nav-docs-btn');
   const docsSidebar = document.getElementById('docs-sidebar-mobile');
   const overlay = document.getElementById('sidebar-overlay');
-  if (!btn) return;
+  if (!btn || !docsSidebar || !overlay) return;
 
   // Remove old listeners by cloning
   const newBtn = btn.cloneNode(true);
   btn.parentNode?.replaceChild(newBtn, btn);
 
   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');
+    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');
     }
   });
 }

site/src/layouts/Docs.astro

@@ -25,7 +25,7 @@ const { prev, next } = getPrevNext(currentPath);
 <Base title={`${title} - Mantle Docs`}>
   <Nav />
   <div class="mx-auto max-w-[1280px] px-4 sm:px-6 overflow-x-hidden">
-    <div class="flex min-h-screen pt-16">
+    <div class="flex min-h-screen pt-16 pb-16 md:pb-0">
       <DocsSidebar currentPath={currentPath} />
 
       <!-- Main content -->

site/src/pages/index.astro

@@ -12,7 +12,7 @@ import Footer from '../components/Footer.astro';
 ---
 <Base title="Mantle — Headless AI Workflow Automation">
   <Nav isHome={true} />
-  <main id="main-content">
+  <main id="main-content" class="pb-16 md:pb-0">
     <Hero />
     <Features />
     <HowItWorks />