Design: top navigation has no responsive/mobile treatment (12 links wrap into a block)

[dmccoystephenson]

Surface: components/TopBar.tsx.

Opportunity. The top bar renders all twelve destinations as inline buttons in a single flexWrap: 'wrap' row — eight internal pages (Home, News, Guides, Leaderboard, About, Road Map, Commissions, Account) plus four external community links (Discord, Patreon, LinkedIn, RPKit). There is no hamburger menu, drawer, or overflow. On a phone the row wraps into a tall, ragged multi-line block that pushes the page content down and reads as cluttered; even on desktop, twelve flat top-level items is a lot to scan.

Suggested direction.

• Below a breakpoint, collapse navigation into a standard MUI hamburger → Drawer (or Menu), the convention users expect on mobile.
• Consider grouping the four external/community links behind a "Community" menu (they already carry external-link icons), so the primary in-site nav is shorter and clearer at all sizes.

Why it matters (responsive design / information architecture). Mobile is a large share of web traffic; the current bar is the first thing every visitor sees and is the weakest at small sizes. A conventional collapsed nav also tidies the desktop header.

Filed during a design review; verified TopBar.tsx renders all links inline with flexWrap and no Drawer/Menu. Drafted by Claude on behalf of Daniel Stephenson.

[dmccoystephenson]

Deferred by the autonomous polish loop: a hamburger/Drawer redesign of the 12-link nav is a larger responsive refactor that needs real mobile/visual verification (which the loop can't do beyond npm run build), so it's better as a dedicated, human-reviewed PR rather than an auto-merged polish change.