Skip to content

Re-wire MobileMenu into Chrome.tsx on top of main's nav #87

Closed

Description

@yigitdot

Context

PR #56 (feat/mobile-menu-drawer) was developed before the /blog routes landed on main. When merging main back into the branch in commit ae1fcc3, the Chrome.tsx integration was parked: Chrome.tsx was reset to main's version verbatim and lib/sections.ts was deleted. The drawer's other pieces still ship in the PR:

  • components/site/MobileMenu.tsx (compiles standalone with inlined section constants)
  • The .mm-toggle / overlay / panel block in app/globals.css
  • The --mm-i augmentation in types/css.d.ts

…but they're unreferenced. The mobile menu does not render until Chrome.tsx is re-wired.

The rollback was the right call short-term — main's Chrome.tsx had picked up next/link, /#section anchors (required so the navbar works from /blog/* routes), and a new Blog link, all of which would have made hand-stitching a hybrid risky. Easier to re-do the integration cleanly on top of main than to defend the merge resolution in review.

What needs to happen

  1. Re-import and render MobileMenu inside Chrome.tsx, after the Litepaper link in the right cluster.
  2. Add mobileOpen state + a handleMobileOpenChange callback (useCallback) passed in as onOpenChange.
  3. Compute toggleTone: mobileOpen ? \"paper\" : onDark ? \"ink\" : \"paper\". Pass as the tone prop.
  4. Hide desktop links on phones: add hidden ... md:flex to the Docs / Blog / Litepaper links so the drawer toggle replaces them <md. Don't break the border-b border-current pb-[2px] migration on Docs/Blog.
  5. Add Blog to MobileMenu.tsx's EXTERNAL list (between Docs and Litepaper, external: false) so the drawer matches the desktop nav.
  6. Decide on lib/sections.ts — if Chrome and MobileMenu both want the same SECTION_IDS / NAV_SECTIONS / DARK_SECTIONS, re-extract; otherwise leave inline in both.

Pointers

  • Last working integration: commit c240b60 (pre-merge HEAD of this branch).
  • Verbatim main baseline: commit ae1fcc3 (the merge commit).
  • Diff that needs reapplying lives in c240b60..ae1fcc3^1 -- components/site/Chrome.tsx lib/sections.ts.

Verification

  • pnpm lint && pnpm test && pnpm build must pass.
  • Manual smoke at /, / on a <md viewport, /blog/, /blog/<slug> — see the verification block in the original plan.

Tracked from PR #56.

Activity

  1. added a commit that references this issue on May 11, 2026
    75c7fab
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    Priority

    None yet

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions