From 6b3ff1f3b2ff0eb1f3c04add6fc5cd72ddf6a551 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 12 Sep 2024 16:50:47 +0900
Subject: [PATCH] [Update] Main Page: Side bar scroll bar. Adjust scroll bar
 color when language selector is opened.(For hiding in appearance)

---
 .../app/main_page/sidebar_section/SidebarSection.jsx   |  9 +++++++--
 .../sidebar_section/SidebarSection.module.scss         | 10 ++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src-ui/app/main_page/sidebar_section/SidebarSection.jsx b/src-ui/app/main_page/sidebar_section/SidebarSection.jsx
index f42ab854..64e7c7ba 100644
--- a/src-ui/app/main_page/sidebar_section/SidebarSection.jsx
+++ b/src-ui/app/main_page/sidebar_section/SidebarSection.jsx
@@ -1,7 +1,7 @@
 import clsx from "clsx";
 
 import styles from "./SidebarSection.module.scss";
-import { useStore_IsMainPageCompactMode } from "@store";
+import { useStore_IsMainPageCompactMode, useStore_IsOpenedLanguageSelector } from "@store";
 
 import { Logo } from "./logo/Logo";
 import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch";
@@ -14,10 +14,15 @@ export const SidebarSection = () => {
         [styles.is_compact_mode]: currentIsMainPageCompactMode
     });
 
+    const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
+    const scroll_container_class_names = clsx(styles.scroll_container, {
+        [styles.is_opened]: (currentIsOpenedLanguageSelector.your_language === true || currentIsOpenedLanguageSelector.target_language === true)
+    });
+
     return (
         <div className={container_class_name}>
             <Logo />
-            <div className={styles.scroll_container}>
+            <div className={scroll_container_class_names}>
                 <MainFunctionSwitch />
                 {!currentIsMainPageCompactMode && <LanguageSettings />}
             </div>
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 240b6a16..26096649 100644
--- a/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss
+++ b/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss
@@ -33,9 +33,19 @@
         border-radius: 0.4rem;
     }
 
+    &.is_opened {
+        &::-webkit-scrollbar-track {
+            background-color: var(--dark_875_color);
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: var(--dark_875_color);
+        }
+    }
+
     &:hover {
         &::-webkit-scrollbar-thumb {
             background-color: var(--dark_800_color);
         }
     }
+
 }