From 7068167866af2a03e3242b04b88f3c1a2ef731d8 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 11 Sep 2024 13:46:45 +0900
Subject: [PATCH] [UPdate] Main Page: Side bar. Now, scrollable.

---
 .../sidebar_section/SidebarSection.jsx        | 10 +++++----
 .../SidebarSection.module.scss                | 21 +++++++++++++++++++
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src-ui/app/main_page/sidebar_section/SidebarSection.jsx b/src-ui/app/main_page/sidebar_section/SidebarSection.jsx
index 1d00ea55..f42ab854 100644
--- a/src-ui/app/main_page/sidebar_section/SidebarSection.jsx
+++ b/src-ui/app/main_page/sidebar_section/SidebarSection.jsx
@@ -10,15 +10,17 @@ import { OpenSettings } from "./open_settings/OpenSettings";
 
 export const SidebarSection = () => {
     const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
-    const container_class_name = clsx(styles["container"], {
-        [styles["is_compact_mode"]]: currentIsMainPageCompactMode
+    const container_class_name = clsx(styles.container, {
+        [styles.is_compact_mode]: currentIsMainPageCompactMode
     });
 
     return (
         <div className={container_class_name}>
             <Logo />
-            <MainFunctionSwitch />
-            {!currentIsMainPageCompactMode && <LanguageSettings />}
+            <div className={styles.scroll_container}>
+                <MainFunctionSwitch />
+                {!currentIsMainPageCompactMode && <LanguageSettings />}
+            </div>
             <OpenSettings />
         </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 de2f091a..7042e5b4 100644
--- a/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss
+++ b/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss
@@ -1,3 +1,24 @@
+.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;