Add responsive mobile navigation#7
Merged
Merged
Conversation
Addresses viewport overflow on iPhone-width screens by introducing a popover-based hamburger menu below 36rem breakpoint.
Hono JSX renders bare `popover` as `popover="true"` which relies on the invalid-value-default behavior. Explicit "auto" is clearer.
Three fixes: - Move display toggling to layout layer base rules (not media query fighting against components layer specificity) - Use position:fixed for popover card (top-layer elements can't use position:absolute relative to DOM ancestors) - Hide entire nav at mobile, show hamburger button to the right
The popover can't activate if its ancestor has display:none. Instead, rely on the popover's natural hidden state at mobile (UA stylesheet hides non-open popovers). Only apply display:contents override at desktop where we want the wrapper to be transparent.
The UA stylesheet for :popover-open sets inset:0, width:fit-content, and margin:auto which fights with our positioning. Reset with inset:auto, width:auto, height:auto before setting our values.
- Move popover attribute onto <nav> itself (eliminates empty wrapper element taking up flex gap space at mobile) - At mobile, only brand + button are visible flex children, so space-between puts button at right edge - Use physical 'right' instead of 'inset-inline-end' for reliable positioning in the top layer
The browser applies position:fixed and other styles to [popover] elements. At desktop we need the nav as a normal flex child, so explicitly reset position:static, inset:auto, etc.
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
1 participant
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.
Summary
On mobile-width viewports, the navigation links exceeded the screen width, overlapped the site brand, and caused horizontal scrolling. This adds a hamburger menu that collapses the nav at narrow widths.
How it works
The
<nav>element itself carries thepopover="auto"attribute. At desktop, CSS overrides the browser's default popover hiding so the nav participates in the header's flex layout normally. At mobile, the nav is hidden until the hamburger button activates it into the browser's top layer as a positioned card.Test plan