Skip to content

docs: add site-wide sidebar, homepage GitHub link, and fix mobile table overflow - #265

Merged
uhyo merged 4 commits into
masterfrom
docs/site-navigation-improvements
Oct 8, 2026
Merged

uhyo merged 4 commits into
masterfrom
docs/site-navigation-improvements

Conversation

@uhyo

@uhyo uhyo commented Oct 8, 2026

Copy link
Copy Markdown
Owner

Improves navigation and mobile layout of the docs site. One commit per issue.

Changes

Fix wide tables zooming out the page on mobile (#262)

  • Props tables on the Components and Utilities pages are wrapped in a .table-scroll container, so they scroll horizontally on their own instead of widening the page.
  • Long type names in API item headings (e.g. RouteComponentPropsWithData<TParams, TData, TState> on the Types page) can now wrap. This was another overflow source on narrow screens.

Measured at a 390px mobile viewport: before, /api/components laid out at 587px, /api/utilities at 489px and /api/types at 409px. After, every docs page lays out at 390px.

Site-wide documentation sidebar (#261)

  • New DocsLayout (sidebar + content). In App.tsx, all doc pages except Home and 404 are wrapped in a pathless route that uses it. Most of the App.tsx diff is re-indentation.
  • The sidebar stays visible while scrolling (position: sticky) and lists all pages grouped into Getting Started, Learn, API Reference and Resources. The current page is highlighted and marked with aria-current="page". On first load, the sidebar scrolls so the active link is in view.
  • The navigation data lives in a new navigation.ts. The sidebar, the mobile menu and the existing Learn/API in-page navs all read from it.
  • At 1024px and below, the sidebar is hidden. At mobile widths, the hamburger menu shows Home plus the full docs navigation and scrolls when it's taller than the screen.
  • The in-page Learn/API navs are kept at all widths.

GitHub link (#260)

  • Added a GitHub button next to "Get Started" and "API Reference" on the homepage.
  • The mobile menu now includes a GitHub link (under Resources). Before, there was no GitHub link at mobile widths.

Verification

  • pnpm --filter funstack-router-docs typecheck, pnpm lint and pnpm format:check pass, and the docs site builds (Node 24).
  • Checked the built site in headless Chromium:
    • the pre-rendered HTML includes the sidebar;
    • clicking a sidebar link navigates client-side and updates the highlight;
    • the mobile menu closes after a link is tapped;
    • no console errors;
    • no horizontal overflow at 390px on any docs page.

Closes #260
Closes #261
Closes #262

🤖 Generated with Claude Code

https://claude.ai/code/session_01HFdmEE6GBwx33cNXgjcv7d


Generated by Claude Code

claude added 4 commits October 8, 2026 09:52
Wrap props tables in a horizontally scrollable container and allow long
type names in API item headings to wrap, so the Components, Utilities and
Types pages no longer render zoomed out on narrow screens.

Closes #262

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HFdmEE6GBwx33cNXgjcv7d
Documentation pages now show a sticky sidebar listing all pages grouped by
section, with the current page highlighted. On narrow screens the same
navigation (including a GitHub link) is available from the hamburger menu.

Closes #261

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HFdmEE6GBwx33cNXgjcv7d
Closes #260

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HFdmEE6GBwx33cNXgjcv7d
@uhyo
uhyo merged commit a288ca0 into master Oct 8, 2026
1 check passed
@uhyo
uhyo deleted the docs/site-navigation-improvements branch October 8, 2026 10:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants