[Update] To be switchable between ConfigPage and MainPage.

src-ui/app/App.jsx

@@ -1,24 +1,26 @@
+import { useIsOpenedConfigPage } from "@store";
 import { getCurrent } from "@tauri-apps/api/window";
 import { useEffect, useRef } from "react";
 import { useStartPython } from "@logics/useStartPython";
 import { useConfig } from "@logics/useConfig";
-
 import { MainPage } from "./main_page/MainPage";
 import { ConfigPage } from "./config_page/ConfigPage";
-
+import styles from "./App.module.scss";
+import clsx from "clsx";
 
 export const App = () => {
     const { asyncStartPython } = useStartPython();
     const hasRunRef = useRef(false);
     const main_page = getCurrent();
 
-    const { getSoftwareVersion } = useConfig();
+    const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
+    const { get_software_version } = useConfig();
 
     useEffect(() => {
         main_page.setDecorations(true);
         if (!hasRunRef.current) {
             asyncStartPython().then((result) => {
-                getSoftwareVersion();
+                get_software_version();
             }).catch((err) => {
 
             });
@@ -27,9 +29,16 @@ export const App = () => {
     }, []);
 
     return (
-        <>
+        <div className={styles.container}>
-            <MainPage/>
+            <div className={clsx(styles.page, styles.config_page)}>
                 <ConfigPage />
-        </>
+            </div>
+            <div className={clsx(styles.page, styles.main_page, {
+                [styles.show_config]: currentIsOpenedConfigPage,
+                [styles.show_main]: !currentIsOpenedConfigPage
+            })}>
+                <MainPage />
+            </div>
+        </div>
     );
 };

src-ui/app/App.module.scss

@@ -0,0 +1,33 @@
+.container {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.page {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+
+}
+
+.main_page {
+    // z-index: 1;
+    transition: transform 0.5s ease;
+}
+
+.config_page {
+    // z-index: 0;
+}
+
+.show_config.main_page {
+    transform: translateY(-100%);
+}
+
+.show_main.main_page {
+    transform: translateY(0);
+}

src-ui/app/config_page/ConfigPage.jsx

@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
 
 // import { useConfig } from "@logics/useConfig";
 export const ConfigPage = () => {
-    const { currentSoftwareVersion, updateSoftwareVersion } = useSoftwareVersion();
+    const { currentSoftwareVersion } = useSoftwareVersion();
     const { t } = useTranslation();
 
     return (

src-ui/app/config_page/topbar/Topbar.jsx

@@ -1,16 +1,31 @@
 import styles from "./Topbar.module.scss";
+import { useIsOpenedConfigPage } from "@store";
+import ArrowLeftSvg from "@images/arrow_left.svg?react";
 
 import { TitleBox } from "./title_box/TitleBox";
 import { SectionTitleBox } from "./section_title_box/SectionTitleBox";
 import { CompactSwitchBox } from "./compact_switch_box/CompactSwitchBox";
 
 export const Topbar = () => {
+    const { updateIsOpenedConfigPage } = useIsOpenedConfigPage();
+    const closeConfigPage = () => {
+        console.log("close");
+        updateIsOpenedConfigPage(false);
+
+    };
+
     return (
         <div className={styles.container}>
-            <div className={styles.wrapper}>
+            <div className={styles.wrapper} onClick={() => closeConfigPage()}>
-                <TitleBox />
+                <div className={styles.go_back_button}>
+                    <ArrowLeftSvg className={styles.arrow_left_svg} />
+                    <p className={styles.go_back_text}>Go Back</p>
+                </div>
+
+
+                {/* <TitleBox />
                 <SectionTitleBox />
-                <CompactSwitchBox />
+                <CompactSwitchBox /> */}
             </div>
         </div>
     );

src-ui/app/config_page/topbar/Topbar.module.scss

@@ -1,12 +1,66 @@
 .container {
     width: 100%;
     height: 0%;
+    // position: sticky;
 }
 
 .wrapper {
-    height: var(--config_page_topbar_height);
+    // height: var(--config_page_topbar_height);
     background-color: var(--dark_850_color);
-    display: flex;
+    cursor: pointer;
-    justify-content: space-between;
+    height: 1rem;
-    flex-shrink: 0;
+    width: 100%;
+    // display: flex;
+    // justify-content: space-between;
+    // flex-shrink: 0;
+    position: relative;
+    transition: all 0.3s ease;
+
+    &:hover {
+        height: 2rem;
+    }
+
+    &:hover .go_back_button {
+        top: -11rem;
+        transform: rotate(35deg);
+    }
+    &:hover .arrow_left_svg {
+        color: var(--dark_400_color);
+    }
+    &:hover .go_back_text {
+        color: var(--dark_400_color);
+        transform: rotate(-20deg);
+    }
+
+}
+
+.go_back_button {
+    height: 16rem;
+    width: 16rem;
+    border-radius: 1.2rem;
+    background-color: var(--dark_850_color);
+    position: absolute;
+    top: -12rem;
+    right: 10rem;
+    transform: rotate(30deg);
+    transition: all 0.3s ease;
+}
+
+.arrow_left_svg {
+    height: 3.2rem;
+    position: absolute;
+    right: 1rem;
+    bottom: 0.4rem;
+    color: var(--dark_600_color);
+    transform: rotate(-100deg);
+}
+
+.go_back_text {
+    color: var(--dark_650_color);
+    font-size: 1.6rem;
+    position: absolute;
+    bottom: 4.6rem;
+    right: -7rem;
+    transform: rotate(-30deg);
+    transition: all 0.3s ease;
 }

src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.jsx

@@ -1,14 +1,12 @@
 import styles from "./OpenSettings.module.scss";
+import { useIsOpenedConfigPage } from "@store";
 import ConfigurationSvg from "@images/configuration.svg?react";
 
-// import { useWindow } from "@logics/useWindow";
-
 export const OpenSettings = () => {
-    // const { createConfigPage } = useWindow();
+    const { updateIsOpenedConfigPage } = useIsOpenedConfigPage();
 
     const openConfigPage = () => {
-
+        updateIsOpenedConfigPage(true);
-        // createConfigPage();
     };
 
     return (