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 (
-
+
{!currentIsMainPageCompactMode && }
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); } } + }