Repository navigation
Add a mobile nav panel and surface the footer-only pages - #376
Merged
Merged
Conversation
Uses, Restaurants, and Patents were reachable only from the footer, so finding them meant scrolling past the whole page. A "More" dropdown in the header was the obvious fix and the wrong one: it would hide three links behind a label that promises nothing, and cost a focus trap, an outside-click handler, and a second stacking context inside a sticky header. Instead: - The header gains Uses and drops Home, which the wordmark beside it already covers. Three links, same width as before. - Below `sm` the links collapse into a labelled disclosure panel. It is vertical, so rows are free, and it lists the footer-only pages as well — on a phone the footer is the longest possible scroll away. The panel mounts on open so its links are never focusable while closed, closes on Escape (returning focus), on an outside press, and after navigating, and is positioned against the header so opening it cannot change the header's height. - Patents, Restaurants, and Uses are linked from homepage copy that is already about each subject, which beats a menu item nobody opens. `--header-height` is now one value: the row no longer wraps at any width, and the menu button's 44px touch target is absorbed by less vertical padding rather than a taller bar. The old mobile value had drifted 21px from what the header actually measured. e2e/navigation.test.ts covers the header, the panel's open/close paths and keyboard behaviour, the footer, the new body links, and asserts the header measures what its token claims at every width. Claude-Session: https://claude.ai/code/session_01TieSfUY4PZi6kb6AStpydh
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
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
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.
Why
Uses, Restaurants, and Patents were reachable only from the footer, so finding them meant scrolling past the whole page.
The obvious fix was an "Other links" dropdown in the header. It's the wrong one for three links: a
More-style label promises nothing, so people don't open it, and it would buy a focus trap, an outside-click handler, and a second stacking context inside a sticky header — real machinery for very little.What changed
Header gains
Usesand dropsHome, which the wordmark beside it already covers. Still three links, same width as before. Uses is the one of the three with real audience overlap: people reading the blog are the people who want the tools page.Mobile nav. Below
smthe links collapse into a labelled "Menu" disclosure panel — a word next to the bars, not a bare glyph. The panel is vertical, so rows are free and it lists the footer-only pages too; on a phone the footer is the longest possible scroll away, which is the version of this problem actually worth solving.Escape(returning focus to the button), on an outside press, and after navigating--header-heightBody copy links. Patents, Restaurants, and Uses are now linked from homepage prose that is already about each subject — the tooling section links to
/uses, the bio mentions the patents, the podcasts aside mentions the restaurant list. A visible link in relevant content beats a hidden menu item.--header-heightis now one value. The row no longer wraps at any width, and the button's 44px target is absorbed by less vertical padding rather than a taller bar. The old mobile value (5.5rem) had drifted 21px from what the header actually measured, which quietly over-padded every in-page anchor on mobile.Testing
e2e/navigation.test.tsis new — 14 tests covering the desktop header, the panel's open/close paths, keyboard operation and tab order, the footer set, the new body links, and an assertion that the header measures what its token claims at 375/640/1280.Full suite: 79 passed.
Also updated
DESIGN.mdandCLAUDE.md— the "taller belowsm" note was now false, and the reasoning against the dropdown is worth keeping so it isn't re-litigated.https://claude.ai/code/session_01TieSfUY4PZi6kb6AStpydh