From 0d818fcf70709aaee353f041e1ae162764f20c14 Mon Sep 17 00:00:00 2001 From: Guanzhou Song Date: Thu, 30 Jul 2026 12:42:05 -0400 Subject: [PATCH] Make the docs and reference sidebars responsive Both docs layouts render a fixed 320px sidebar with no responsive breakpoint, so on a 375px phone the sidebar consumes most of the viewport and article content is squeezed into a sliver. Documentation is the page mobile visitors from link aggregators land on most. The sidebar is now desktop-only (hidden below md), and mobile gets a native details/summary disclosure above the article with the same navigation links - no client JS involved, so it works identically in the static export. The article page's navigation markup is computed once and rendered in both places. Also demotes the sidebar's section label from h1 to p: the article's real h1 comes from the markdown content, so docs pages previously shipped two h1s, and the sidebar copy would have disappeared on mobile. Content padding tightens to p-4 on phones. --- app/docs/[section]/[[...slug]]/page.tsx | 87 +++++++++++++++---------- app/docs/reference/layout.tsx | 14 +++- 2 files changed, 66 insertions(+), 35 deletions(-) diff --git a/app/docs/[section]/[[...slug]]/page.tsx b/app/docs/[section]/[[...slug]]/page.tsx index 3e56997..6dc263e 100644 --- a/app/docs/[section]/[[...slug]]/page.tsx +++ b/app/docs/[section]/[[...slug]]/page.tsx @@ -80,6 +80,34 @@ export default async function ArticlePage({ params }: PageProps) { // Use title from frontmatter if available, otherwise fall back to navigation title or section name const pageTitle = frontmatter.title || selectedNavItem?.title || section; const showInstallPrimer = section === "getting-started" && file === "index"; + const sectionTitle = capitalCase(section) + .replace(/documentdb/i, 'DocumentDB') + .replace(/api/i, 'API'); + + // Rendered once, shown in the desktop sidebar and the mobile disclosure + const navigationLinks = navigation.map((item) => { + // Better matching logic for active state + // For index files, match both /section and /section/index + // For other files, match the specific file name + const itemPath = item.link.replace('/docs/', ''); + const currentPath = file === 'index' ? section : `${section}/${file}`; + const isActive = itemPath === currentPath || + (file === 'index' && itemPath === `${section}/index`) || + (item.link.includes(file) && file !== 'index'); + + return ( + + {item.title} + + ); + }); return (
@@ -94,8 +122,8 @@ export default async function ArticlePage({ params }: PageProps) {
- {/* Left Sidebar */} -
+ {/* Left Sidebar (desktop only; mobile gets the disclosure below) */} +
{/* Header */}
Back to Documentation -

- { - capitalCase(section) - .replace(/documentdb/i, 'DocumentDB') - .replace(/api/i, 'API') - } -

+ {/* Not a heading: the article's h1 comes from the markdown content */} +

+ {sectionTitle} +

{/* Menu Items */}
{/* Main Content */} -
+
+ {/* Mobile section navigation */} +
+ + {sectionTitle} navigation + +
+ + ← Back to Documentation + + +
+
+ {/* Coming Soon Component for coming-soon layout */} {frontmatter.layout === 'coming-soon' && } diff --git a/app/docs/reference/layout.tsx b/app/docs/reference/layout.tsx index 679440f..fd2abce 100644 --- a/app/docs/reference/layout.tsx +++ b/app/docs/reference/layout.tsx @@ -29,7 +29,8 @@ export default function ReferenceLayout({ >
-
+ {/* Sidebar (desktop only; mobile gets the disclosure below) */} +
-
+
+ {/* Mobile reference navigation */} +
+ + MQL reference navigation + +
+ +
+
{children}