Keep sidebar open when clicking inside it #1917
Merged
Conversation
This file contains 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
The "sidebar menu" is implemented via two <div>s, one acting as the button (`.sidebar-btn`), the other as the menu (`.sidebar`). The menu is shown by virtue of a `.sidebar-btn:focus + .sidebar` rule that sets the `transform` attribute to 0 (it defaults to -105.5%). The big problem with this design is that clicking inside the sidebar menu transfers focus away from the button, and the sidebar menu vanishes. Typically without following the link that the viewer clicked, as reported in git#1916. Let's let the sidebar menu be shown also when the focus is within said menu, via the `:focus-within` pseudo-class (for more details, see https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within), which is supported reasonably widely by browsers. Signed-off-by: Johannes Schindelin <[email protected]>
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.
Changes
This fixes #1916
Context
When the screen is small (or the Zoom factor set high), the navigation menu is not shown anymore by default. Instead, there is a sidebar button on the left side, and clicking it will open the "sidebar menu".
However, clicking a link in that menu makes the menu disappear, and the link is not actually followed. (For some reason, this works on mobile devices, but not on the Desktop.)
By playing a little CSS trick, we can keep the sidebar menu open, though, when a link inside it is clicked, which this here PR does.