[Update] Combine in one window. Rename Main/Config Window to Main/Config Page accordingly.

For now, I put Config Page to below the main page temporary. Open Config Button does not work.

src-ui/app/main_page/main_section/top_bar/TopBar.jsx

@@ -0,0 +1,13 @@
+import styles from "./TopBar.module.scss";
+
+import { SidebarCompactModeButton } from "./sidebar_compact_mode_button/SidebarCompactModeButton";
+import { RightSideComponents } from "./right_side_components/RightSideComponents";
+
+export const TopBar = () => {
+    return (
+        <div className={styles.container}>
+            <SidebarCompactModeButton />
+            <RightSideComponents />
+        </div>
+    );
+};

src-ui/app/main_page/main_section/top_bar/TopBar.module.scss

@@ -0,0 +1,7 @@
+.container {
+    height: var(--main_page_topbar_height);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-right: 1.6rem;
+}

src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx

@@ -0,0 +1,20 @@
+import styles from "./RightSideComponents.module.scss";
+
+import HelpSvg from "@images/help.svg?react";
+
+export const RightSideComponents = () => {
+    return (
+        <div className={styles.container}>
+            <p>VRC mic mute sync</p>
+            <p>Overlay(VR)</p>
+            <a
+            className={styles.help_and_info_button}
+            href="https://mzsoftware.notion.site/VRCT-Documents-be79b7a165f64442ad8f326d86c22246"
+            target="_blank"
+            rel="noreferrer"
+            >
+                <HelpSvg className={styles.help_svg} />
+            </a>
+        </div>
+    );
+};

src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss

@@ -0,0 +1,23 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+}
+
+.help_and_info_button {
+    padding: 0.6rem;
+    border-radius: 0.6rem;
+    cursor: pointer;
+    &:hover {
+        background-color: var(--dark_800_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color);
+    }
+}
+
+.help_svg {
+    width: 2.4rem;
+    color: var(--dark_400_color);
+}

src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+import styles from "./SidebarCompactModeButton.module.scss";
+
+import { useMainPageCompactModeStatus } from "@store";
+import ArrowLeftSvg from "@images/arrow_left.svg?react";
+
+export const SidebarCompactModeButton = () => {
+    const { updateMainPageCompactModeStatus, currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
+
+    const toggleCompactMode = () => {
+        updateMainPageCompactModeStatus(!currentMainPageCompactModeStatus);
+    };
+
+    const class_names = clsx(styles["arrow_left_svg"], {
+        [styles["reverse"]]: currentMainPageCompactModeStatus
+    });
+
+    return (
+        <div className={styles.container} onClick={toggleCompactMode}>
+            <ArrowLeftSvg className={class_names} preserveAspectRatio="none" />
+        </div>
+    );
+};

src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.module.scss

@@ -0,0 +1,22 @@
+.container {
+    height: 100%;
+    width: 2.2rem;
+    background-color: var(--dark_850_color);
+    cursor: pointer;
+    &:hover {
+        background-color: var(--dark_800_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color);
+    }
+}
+
+.arrow_left_svg {
+    height: 100%;
+    width: 100%;
+    padding: 1.1rem 0rem;
+    color: var(--dark_400_color);
+    &.reverse {
+        transform: rotate(180deg);
+    }
+}