From 91c2a9cb5b512664d0cf02f388b6e09c223f3e53 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 1 Sep 2024 23:51:54 +0900
Subject: [PATCH] [Update] Config Page: Change the design to be natural and
 behavior smoother.

---
 src-ui/app/config_page/topbar/Topbar.jsx         |  9 +++++++--
 src-ui/app/config_page/topbar/Topbar.module.scss | 15 ++++++++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src-ui/app/config_page/topbar/Topbar.jsx b/src-ui/app/config_page/topbar/Topbar.jsx
index fb435e59..b70f559b 100644
--- a/src-ui/app/config_page/topbar/Topbar.jsx
+++ b/src-ui/app/config_page/topbar/Topbar.jsx
@@ -1,3 +1,5 @@
+import clsx from "clsx";
+
 import styles from "./Topbar.module.scss";
 import { useIsOpenedConfigPage } from "@store";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
@@ -7,7 +9,7 @@ import { SectionTitleBox } from "./section_title_box/SectionTitleBox";
 import { CompactSwitchBox } from "./compact_switch_box/CompactSwitchBox";
 
 export const Topbar = () => {
-    const { updateIsOpenedConfigPage } = useIsOpenedConfigPage();
+    const { currentIsOpenedConfigPage, updateIsOpenedConfigPage } = useIsOpenedConfigPage();
     const closeConfigPage = () => {
         console.log("close");
         updateIsOpenedConfigPage(false);
@@ -15,7 +17,10 @@ export const Topbar = () => {
     };
 
     return (
-        <div className={styles.container}>
+        <div className={clsx(styles.container, {
+            [styles.show_config]: currentIsOpenedConfigPage,
+            [styles.show_main]: !currentIsOpenedConfigPage
+        })}>
             <div className={styles.wrapper} onClick={() => closeConfigPage()}>
                 <div className={styles.go_back_button}>
                     <ArrowLeftSvg className={styles.arrow_left_svg} />
diff --git a/src-ui/app/config_page/topbar/Topbar.module.scss b/src-ui/app/config_page/topbar/Topbar.module.scss
index 6858a905..c2c196cc 100644
--- a/src-ui/app/config_page/topbar/Topbar.module.scss
+++ b/src-ui/app/config_page/topbar/Topbar.module.scss
@@ -1,18 +1,23 @@
 .container {
     width: 100%;
     height: 0%;
-    // position: sticky;
+    transition: transform 0.5s ease;
 }
 
+.show_config.container {
+    transform: translateY(0vh);
+}
+
+.show_main.container {
+    transform: translateY(100vh);
+}
+
+
 .wrapper {
-    // height: var(--config_page_topbar_height);
     background-color: var(--dark_850_color);
     cursor: pointer;
     height: 1rem;
     width: 100%;
-    // display: flex;
-    // justify-content: space-between;
-    // flex-shrink: 0;
     position: relative;
     transition: all 0.3s ease;