86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import { mdiWhiteBalanceSunny } from "@mdi/js";
|
|
import Icon from "@mdi/react";
|
|
import SettingsIcon from "@mui/icons-material/Settings";
|
|
import { Button } 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 "./DarkThemeButton";
|
|
import { RouterLink } from "./RouterLink";
|
|
|
|
export function SolarEnergyAppBar(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={mdiWhiteBalanceSunny}
|
|
size={1}
|
|
style={{ marginRight: "1rem" }}
|
|
/>
|
|
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
|
<RouterLink to="/">Solar Energy</RouterLink>
|
|
</Typography>
|
|
|
|
<div>
|
|
<DarkThemeButton />
|
|
|
|
<Button size="large" color="inherit">
|
|
{authInfo!.info.id}
|
|
</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: "top",
|
|
horizontal: "right",
|
|
}}
|
|
keepMounted
|
|
transformOrigin={{
|
|
vertical: "top",
|
|
horizontal: "right",
|
|
}}
|
|
open={Boolean(anchorEl)}
|
|
onClose={handleCloseMenu}
|
|
>
|
|
<MenuItem onClick={signOut}>Déconnexion</MenuItem>
|
|
</Menu>
|
|
</div>
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
}
|