[Update] Config Page: Change the design to be natural and behavior smoother.

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} />

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;