[Update] Main Page: Side bar scroll bar. Adjust scroll bar color when language selector is opened.(For hiding in appearance)

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>

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);
         }
     }
+
 }