From f0cffa712794084f95cb3aeee1b8d0545fc7ad8b Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 11 Sep 2024 14:46:00 +0900
Subject: [PATCH] [Update] Main Page: Side bar. Scroll bar only shows when the
 side bar area is hovered.

---
 .../SidebarSection.module.scss                | 55 +++++++++++--------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss b/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss
index 7042e5b4..41d877af 100644
--- a/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss
+++ b/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss
@@ -1,24 +1,3 @@
-.scroll_container {
-    width: calc(100% + 0.8rem);
-    overflow-y: scroll;
-    overflow-x: hidden;
-    margin-bottom: calc(2rem + 1.6rem + 2rem); // config button's sizes (svg + padding + margin).
-
-    &::-webkit-scrollbar {
-        width: 0.8rem;
-    }
-    &::-webkit-scrollbar-track {
-        background-color: var(--dark_888_color);
-        border-radius: 0.4rem;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: var(--dark_800_color);
-        border-radius: 0.4rem;
-    }
-
-
-}
-
 .container {
     position: relative;
     min-width: 23rem;
@@ -29,4 +8,36 @@
     &.is_compact_mode {
         min-width: auto;
     }
-}
\ No newline at end of file
+}
+
+
+.scroll_container {
+    width: calc(100% + 0.8rem);
+    overflow-y: overlay;
+    overflow-x: hidden;
+    margin-bottom: calc(2rem + 1.6rem + 2rem); // config button's sizes (svg + padding + margin).
+    pointer-events: auto;
+    z-index: 1;
+    &::-webkit-scrollbar {
+        width: 0.8rem;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: var(--dark_888_color);
+        border-radius: 0.4rem;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--dark_888_color);
+        border-radius: 0.4rem;
+    }
+
+    &:hover {
+        &::-webkit-scrollbar-thumb {
+            background-color: var(--dark_800_color);
+        }
+    }
+
+    &.is_compact_mode {
+        width: 100%;
+    }
+
+}