fix(sidebar): move the rail collapse toggle into the header row - #804
Draft
smmariquit wants to merge 1 commit into
Draft
fix(sidebar): move the rail collapse toggle into the header row#804smmariquit wants to merge 1 commit into
smmariquit wants to merge 1 commit into
Conversation
The toggle was a NavLink in the `.top` flow between the logo and the
destination list, so with the rail expanded it rendered a full-width
labelled row reading "Collapse menu" directly above Maps — a control
styled and positioned as the first place you can go. Same on the mobile
drawer, where it read "Close menu".
It now sits in a `.sidebar-header` row beside the wordmark, right-aligned
and icon-only, on the expanded rail and the mobile drawer; the 4rem
collapsed rail has no room for a second item on that row, so it stays
stacked under the logo but grouped with it instead of floating between
the logo and the nav.
Behaviour is unchanged (handleRailToggle still branches on isMobileRail).
aria-label still names the state ("Expand menu" / "Collapse menu" /
"Close menu"), tab order still puts it right after the home button, and
the hit target is >= 44px in every state.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Problem
The rail retract/expand arrow sat as a
NavLinkin the.topflow, between the logo button and the.categoriesgroup.Change
Logo button + toggle now live in one
.sidebar-headerrow.margin-left: auto), icon-only. Reclaims a full row; Maps is the first list item again.handleRailToggleand itsisMobileRailbranch are untouched; only placement and label mode changed. The NavLink is nowexpanded={false}in every state, so it never renders an inline label and never switches tooltip modes (the class of bug behind #755/#757).Verification
Built with
build:e2e, serveddist/server/entry.mjswith realDATABASE_URL+PUBLIC_MAPTILER_KEY, driven headless.Expand menuCollapse menuClose menuClose menuaside.retractedreapplied).e2e/browse/search-collapse.spec.tsresolves the control bygetByRole("button", { name: "Close menu" }); the aria-label is unchanged.bunx vitest run161 pass,bun run test438 pass,bunx biome checkclean on touched files,bun run buildgreen. Added a component test pinning the toggle to.sidebar-header, out of.categories, and nevernav-link--expanded.Left alone
Draft, and deliberately no
run/e2elabel — a serial CI queue is running and concurrent E2E runs exhaust the shared pooler.