Create backup route skeleton

moneymgr_web/src/widgets/MoneyWebAppBar.tsx

@@ -1,7 +1,9 @@
-import { mdiCash } from "@mdi/js";
+import { mdiApi, mdiCash } from "@mdi/js";
 import Icon from "@mdi/react";
+import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
+import LogoutIcon from "@mui/icons-material/Logout";
 import SettingsIcon from "@mui/icons-material/Settings";
-import { Button } from "@mui/material";
+import { Button, Divider, ListItemIcon, ListItemText } from "@mui/material";
 import AppBar from "@mui/material/AppBar";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
@@ -10,8 +12,8 @@ import Typography from "@mui/material/Typography";
 import * as React from "react";
 import { useAuthInfo } from "./BaseAuthenticatedPage";
 import { DarkThemeButton } from "./DarkThemeButtonWidget";
-import { RouterLink } from "./RouterLink";
 import { PublicModeButton } from "./PublicModeButtonWidget";
+import { RouterLink } from "./RouterLink";
 
 export function MoneyWebAppBar(p: {
   onSignOut: () => void;
@@ -63,7 +65,7 @@ export function MoneyWebAppBar(p: {
             id="menu-appbar"
             anchorEl={anchorEl}
             anchorOrigin={{
-              vertical: "top",
+              vertical: "bottom",
               horizontal: "right",
             }}
             keepMounted
@@ -74,7 +76,39 @@ export function MoneyWebAppBar(p: {
             open={Boolean(anchorEl)}
             onClose={handleCloseMenu}
           >
-            <MenuItem onClick={signOut}>Sign out</MenuItem>
+            {/* API tokens */}
+            <RouterLink to={"/tokens"}>
+              <MenuItem>
+                <ListItemIcon>
+                  <Icon path={mdiApi} size={1} />
+                </ListItemIcon>
+                <ListItemText secondary="Manage programmatic access to your account">
+                  API Tokens
+                </ListItemText>
+              </MenuItem>
+            </RouterLink>
+
+            {/* Backup */}
+            <RouterLink to={"/backup"}>
+              <MenuItem>
+                <ListItemIcon>
+                  <CloudDownloadIcon />
+                </ListItemIcon>
+                <ListItemText secondary="Backup and restore your data">
+                  Backup
+                </ListItemText>
+              </MenuItem>
+            </RouterLink>
+
+            <Divider />
+
+            {/* Sign out */}
+            <MenuItem onClick={signOut}>
+              <ListItemIcon>
+                <LogoutIcon />
+              </ListItemIcon>
+              <ListItemText secondary="End your session">Sign out</ListItemText>
+            </MenuItem>
           </Menu>
         </div>
       </Toolbar>