72 lines
1.6 KiB
JavaScript
72 lines
1.6 KiB
JavaScript
import React, { useState } from "react";
|
|
|
|
import { AppBar, IconButton, Menu, MenuItem, Toolbar, Typography } from "@material-ui/core";
|
|
import { Home as HomeIcon } from "@material-ui/icons";
|
|
import { AccountCircle } from "@material-ui/icons";
|
|
import { useHistory } from "react-router-dom";
|
|
|
|
|
|
function App() {
|
|
const history = useHistory();
|
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
const open = Boolean(anchorEl);
|
|
|
|
const handleMenu = (event) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
const logout = () => {
|
|
handleClose();
|
|
history.push("/");
|
|
};
|
|
|
|
return (
|
|
<AppBar position="static">
|
|
<Toolbar style={{ justifyContent: "space-between" }}>
|
|
<IconButton onClick={logout} color="inherit">
|
|
<HomeIcon />
|
|
</IconButton>
|
|
<Typography variant="h6">
|
|
Outreaching
|
|
</Typography>
|
|
<div>
|
|
<IconButton
|
|
aria-label="account of current user"
|
|
aria-controls="menu-appbar"
|
|
aria-haspopup="true"
|
|
onClick={handleMenu}
|
|
color="inherit"
|
|
>
|
|
<AccountCircle />
|
|
</IconButton>
|
|
<Menu
|
|
id="menu-appbar"
|
|
anchorEl={anchorEl}
|
|
anchorOrigin={{
|
|
vertical: "top",
|
|
horizontal: "right",
|
|
}}
|
|
keepMounted
|
|
transformOrigin={{
|
|
vertical: "top",
|
|
horizontal: "right",
|
|
}}
|
|
open={open}
|
|
onClose={handleClose}
|
|
>
|
|
<MenuItem onClick={handleClose}>Profile</MenuItem>
|
|
<MenuItem onClick={handleClose}>My account</MenuItem>
|
|
<MenuItem onClick={logout}>Logout</MenuItem>
|
|
</Menu>
|
|
</div>
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
}
|
|
|
|
export default App;
|