Create backup route skeleton

moneymgr_web/src/widgets/MoneyNavList.tsx

@@ -1,4 +1,4 @@
-import { mdiApi, mdiCashMultiple, mdiHome } from "@mdi/js";
+import { mdiCashMultiple, mdiHome } from "@mdi/js";
 import Icon from "@mdi/react";
 import {
   Divider,
@@ -11,10 +11,10 @@ import {
 import React from "react";
 import { useLocation } from "react-router-dom";
 import { useAccounts } from "../hooks/AccountsListProvider";
-import { AccountWidget } from "./AccountWidget";
-import { RouterLink } from "./RouterLink";
-import { AmountWidget } from "./AmountWidget";
 import { usePublicMode } from "../hooks/context_providers/PublicModeProvider";
+import { AccountWidget } from "./AccountWidget";
+import { AmountWidget } from "./AmountWidget";
+import { RouterLink } from "./RouterLink";
 
 export function MoneyNavList(): React.ReactElement {
   const publicMode = usePublicMode();
@@ -28,17 +28,7 @@ export function MoneyNavList(): React.ReactElement {
         backgroundColor: "background.paper",
       }}
     >
-      <NavLink
-        label="Accueil"
-        uri="/"
-        icon={<Icon path={mdiHome} size={1} />}
-      />
-
-      <NavLink
-        label="API Tokens"
-        uri="/tokens"
-        icon={<Icon path={mdiApi} size={1} />}
-      />
+      <NavLink label="Home" uri="/" icon={<Icon path={mdiHome} size={1} />} />
 
       <NavLink
         label="Accounts"

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>