118 lines
3.5 KiB
TypeScript
118 lines
3.5 KiB
TypeScript
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, Divider, ListItemIcon, ListItemText } from "@mui/material";
|
|
import AppBar from "@mui/material/AppBar";
|
|
import Menu from "@mui/material/Menu";
|
|
import MenuItem from "@mui/material/MenuItem";
|
|
import Toolbar from "@mui/material/Toolbar";
|
|
import Typography from "@mui/material/Typography";
|
|
import * as React from "react";
|
|
import { useAuthInfo } from "./BaseAuthenticatedPage";
|
|
import { DarkThemeButton } from "./DarkThemeButtonWidget";
|
|
import { PublicModeButton } from "./PublicModeButtonWidget";
|
|
import { RouterLink } from "./RouterLink";
|
|
|
|
export function MoneyWebAppBar(p: {
|
|
onSignOut: () => void;
|
|
}): React.ReactElement {
|
|
const authInfo = useAuthInfo();
|
|
|
|
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
|
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleCloseMenu = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
const signOut = () => {
|
|
handleCloseMenu();
|
|
p.onSignOut();
|
|
};
|
|
|
|
return (
|
|
<AppBar position="sticky">
|
|
<Toolbar>
|
|
<Icon path={mdiCash} size={1} style={{ marginRight: "1rem" }} />
|
|
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
|
<RouterLink to="/">Money Manager</RouterLink>
|
|
</Typography>
|
|
|
|
<div>
|
|
<PublicModeButton />
|
|
<DarkThemeButton />
|
|
|
|
<Button size="large" color="inherit">
|
|
{authInfo.info.name}
|
|
</Button>
|
|
|
|
<Button
|
|
size="large"
|
|
aria-label="account of current user"
|
|
aria-controls="menu-appbar"
|
|
aria-haspopup="true"
|
|
onClick={handleMenu}
|
|
color="inherit"
|
|
>
|
|
<SettingsIcon />
|
|
</Button>
|
|
<Menu
|
|
id="menu-appbar"
|
|
anchorEl={anchorEl}
|
|
anchorOrigin={{
|
|
vertical: "bottom",
|
|
horizontal: "right",
|
|
}}
|
|
keepMounted
|
|
transformOrigin={{
|
|
vertical: "top",
|
|
horizontal: "right",
|
|
}}
|
|
open={Boolean(anchorEl)}
|
|
onClose={handleCloseMenu}
|
|
>
|
|
{/* 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>
|
|
</AppBar>
|
|
);
|
|
}
|