feat(www): merge mobile nav into the search drawer

[mehdibha]

What

Below lg the navbar now shows a single Menu trigger (hamburger) that opens the search drawer. The separate mobile nav drawer is deleted, and the "Open studio" CTA is desktop-only.

• header.tsx — one SearchCommand carries two triggers via RAC DialogTrigger context: search icon on lg+, hamburger below. GitHub, theme-toggle and the "Open studio" CTA are desktop-only (nav, GitHub and theme stay reachable in the drawer; Studio via its Navigation section). The /studio Export action portaled into HeaderActionsSlot is untouched and stays visible on mobile.
• search-command.tsx / search-dialog.tsx — autoFocus={!isMobile}: the mobile drawer opens with the keyboard closed (browse intent); desktop ⌘K still autofocuses. Added a Home link to the Navigation section for parity with the deleted menu.
• Deleted mobile-nav.tsx.

Why

The mobile nav drawer duplicated the search drawer's empty state — nav links, the full docs tree, GitHub, and theme toggle — in bigger type. Two navbar triggers opened near-identical drawers; merging them leaves one surface that covers both browse and search intent. The studio CTA is a conversion path to a desktop-first tool and crowded the 375px navbar; contextual actions (Export on /studio) keep their mobile slot.

Notes for review

• Verified at 375px (logo + hamburger only; drawer opens keyboard-closed with search field on top, Home/Docs/Components/Studio + docs sections below) and 1440px (unchanged: search/GitHub/theme icons + CTA, no hamburger, autofocused modal).
• Trade-off: first menu tap on mobile waits for the lazy search chunk (~25 KB gz) since touch gets no hover-warming. If it feels slow on real devices, a follow-up could preload on mobile viewports or warm on touchstart.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
dotui	Ready	Preview	Sep 2, 2026 3:33am UTC

[claude]

Code review

1 issue found.

Breakpoint mismatch: mobile menu trigger vs. drawer breakpoint

www/src/components/layout/header.tsx L104-L109 gates the hamburger trigger on lg:hidden (below 1024px), and the other header chrome (search icon, GitHub, theme toggle, "Open studio") is all max-lg:hidden — so this hamburger is the only trigger available in the 768–1023px band (e.g. iPad portrait, ~768–834px wide).

But www/src/components/search-command.tsx L96-L102 picks the Drawer-vs-Modal branch and autoFocus={!isMobile} from useIsMobile(), which uses a 768px breakpoint (www/src/registry/hooks/use-mobile.ts L1-L4).

So in the 768–1023px band, tapping this hamburger renders the desktop Modal branch with the search field autofocused, popping the on-screen keyboard open over the nav — the exact "punish browse intent" outcome the adjacent comment in search-command.tsx says this change avoids. It's also a regression from the deleted mobile-nav.tsx, which rendered <Drawer> unconditionally (no breakpoint check), so this viewport band previously got a keyboardless drawer.

Suggested fix: align the two breakpoints — e.g. gate the header trigger/chrome on md (768px) to match useIsMobile(), rather than lg.

Note: two other candidate findings (a registry-drift claim tied to an alleged drawer/base.tsx change, and an unapproved backdropClassName tweak) were investigated and found to be false positives — this PR does not touch www/src/registry/ at all.