Can change theme

remote_frontend/src/App.tsx

@@ -1,19 +1,8 @@
-import {
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  MenuPopover,
-  MenuTrigger,
-  makeStyles,
-  typographyStyles,
-} from "@fluentui/react-components";
+import { makeStyles, typographyStyles } from "@fluentui/react-components";
 import { ServerApi } from "./api/ServerApi";
 import { AuthRouteWidget } from "./routes/AuthRouteWidget";
 import { AsyncWidget } from "./widgets/AsyncWidget";
-import { AuthApi } from "./api/AuthApi";
-import { useAlert } from "./hooks/providers/AlertDialogProvider";
-import { useConfirm } from "./hooks/providers/ConfirmDialogProvider";
+import { MainMenu } from "./widgets/MainMenu";
 
 const useStyles = makeStyles({
   title: typographyStyles.title2,
@@ -32,20 +21,8 @@ export function App() {
 }
 
 function AppInner(): React.ReactElement {
-  const alert = useAlert();
-  const confirm = useConfirm();
   const styles = useStyles();
 
-  const signOut = async () => {
-    try {
-      if (!(await confirm("Do you really want to sign out?"))) return;
-      await AuthApi.SignOut();
-    } catch (e) {
-      console.error(e);
-      alert("Failed to perform sign out!");
-    }
-  };
-
   if (!ServerApi.Config.authenticated && !ServerApi.Config.disable_auth)
     return <AuthRouteWidget />;
 
@@ -59,17 +36,7 @@ function AppInner(): React.ReactElement {
     >
       <div style={{ display: "flex", justifyContent: "space-between" }}>
         <span className={styles.title}>VirtWebRemote</span>
-        <Menu>
-          <MenuTrigger disableButtonEnhancement>
-            <MenuButton>Account</MenuButton>
-          </MenuTrigger>
-
-          <MenuPopover>
-            <MenuList>
-              <MenuItem onClick={signOut}>Sign out</MenuItem>
-            </MenuList>
-          </MenuPopover>
-        </Menu>
+        <MainMenu />
       </div>
     </div>
   );