feat(web): add mobile drawer for docs navigation (#1985)

ComputelessComputer · devin-ai-integration[bot] · web-flow · commit 495cf0a0d2fe · 2025-11-29T16:10:18.000+09:00
* feat(web): add mobile drawer for docs navigation

- Add DocsDrawerContext to manage drawer state
- Add MobileDrawer component that shows docs navigation on mobile
- Add drawer icon (PanelLeft) to header that only appears on docs pages in mobile view
- Extract DocsNavigation component for reuse between sidebar and drawer

Co-Authored-By: john@hyprnote.com &lt;john@hyprnote.com&gt;

* fix(web): move DocsDrawerContext.Provider to _view/route.tsx

- Move the context provider to the parent layout so Header can access it
- Update docs/route.tsx to consume context instead of providing it
- This fixes the drawer icon not appearing in the header on docs pages

Co-Authored-By: john@hyprnote.com &lt;john@hyprnote.com&gt;

* Move header icon to prefix on small screens

Place the logo (and optional docs drawer button) in the header prefix for small screens so the icon appears on the left side instead of the suffix. This rearranges the mobile-only markup: the docs drawer button and homepage Link are wrapped together in the prefix sm:hidden container, and the duplicate docs-button in the suffix is removed to avoid rendering the icon on the right.

* Add padding between logo and drawer icon

Increase spacing between the logo and the drawer icon on small screens to improve visual balance and touch target separation. This adjusts the gap utility from 1 to 3 in the header component so the drawer button isn't crowded against the logo when viewing documentation pages.

* Show docs drawer toggle immediately when docs sidebar hides

Make the docs navigation toggle button available as soon as the documentation sidebar is not visible so users on smaller viewports can open the docs drawer without waiting. This change removes the sm-only wrapper around the left header block, adds a docs-drawer button (hidden on md+), and moves several nav links to be hidden on small screens (sm:block) to keep header layout consistent. This ensures the drawer toggle appears immediately when the left sidebar disappears, improving navigation for documentation pages on narrow screens.

* Align docs drawer under header and unify hierarchy

Place the mobile documentation drawer inside the main _view route so it shares the same layout/hierarchy as the header and shows below it (header on top, drawer then body). This removes the separate drawer implementation from the docs route and reuses a MobileDocsDrawer in the top-level _view route. The change moves drawer rendering into the main layout, wires up docs data and routing for navigation links, and adjusts styles/animations to display the drawer beneath the header on mobile.

Summary of changes:
- Remove MobileDrawer component and related hook usage from apps/web/src/routes/_view/docs/route.tsx.
- Add MobileDocsDrawer, DocsNavigation, and required imports (allDocs, X icon, docsStructure, useMatchRoute, useMemo) to apps/web/src/routes/_view/route.tsx.
- Render MobileDocsDrawer conditionally under Header in the top-level _view route and manage isOpen state there.
- Build docs sections and links for the drawer using content-collections and docsStructure, preserving currentSlug highlighting and onLink close behavior.

* Make docs drawer interactive and dynamic

Refine the documentation drawer to behave like a collapsible drawer with a dynamic icon and toggle behavior. Clicking the drawer icon now toggles open/closed state (and updates aria-label accordingly), and the drawer markup/CSS was adjusted for smoother transitions, larger max height, and simplified structure to remove the separate close button and header.

Changes:
- Toggle docsDrawer.isOpen when icon button is clicked and swap PanelLeft/PanelLeftClose icons.
- Update aria-label to reflect open/close state.
- Adjust drawer container classes (max-height, borders, shadow, transition) and simplify internal structure; remove explicit close button and header, increase scrollable area.

* Slide docs drawer in from left, match header z-index

Make the mobile docs drawer slide in from the left instead of dropping down from the top, set its height to calc(100vh - 69px) so it fits beneath the header, and ensure its z-index matches/overlaps the header by using z-50 with an overlay at z-40. This improves the mobile docs UX and keeps the footer/main layout stable by moving Outlet and Footer positions.

Changes:
- Move Outlet and Footer placement inside main layout to ensure proper structure.
- Replace previous top-down collapsible block with a left sliding fixed drawer and backdrop overlay.
- Add positioning, height, width, borders, shadow, and transition classes for smooth slide animation.
- Keep DocsNavigation inside a scrollable container within the drawer.

* Remove backdrop overlay and add right-side shadow to drawer

Simplify mobile drawer UI by removing the fullscreen backdrop and embedding the drawer directly. Replaced the overlay with a drawer container that always renders and uses translate-x for show/hide, added larger shadow (shadow-2xl with neutral tint) and minor structure adjustments so navigation stays scrollable and closes on link click. This reduces DOM elements and implements the requested right-side shadow instead of a backdrop.

---------

Co-authored-by: Devin AI &lt;158243242+devin-ai-integration[bot]@users.noreply.github.com&gt;
diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
@@ -1,7 +1,14 @@
 import { Link, useRouterState } from "@tanstack/react-router";
-import { ChevronDown, ChevronUp, Menu } from "lucide-react";
+import {
+  ChevronDown,
+  ChevronUp,
+  Menu,
+  PanelLeft,
+  PanelLeftClose,
+} from "lucide-react";
 import { useState } from "react";
 
+import { useDocsDrawer } from "@/hooks/use-docs-drawer";
 import { getPlatformCTA, usePlatform } from "@/hooks/use-platform";
 
 function scrollToHero() {
@@ -39,6 +46,8 @@ export function Header() {
   const platformCTA = getPlatformCTA(platform);
   const router = useRouterState();
   const maxWidthClass = getMaxWidthClass(router.location.pathname);
+  const isDocsPage = router.location.pathname.startsWith("/docs");
+  const docsDrawer = useDocsDrawer();
 
   return (
     <>
@@ -47,7 +56,24 @@ export function Header() {
           className={`${maxWidthClass} mx-auto px-4 laptop:px-0 border-x border-neutral-100 h-full`}
         >
           <div className="flex items-center justify-between h-full">
-            <div className="hidden sm:flex items-center gap-5">
+            <div className="flex items-center gap-5">
+              {isDocsPage && docsDrawer && (
+                <button
+                  onClick={() => docsDrawer.setIsOpen(!docsDrawer.isOpen)}
+                  className="md:hidden px-3 h-8 flex items-center text-sm border border-neutral-200 rounded-full hover:bg-neutral-50 active:scale-[98%] transition-all"
+                  aria-label={
+                    docsDrawer.isOpen
+                      ? "Close docs navigation"
+                      : "Open docs navigation"
+                  }
+                >
+                  {docsDrawer.isOpen ? (
+                    <PanelLeftClose className="text-neutral-600" size={16} />
+                  ) : (
+                    <PanelLeft className="text-neutral-600" size={16} />
+                  )}
+                </button>
+              )}
               <Link
                 to="/"
                 className="font-semibold text-2xl font-serif hover:scale-105 transition-transform mr-4"
@@ -59,7 +85,7 @@ export function Header() {
                 />
               </Link>
               <div
-                className="relative"
+                className="relative hidden sm:block"
                 onMouseEnter={() => setIsProductOpen(true)}
                 onMouseLeave={() => setIsProductOpen(false)}
               >
@@ -130,13 +156,13 @@ export function Header() {
               </Link>
               <Link
                 to="/blog"
-                className="text-sm text-neutral-600 hover:text-neutral-800 transition-all hover:underline decoration-dotted"
+                className="hidden sm:block text-sm text-neutral-600 hover:text-neutral-800 transition-all hover:underline decoration-dotted"
               >
                 Blog
               </Link>
               <Link
                 to="/pricing"
-                className="text-sm text-neutral-600 hover:text-neutral-800 transition-all hover:underline decoration-dotted"
+                className="hidden sm:block text-sm text-neutral-600 hover:text-neutral-800 transition-all hover:underline decoration-dotted"
               >
                 Pricing
               </Link>
@@ -148,17 +174,6 @@ export function Header() {
               </Link>
             </div>
 
-            <Link
-              to="/"
-              className="sm:hidden font-semibold text-2xl font-serif hover:scale-105 transition-transform"
-            >
-              <img
-                src="/api/images/hyprnote/logo.svg"
-                alt="Hyprnote"
-                className="h-6"
-              />
-            </Link>
-
             <nav className="hidden sm:flex items-center gap-2">
               <Link
                 to="/join-waitlist"
diff --git a/apps/web/src/hooks/use-docs-drawer.ts b/apps/web/src/hooks/use-docs-drawer.ts
@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+
+interface DocsDrawerContextType {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+}
+
+export const DocsDrawerContext = createContext<DocsDrawerContextType | null>(
+  null,
+);
+
+export function useDocsDrawer() {
+  return useContext(DocsDrawerContext);
+}
diff --git a/apps/web/src/routes/_view/docs/route.tsx b/apps/web/src/routes/_view/docs/route.tsx
@@ -75,32 +75,50 @@ function LeftSidebar() {
   return (
     <aside className="hidden md:block w-64 shrink-0">
       <div className="sticky top-[69px] max-h-[calc(100vh-69px)] overflow-y-auto scrollbar-hide space-y-6 px-4 py-6">
-        <nav className="space-y-4">
-          {docsBySection.sections.map((section) => (
-            <div key={section.title}>
-              <h3 className="px-3 text-sm font-semibold text-neutral-700 mb-2">
-                {section.title}
-              </h3>
-              <div className="space-y-0.5">
-                {section.docs.map((doc) => (
-                  <Link
-                    key={doc.slug}
-                    to="/docs/$"
-                    params={{ _splat: doc.slug }}
-                    className={`block px-3 py-1.5 text-sm rounded-sm transition-colors ${
-                      currentSlug === doc.slug
-                        ? "bg-neutral-100 text-stone-600 font-medium"
-                        : "text-neutral-600 hover:text-stone-600 hover:bg-neutral-50"
-                    }`}
-                  >
-                    {doc.title}
-                  </Link>
-                ))}
-              </div>
-            </div>
-          ))}
-        </nav>
+        <DocsNavigation
+          sections={docsBySection.sections}
+          currentSlug={currentSlug}
+        />
       </div>
     </aside>
   );
 }
+
+function DocsNavigation({
+  sections,
+  currentSlug,
+  onLinkClick,
+}: {
+  sections: { title: string; docs: (typeof allDocs)[0][] }[];
+  currentSlug: string | undefined;
+  onLinkClick?: () => void;
+}) {
+  return (
+    <nav className="space-y-4">
+      {sections.map((section) => (
+        <div key={section.title}>
+          <h3 className="px-3 text-sm font-semibold text-neutral-700 mb-2">
+            {section.title}
+          </h3>
+          <div className="space-y-0.5">
+            {section.docs.map((doc) => (
+              <Link
+                key={doc.slug}
+                to="/docs/$"
+                params={{ _splat: doc.slug }}
+                onClick={onLinkClick}
+                className={`block px-3 py-1.5 text-sm rounded-sm transition-colors ${
+                  currentSlug === doc.slug
+                    ? "bg-neutral-100 text-stone-600 font-medium"
+                    : "text-neutral-600 hover:text-stone-600 hover:bg-neutral-50"
+                }`}
+              >
+                {doc.title}
+              </Link>
+            ))}
+          </div>
+        </div>
+      ))}
+    </nav>
+  );
+}
diff --git a/apps/web/src/routes/_view/route.tsx b/apps/web/src/routes/_view/route.tsx
@@ -1,12 +1,18 @@
 import {
   createFileRoute,
+  Link,
   Outlet,
+  useMatchRoute,
   useRouterState,
 } from "@tanstack/react-router";
-import { createContext, useContext, useState } from "react";
+import { allDocs } from "content-collections";
+import { createContext, useContext, useMemo, useState } from "react";
 
 import { Footer } from "@/components/footer";
 import { Header } from "@/components/header";
+import { DocsDrawerContext } from "@/hooks/use-docs-drawer";
+
+import { docsStructure } from "./docs/structure";
 
 export const Route = createFileRoute("/_view")({
   component: Component,
@@ -27,6 +33,7 @@ function Component() {
   const router = useRouterState();
   const isDocsPage = router.location.pathname.startsWith("/docs");
   const [onTrigger, setOnTrigger] = useState<(() => void) | null>(null);
+  const [isDocsDrawerOpen, setIsDocsDrawerOpen] = useState(false);
 
   return (
     <HeroContext.Provider
@@ -35,13 +42,131 @@ function Component() {
         setOnTrigger: (callback) => setOnTrigger(() => callback),
       }}
     >
-      <div className="min-h-screen flex flex-col">
-        <Header />
-        <main className="flex-1">
-          <Outlet />
-        </main>
-        {!isDocsPage && <Footer />}
-      </div>
+      <DocsDrawerContext.Provider
+        value={{ isOpen: isDocsDrawerOpen, setIsOpen: setIsDocsDrawerOpen }}
+      >
+        <div className="min-h-screen flex flex-col">
+          <Header />
+          <main className="flex-1">
+            <Outlet />
+          </main>
+          {!isDocsPage && <Footer />}
+          {isDocsPage && (
+            <MobileDocsDrawer
+              isOpen={isDocsDrawerOpen}
+              onClose={() => setIsDocsDrawerOpen(false)}
+            />
+          )}
+        </div>
+      </DocsDrawerContext.Provider>
     </HeroContext.Provider>
   );
 }
+
+function MobileDocsDrawer({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+}) {
+  const matchRoute = useMatchRoute();
+  const match = matchRoute({ to: "/docs/$", fuzzy: true });
+
+  const currentSlug = (
+    match && typeof match !== "boolean" ? match._splat : undefined
+  ) as string | undefined;
+
+  const docsBySection = useMemo(() => {
+    const sectionGroups: Record<
+      string,
+      { title: string; docs: (typeof allDocs)[0][] }
+    > = {};
+
+    allDocs.forEach((doc) => {
+      if (doc.slug === "index" || doc.isIndex) {
+        return;
+      }
+
+      const sectionName = doc.section;
+
+      if (!sectionGroups[sectionName]) {
+        sectionGroups[sectionName] = {
+          title: sectionName,
+          docs: [],
+        };
+      }
+
+      sectionGroups[sectionName].docs.push(doc);
+    });
+
+    Object.keys(sectionGroups).forEach((sectionName) => {
+      sectionGroups[sectionName].docs.sort((a, b) => a.order - b.order);
+    });
+
+    const sections = docsStructure.sections
+      .map((sectionId) => {
+        const sectionName =
+          sectionId.charAt(0).toUpperCase() + sectionId.slice(1);
+        return sectionGroups[sectionName];
+      })
+      .filter(Boolean);
+
+    return { sections };
+  }, []);
+
+  return (
+    <div
+      className={`fixed top-[69px] left-0 h-[calc(100vh-69px)] w-72 bg-white border-r border-neutral-100 shadow-2xl shadow-neutral-900/20 z-50 md:hidden transition-transform duration-300 ease-in-out ${
+        isOpen ? "translate-x-0" : "-translate-x-full"
+      }`}
+    >
+      <div className="h-full overflow-y-auto p-4">
+        <DocsNavigation
+          sections={docsBySection.sections}
+          currentSlug={currentSlug}
+          onLinkClick={onClose}
+        />
+      </div>
+    </div>
+  );
+}
+
+function DocsNavigation({
+  sections,
+  currentSlug,
+  onLinkClick,
+}: {
+  sections: { title: string; docs: (typeof allDocs)[0][] }[];
+  currentSlug: string | undefined;
+  onLinkClick?: () => void;
+}) {
+  return (
+    <nav className="space-y-4">
+      {sections.map((section) => (
+        <div key={section.title}>
+          <h3 className="px-3 text-sm font-semibold text-neutral-700 mb-2">
+            {section.title}
+          </h3>
+          <div className="space-y-0.5">
+            {section.docs.map((doc) => (
+              <Link
+                key={doc.slug}
+                to="/docs/$"
+                params={{ _splat: doc.slug }}
+                onClick={onLinkClick}
+                className={`block px-3 py-1.5 text-sm rounded-sm transition-colors ${
+                  currentSlug === doc.slug
+                    ? "bg-neutral-100 text-stone-600 font-medium"
+                    : "text-neutral-600 hover:text-stone-600 hover:bg-neutral-50"
+                }`}
+              >
+                {doc.title}
+              </Link>
+            ))}
+          </div>
+        </div>
+      ))}
+    </nav>
+  );
+}
