From 7c3cf69afef2de6cfc0cfe267b7fcefba50ec664 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 3 Feb 2023 10:44:22 +0300
Subject: [PATCH] Show scrollbar only on hover

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../renderer/components/layout/sidebar.module.scss | 14 +++++++++++++-
 .../src/renderer/themes/lens-dark.injectable.ts    |  1 +
 .../src/renderer/themes/lens-light.injectable.ts   |  1 +
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/renderer/components/layout/sidebar.module.scss b/packages/core/src/renderer/components/layout/sidebar.module.scss
index 21fbeec1f3..21f6a47a12 100644
--- a/packages/core/src/renderer/components/layout/sidebar.module.scss
+++ b/packages/core/src/renderer/components/layout/sidebar.module.scss
@@ -4,7 +4,9 @@
  */
 
 .sidebarNav {
-  @apply flex overflow-auto flex-col;
+  display: flex;
+  flex-direction: column;
+  overflow: overlay;
   width: var(--sidebar-width);
   padding-bottom: calc(var(--padding) * 3);
 
@@ -17,6 +19,16 @@
   background-repeat: no-repeat;
   background-size: 100% 40px, 100% 40px, 100% 12px, 100% 12px;
   background-attachment: local, local, scroll, scroll;
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--sidebarScrollbarBackground);
+    }
+  }
 }
 
 .sidebarNav :global(.Icon) {
diff --git a/packages/core/src/renderer/themes/lens-dark.injectable.ts b/packages/core/src/renderer/themes/lens-dark.injectable.ts
index 01599ccf28..c661c8bd6d 100644
--- a/packages/core/src/renderer/themes/lens-dark.injectable.ts
+++ b/packages/core/src/renderer/themes/lens-dark.injectable.ts
@@ -38,6 +38,7 @@ const lensDarkThemeInjectable = getInjectable({
       sidebarActiveColor: "#ffffff",
       sidebarSubmenuActiveColor: "#ffffff",
       sidebarItemHoverBackground: "#3a3e44",
+      sidebarScrollbarBackground: "#9da7b033",
       badgeBackgroundColor: "#ffba44",
       buttonPrimaryBackground: "#3d90ce",
       buttonDefaultBackground: "#414448",
diff --git a/packages/core/src/renderer/themes/lens-light.injectable.ts b/packages/core/src/renderer/themes/lens-light.injectable.ts
index 8c9b0374ac..7c3a2c1c21 100644
--- a/packages/core/src/renderer/themes/lens-light.injectable.ts
+++ b/packages/core/src/renderer/themes/lens-light.injectable.ts
@@ -38,6 +38,7 @@ const lensLightThemeInjectable = getInjectable({
       sidebarSubmenuActiveColor: "#3d90ce",
       sidebarBackground: "#e8e8e8",
       sidebarItemHoverBackground: "#f0f2f5",
+      sidebarScrollbarBackground: "#666f7940",
       badgeBackgroundColor: "#ffba44",
       buttonPrimaryBackground: "#3d90ce",
       buttonDefaultBackground: "#414448",