fix: restore docs sidebar access on mobile#10
Merged
Conversation
Each docs section layout passes nav={{ enabled: false }} to fumadocs
DocsLayout to avoid duplicating the site Navbar. That also removes
fumadocs's mobile SidebarTrigger, which lived inside the disabled nav,
leaving the sidebar drawer (section picker + page tree) unreachable
below the md breakpoint.
Add a DocsSidebarTrigger client component that calls useSidebar() from
fumadocs's RootProvider context, and render it in the site Navbar's
existing mobile cluster. It only mounts on /docs routes and only at
viewports below md, where the desktop sidebar is hidden.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Reworks the mobile nav pattern on /docs so users get one hamburger trigger instead of two stacked icons. The site hamburger opens the fumadocs sidebar; inside it, a "Main menu →" button overlays the site nav drawer on top. Closing peels one layer at a time. On non-docs routes the hamburger behaves as before. While in there, two real bugs: - The site drawer used to render as a child of <header>. When the header gets backdrop-blur (scrolled state), it establishes a new containing block for position:fixed descendants — the drawer's inset-0 collapses to the header's tiny vertical box and renders invisible. Drawer now portals to document.body via createPortal. - Scroll lock used overflow:hidden on <html>, which strips position:sticky of its scrolling ancestor and drops the header out of the viewport when the menu opens after scrolling. Switched to overflow:clip — same lock, no scroll container established, sticky preserved. Plus a 1rem top-padding rule on #nd-sidebar-mobile (banner was flush against the header) and a small MobileNavProvider context so the "Main menu →" button inside the docs sidebar can drive site-drawer state from inside <main>. Deletes the standalone DocsSidebarTrigger introduced in #9 — that dual-icon approach is superseded by the stacked-drawer pattern. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
mdbreakpoint.nav={{ enabled: false }}on fumadocsDocsLayout(to avoid duplicating the siteNavbar), which also removes fumadocs's mobileSidebarTriggersince it lives inside that disabled nav. The drawer's only built-in opener went with it.DocsSidebarTriggerclient component that usesuseSidebar()from fumadocs'sRootProvidercontext, rendered in the siteNavbar's existing mobile cluster. Mounts only on/docs*and only belowmd(where the desktop sidebar is hidden).Why this approach
Three options were considered:
Navbar— keeps the docs-section layouts untouched, no extra strip on mobile, uses fumadocs primitives as designed. One file changed plus one new component.nav={{ component: <DocsMobileBar /> }}per docs layout — adds an extra horizontal bar and per-section editing.Files
src/components/docs/docs-sidebar-trigger.tsx(~30 LOC client component).src/components/layout/navbar.tsx— import + 1 line render slot inside the existing mobile cluster.Verified
/docs): trigger visible (32×32,display:flex); click flipsaria-expanded/#nd-sidebar-mobile[data-state]toopen; drawer slides in with theDocsTogglesection picker + 48 nav links./docs): trigger correctlydisplay:none(md:hidden);#nd-sidebardesktop sidebar visible./(non-docs): trigger absent from SSR HTML.*.sourceandapi-nav.generatedunchanged).Test plan
/docs(and/docs/fleet-ops,/docs/storefront, etc.) at <768px in DevTools — confirm a panel-icon button appears between the theme toggle and the site hamburger./,/pricing, etc. — trigger does not render anywhere on non-docs routes.Supersedes #9 (closed when its head branch was renamed from
claude/beautiful-wilbur-8a2d95tofix/fumadocs-mobile-sidebar).🤖 Generated with Claude Code