[Update/Perf] Config Page: Device Tab. Add threshold_component(dev).

Improve re-render, unnecessary, problem.

src-ui/app/main_page/MainPage.jsx

@@ -1,39 +1,21 @@
+import clsx from "clsx";
 import styles from "./MainPage.module.scss";
 import { SidebarSection } from "./sidebar_section/SidebarSection";
 import { MainSection } from "./main_section/MainSection";
+import { useIsOpenedConfigPage } from "@store";
 
 export const MainPage = () => {
+    const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
+
     return (
-        <div className={styles.container}>
-            <SidebarSection />
-            <MainSection />
-            {/* <MainPageCover /> */}
+        <div className={clsx(styles.page, styles.main_page, {
+            [styles.show_config]: currentIsOpenedConfigPage,
+            [styles.show_main]: !currentIsOpenedConfigPage
+        })}>
+            <div className={styles.container}>
+                <SidebarSection />
+                <MainSection />
+            </div>
         </div>
     );
-};
-
-
-// import { useTranslation } from "react-i18next";
-// import { useIsOpenedConfigPage } from "@store";
-// import { useWindow } from "@logics/useWindow";
-
-// export const MainPageCover = () => {
-//     const { t } = useTranslation();
-//     const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
-//     const { closeConfigPage } = useWindow();
-//     if ( currentIsOpenedConfigPage === false) return null;
-
-//     const closeSettingsWindow = () => closeConfigPage();
-
-//     return (
-//         <div className={styles.main_page_cover}>
-//             <p className={styles.cover_message}>{t("main_page.cover_message")}</p>
-//             <button
-//             className={styles.close_settings_window_button}
-//             onClick={closeSettingsWindow}
-//             >
-//                 {t("main_page.close_settings_window")}
-//             </button>
-//         </div>
-//     );
-// };
+};

src-ui/app/main_page/MainPage.module.scss

@@ -1,3 +1,22 @@
+.page {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    transition: transform 0.5s ease;
+}
+
+.show_config.main_page {
+    transform: translateY(-100%);
+}
+
+.show_main.main_page {
+    transform: translateY(0);
+}
+
+
 .container {
     width: 100%;
     height: 100%;