From caa28ac5b3a4d339a967a6dc1d360445e80128ec Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Thu, 19 Feb 2026 21:18:17 +0100
Subject: [PATCH] [PM-32481] Apply same custom scrollbar to nav (#19083)

* Apply same custom scrollbar to nav

* Split colors
---
 apps/desktop/src/scss/base.scss      | 25 ++++++++++++++++++++++---
 apps/desktop/src/scss/variables.scss |  4 ++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/apps/desktop/src/scss/base.scss b/apps/desktop/src/scss/base.scss
index a95d82dacd4..2371192e0ea 100644
--- a/apps/desktop/src/scss/base.scss
+++ b/apps/desktop/src/scss/base.scss
@@ -102,23 +102,30 @@ textarea {
 
 div:not(.modal)::-webkit-scrollbar,
 .cdk-virtual-scroll-viewport::-webkit-scrollbar,
-.vault-filters::-webkit-scrollbar {
+.vault-filters::-webkit-scrollbar,
+#bit-side-nav::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
 
 div:not(.modal)::-webkit-scrollbar-track,
 .cdk-virtual-scroll-viewport::-webkit-scrollbar-track,
-.vault-filters::-webkit-scrollbar-track {
+.vault-filters::-webkit-scrollbar-track,
+#bit-side-nav::-webkit-scrollbar-track {
   background-color: transparent;
 }
 
 div:not(.modal)::-webkit-scrollbar-thumb,
 .cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb,
-.vault-filters::-webkit-scrollbar-thumb {
+.vault-filters::-webkit-scrollbar-thumb,
+#bit-side-nav::-webkit-scrollbar-thumb {
   border-radius: 10px;
   margin-right: 1px;
+}
 
+div:not(.modal)::-webkit-scrollbar-thumb,
+.cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb,
+.vault-filters::-webkit-scrollbar-thumb {
   @include themify($themes) {
     background-color: themed("scrollbarColor");
   }
@@ -130,6 +137,18 @@ div:not(.modal)::-webkit-scrollbar-thumb,
   }
 }
 
+#bit-side-nav::-webkit-scrollbar-thumb {
+  @include themify($themes) {
+    background-color: themed("scrollbarColorNav");
+  }
+
+  &:hover {
+    @include themify($themes) {
+      background-color: themed("scrollbarHoverColorNav");
+    }
+  }
+}
+
 // cdk-virtual-scroll
 .cdk-virtual-scroll-viewport {
   width: 100%;
diff --git a/apps/desktop/src/scss/variables.scss b/apps/desktop/src/scss/variables.scss
index a00257ed608..51a6d2ac840 100644
--- a/apps/desktop/src/scss/variables.scss
+++ b/apps/desktop/src/scss/variables.scss
@@ -56,6 +56,8 @@ $themes: (
     backgroundColorAlt2: $background-color-alt2,
     scrollbarColor: rgba(100, 100, 100, 0.2),
     scrollbarHoverColor: rgba(100, 100, 100, 0.4),
+    scrollbarColorNav: rgba(226, 226, 226),
+    scrollbarHoverColorNav: rgba(197, 197, 197),
     boxBackgroundColor: $box-background-color,
     boxBackgroundHoverColor: $box-background-hover-color,
     boxBorderColor: $box-border-color,
@@ -115,6 +117,8 @@ $themes: (
     backgroundColorAlt2: #15181e,
     scrollbarColor: #6e788a,
     scrollbarHoverColor: #8d94a5,
+    scrollbarColorNav: #6e788a,
+    scrollbarHoverColorNav: #8d94a5,
     boxBackgroundColor: #2f343d,
     boxBackgroundHoverColor: #3c424e,
     boxBorderColor: #4c525f,