outreaching/src/pages/shared/NavBarUser.js

69 lines
1.3 KiB
JavaScript

import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import { AccountCircle } from "@material-ui/icons";
import {
IconButton,
Menu,
MenuItem,
} from "@material-ui/core";
function NavBarUser() {
const history = useHistory();
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
function handleMenu(event) {
setAnchorEl(event.currentTarget);
}
function handleClose() {
setAnchorEl(null);
}
function logout() {
handleClose();
history.push("/");
}
function profile() {
handleClose();
history.push("/user/ceda_ei");
}
return (
<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={profile}>Profile</MenuItem>
<MenuItem onClick={profile}>My account</MenuItem>
<MenuItem onClick={logout}>Logout</MenuItem>
</Menu>
</div>
);
}
export default NavBarUser;