Fix docs site mobile layout with collapsible navigation (#127)

- Add hamburger menu button in top bar for mobile
- Show everyrow branding and "by futuresearch" in mobile top bar
- Navigation menu appears below top bar when opened (no slide animation)
- Hide sidebar logo on mobile since branding is in top bar
- Ensure consistent styling for futuresearch link across views

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: jackwildman

docs-site/src/app/globals.css

@@ -655,18 +655,99 @@ noscript + .installation-tabs .tab-content:first-child {
   to { opacity: 1; }
 }
 
+/* Mobile elements - hidden on desktop */
+.docs-mobile-menu-btn,
+.docs-mobile-header {
+  display: none;
+}
+
 /* Mobile responsive */
 @media (max-width: 768px) {
-  .docs-layout {
+  /* Hide desktop elements on mobile */
+  .docs-top-bar > .docs-futuresearch-link {
+    display: none;
+  }
+
+  /* Mobile header in top bar */
+  .docs-mobile-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .docs-mobile-brand {
+    display: flex;
     flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .docs-mobile-logo-text {
+    font-family: var(--font-jetbrains), "JetBrains Mono", ui-monospace, monospace;
+    font-size: 1.125rem;
+    font-weight: 500;
+    color: var(--brand-primary);
+    text-decoration: none;
+  }
+
+  .docs-mobile-logo-text:hover {
+    text-decoration: none;
+    opacity: 0.8;
+  }
+
+  .docs-mobile-futuresearch-link {
+    font-family: var(--font-jetbrains), "JetBrains Mono", ui-monospace, monospace;
+    font-size: 0.75rem;
+    font-weight: 300;
+    color: var(--brand-primary);
+    letter-spacing: 0.02em;
+    text-decoration: none;
+  }
+
+  .docs-mobile-futuresearch-link .highlight {
+    color: var(--brand-accent);
+    font-weight: 400;
+  }
+
+  .docs-mobile-menu-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 0.5rem;
+    cursor: pointer;
+    color: var(--text-primary);
+    border-radius: 0.375rem;
+  }
+
+  /* Ensure top bar has consistent height on mobile */
+  .docs-top-bar {
+    min-height: 3.5rem;
   }
 
+  /* Mobile sidebar - appears below top bar */
   .docs-sidebar {
+    display: none;
+    position: fixed;
+    top: 3.5rem;
+    left: 0;
     width: 100%;
-    height: auto;
-    position: relative;
+    height: calc(100vh - 3.5rem);
+    z-index: 50;
+    background: var(--background);
     border-right: none;
-    border-bottom: 1px solid var(--border);
+    border-top: 1px solid var(--border);
+    overflow-y: auto;
+  }
+
+  .docs-sidebar.docs-sidebar-open {
+    display: block;
+  }
+
+  /* Hide logo in sidebar on mobile since it's in top bar */
+  .docs-sidebar .docs-sidebar-logo {
+    display: none;
   }
 
   .docs-content-inner {

docs-site/src/components/DocsLayout.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { useState } from "react";
 import { Sidebar } from "./Sidebar";
 import { CodeBlockEnhancer } from "./CodeBlockEnhancer";
 import type { NavSection } from "@/utils/docs";
@@ -8,11 +11,50 @@ interface DocsLayoutProps {
 }
 
 export function DocsLayout({ navigation, children }: DocsLayoutProps) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
   return (
     <div className="docs-layout">
-      <Sidebar navigation={navigation} />
+      <Sidebar
+        navigation={navigation}
+        isOpen={mobileMenuOpen}
+        onClose={() => setMobileMenuOpen(false)}
+      />
       <main className="docs-content">
         <div className="docs-top-bar">
+          <div className="docs-mobile-header">
+            <div className="docs-mobile-brand">
+              <a href="https://everyrow.io" className="docs-mobile-logo-text">everyrow</a>
+              <a
+                href="https://futuresearch.ai"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="docs-mobile-futuresearch-link"
+              >
+                by futu<span className="highlight">re</span>search
+              </a>
+            </div>
+            <button
+              className="docs-mobile-menu-btn"
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              aria-label="Toggle navigation menu"
+            >
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <line x1="3" y1="6" x2="21" y2="6" />
+                <line x1="3" y1="12" x2="21" y2="12" />
+                <line x1="3" y1="18" x2="21" y2="18" />
+              </svg>
+            </button>
+          </div>
           <a
             href="https://futuresearch.ai"
             target="_blank"

docs-site/src/components/Sidebar.tsx

@@ -6,20 +6,22 @@ import type { NavSection } from "@/utils/docs";
 
 interface SidebarProps {
   navigation: NavSection[];
+  isOpen?: boolean;
+  onClose?: () => void;
 }
 
-export function Sidebar({ navigation }: SidebarProps) {
+export function Sidebar({ navigation, isOpen, onClose }: SidebarProps) {
   const pathname = usePathname();
 
   // Remove leading/trailing slashes for comparison
   // Note: usePathname() returns path without basePath, so no need to strip /docs
   const currentSlug = pathname.replace(/^\//, "").replace(/\/$/, "");
 
   return (
-    <aside className="docs-sidebar">
+    <aside className={`docs-sidebar ${isOpen ? "docs-sidebar-open" : ""}`}>
       <div className="docs-sidebar-logo">
         <a href="https://everyrow.io" className="docs-sidebar-logo-text">everyrow</a>
-        <Link href="/" className="docs-sidebar-logo-chip">docs</Link>
+        <Link href="/" className="docs-sidebar-logo-chip" onClick={onClose}>docs</Link>
       </div>
 
       {navigation.map((section) => (
@@ -33,6 +35,7 @@ export function Sidebar({ navigation }: SidebarProps) {
                   <Link
                     href={`/${item.slug}`}
                     className={isActive ? "active" : ""}
+                    onClick={onClose}
                   >
                     {item.title}
                   </Link>