From 7991fa4b1d7f3367eaca3740383450450891c395 Mon Sep 17 00:00:00 2001 From: Johannes Schindelin Date: Tue, 12 Nov 2024 20:32:13 +0100 Subject: [PATCH] Keep sidebar open when clicking inside it The "sidebar menu" is implemented via two
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 https://github.com/git/git-scm.com/issues/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 --- assets/sass/sidebar.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/sass/sidebar.scss b/assets/sass/sidebar.scss index caeb49fde2..c0946f71f6 100644 --- a/assets/sass/sidebar.scss +++ b/assets/sass/sidebar.scss @@ -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 {