fix(docs): resolve duplicate mobile burger menu and delegate popover toggle - #1366
Merged
Merged
Conversation
…toggle Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>
Contributor
|
Visit the preview URL for this PR (updated for commit 52a867c): https://httparchive--pr1366-fix-docs-duplicate-m-6w5tdte4.web.app (expires Sun, 11 Oct 2026 20:16:06 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 1069cba7974889c25bacf4f0a19ddb6735592729 |
tunetheweb
approved these changes
Oct 4, 2026
tunetheweb
left a comment
Member
There was a problem hiding this comment.
Pity there isn’t a programmatic way to turn it off in Starlight.
…bserver Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>
… with CSS Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>
… css Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>
Contributor
Author
|
A straightforward override now. |
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.
Description
Resolves an issue where two hamburger buttons appeared side-by-side in docs on mobile viewports.
Root Cause
When
@astrojs/starlightwas upgraded to0.42.4, the mobile menu toggle mechanism was refactored to use the native HTML Popover API with<button class="sl-menu-button">, deprecating the older<starlight-menu-button>custom element.Solution
MobileMenuTogglewith./src/components/docs/EmptyComponent.astro(matching the pattern already used forThemeSelect). Starlight no longer renders<button class="sl-menu-button">.starlight-menu-buttonstyle rule.body:has(.sidebar-pane:popover-open) { overflow: hidden; }(which respects stylelint rules and replaces the style previously bundled in Starlight's default toggle component)..hamburgerclick listener to control#starlight__sidebardirectly using the native Popover API (sidebar.togglePopover()).aria-expandedvia nativetoggleevents dispatched on#starlight__sidebar.MutationObserverwatchingdata-mobile-menu-expandedondocument.body.Verification
sl-menu-buttongenerated..hamburgeropens and closes the drawer, updatesaria-expanded, and dismisses properly via Escape key.starlight-custom.cssis completely untouched, eliminating stylelintselector-id-patternerrors in CI.npm run astro:buildbuilds cleanly.npm testpasses (all 78 tests passed).