Use tabs to organize UI

remote_frontend/src/App.tsx

@@ -1,15 +1,34 @@
-import { makeStyles, typographyStyles } from "@fluentui/react-components";
+import {
+  Tab,
+  TabList,
+  makeStyles,
+  typographyStyles,
+} from "@fluentui/react-components";
 import { ServerApi } from "./api/ServerApi";
 import { AuthRouteWidget } from "./routes/AuthRouteWidget";
 import { AsyncWidget } from "./widgets/AsyncWidget";
 import { MainMenu } from "./widgets/MainMenu";
 import { SystemInfoWidget } from "./widgets/SystemInfoWidget";
 import { VirtualMachinesWidget } from "./widgets/VirtualMachinesWidget";
+import {
+  DesktopFilled,
+  DesktopRegular,
+  Info12Filled,
+  Info12Regular,
+  InfoFilled,
+  InfoRegular,
+  bundleIcon,
+} from "@fluentui/react-icons";
+import React from "react";
 
 const useStyles = makeStyles({
   title: typographyStyles.title2,
 });
 
+const InfoIcon = bundleIcon(InfoFilled, InfoRegular);
+
+const DesktopIcon = bundleIcon(DesktopFilled, DesktopRegular);
+
 export function App() {
   return (
     <AsyncWidget
@@ -24,6 +43,7 @@ export function App() {
 
 function AppInner(): React.ReactElement {
   const styles = useStyles();
+  const [tab, setTab] = React.useState<"vm" | "info">("vm");
 
   if (!ServerApi.Config.authenticated && !ServerApi.Config.disable_auth)
     return <AuthRouteWidget />;
@@ -36,12 +56,31 @@ function AppInner(): React.ReactElement {
         margin: "50px auto",
       }}
     >
-      <div style={{ display: "flex", justifyContent: "space-between" }}>
-        <span className={styles.title}>VirtWebRemote</span>
-        <MainMenu />
+      <span className={styles.title}>VirtWebRemote</span>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          marginTop: "30px",
+        }}
+      >
+        <TabList
+          selectedValue={tab}
+          onTabSelect={(_, d) => setTab(d.value as any)}
+        >
+          <Tab value="vm" icon={<DesktopIcon />}>
+            Virtual machines
+          </Tab>
+          <Tab value="info" icon={<InfoIcon />}>
+            System info
+          </Tab>
+        </TabList>
+        <div>
+          <MainMenu />
+        </div>
       </div>
-      <VirtualMachinesWidget />
-      <SystemInfoWidget />
+      {tab === "vm" && <VirtualMachinesWidget />}
+      {tab === "info" && <SystemInfoWidget />}
     </div>
   );
 }