From b82f8a587dd764d3c8f580bde3073f8a00117cff Mon Sep 17 00:00:00 2001
From: squidfunk <martin.donath@squidfunk.com>
Date: Fri, 2 Dec 2022 18:57:42 +0100
Subject: [PATCH] Only show sidebar scrollbar on hover or focus

---
 .../stylesheets/main/layout/_sidebar.scss     | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/assets/stylesheets/main/layout/_sidebar.scss b/src/assets/stylesheets/main/layout/_sidebar.scss
index 9c031d500..ec319ab8b 100644
--- a/src/assets/stylesheets/main/layout/_sidebar.scss
+++ b/src/assets/stylesheets/main/layout/_sidebar.scss
@@ -133,24 +133,25 @@
     scrollbar-gutter: stable;
     scrollbar-color: var(--md-default-fg-color--lighter) transparent;
 
-    // Sidebar scroll wrapper on hover
-    &:hover {
-      scrollbar-color: var(--md-accent-fg-color) transparent;
-    }
-
     // Webkit scrollbar
     &::-webkit-scrollbar {
       width: px2rem(4px);
       height: px2rem(4px);
     }
 
-    // Webkit scrollbar thumb
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--md-default-fg-color--lighter);
+    // Sidebar scroll wrapper on focus/hover
+    &:focus-within,
+    &:hover {
+      scrollbar-color: var(--md-accent-fg-color) transparent;
 
-      // Webkit scrollbar thumb on hover
-      &:hover {
-        background-color: var(--md-accent-fg-color);
+      // Webkit scrollbar thumb
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--md-default-fg-color--lighter);
+
+        // Webkit scrollbar thumb on hover
+        &:hover {
+          background-color: var(--md-accent-fg-color);
+        }
       }
     }
   }