Skip to content

Commit

Permalink
Keep sidebar open when clicking inside it
Browse files Browse the repository at this point in the history
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]>
  • Loading branch information
dscho committed Nov 12, 2024
1 parent c6e9a2b commit 7991fa4
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions assets/sass/sidebar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@ aside.sidebar.active {
border: none;
left: 0;
width: 1.6rem;
&:focus + .sidebar {
@include responsive-sidebar-ui;
}
}
.sidebar-btn:focus + .sidebar, .sidebar:focus-within {
@include responsive-sidebar-ui;
}
aside{
&.sidebar {
Expand Down

0 comments on commit 7991fa4

Please sign in to comment.