preallocate space for scrollbar on nav menu

- set overflow: scroll
- configure scrollbar on Firefox to only show when there's scrollable content
- move scrollbar thumb color to a variable

diff --git a/src/css/nav.css b/src/css/nav.css
index 8ecf7b5..475262f 100644 (file)
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -61,7 +61,7 @@ html.is-clipped--nav {
 }
 
 .nav-panel-menu {
-  overflow-y: auto;
+  overflow-y: scroll;
   display: flex;
   flex-direction: column;
   height: var(--nav-panel-height);
@@ -88,12 +88,20 @@ html.is-clipped--nav {
   left: 0;
 }
 
-.nav-panel-menu::-webkit-scrollbar {
+.nav-panel-menu,
+.nav-panel-explore .components {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb-color) transparent;
+}
+
+.nav-panel-menu::-webkit-scrollbar,
+.nav-panel-explore .components::-webkit-scrollbar {
   width: 0.25rem;
 }
 
-.nav-panel-menu::-webkit-scrollbar-thumb {
-  background-color: var(--nav-border-color);
+.nav-panel-menu::-webkit-scrollbar-thumb,
+.nav-panel-explore .components::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb-color);
 }
 
 .nav-menu {
@@ -207,7 +215,7 @@ html.is-clipped--nav {
   background: var(--nav-secondary-background);
   padding: 0.5rem 0.75rem 0 0.75rem;
   margin: 0;
-  overflow-y: auto;
+  overflow-y: scroll;
   max-height: 100%;
   display: block;
 }

diff --git a/src/css/vars.css b/src/css/vars.css
index 2a6f6be..376cdbb 100644 (file)
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -31,6 +31,7 @@
   --body-background: var(--color-white);
   --panel-background: var(--color-smoke-30);
   --panel-border-color: var(--color-smoke-90);
+  --scrollbar-thumb-color: var(--color-gray-10);
   /* navbar */
   --navbar-background: var(--color-jet-80);
   --navbar-font-color: var(--color-white);