Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Keep sidebar open when clicking inside it #1917

Merged
merged 1 commit into from
Nov 12, 2024
Merged

Conversation

dscho
Copy link
Member

@dscho dscho commented Nov 12, 2024

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.

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 <johannes.schindelin@gmx.de>
@dscho dscho self-assigned this Nov 12, 2024
@dscho dscho merged commit 977eccd into git:gh-pages Nov 12, 2024
1 check passed
@dscho dscho deleted the fix-sidebar-btn branch November 12, 2024 21:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Problem using zoom in the page
1 participant