Page MenuHomec4science
Files F64579526

Nav.js
No OneTemporary
Actions

File Metadata

Created
Mon, May 27, 22:28

Nav.js
View Options

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import AccountCircle from '@material-ui/icons/AccountCircle';
import Switch from '@material-ui/core/Switch';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormGroup from '@material-ui/core/FormGroup';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import {Link} from "react-router-dom"
import "./header.css"
import Logo from './logo.svg'
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}));
export default function MenuAppBar() {
const classes = useStyles();
const [auth, setAuth] = React.useState(false);
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleChange = (event) => {
setAuth(event.target.checked);
};
const handleMenu = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div className={classes.root}>
<FormGroup>
{/* <FormControlLabel
control={<Switch checked={auth} onChange={handleChange} aria-label="login switch" />}
label={auth ? 'Logout' : 'Login'}
/> */}
</FormGroup>
<AppBar
className="App-header"
color="inherit"
position="static">
<Toolbar>
<IconButton
aria-controls="simple-menu"
aria-haspopup="true"
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="menu"
onClick={handleMenu}
>
<MenuIcon />
</IconButton>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem component= {Link} to={'/'} onClick={handleClose}>Check Tool</MenuItem>
<MenuItem component= {Link} to={"/api"} onClick={handleClose}>API</MenuItem>
<MenuItem component= {Link} to={"/api2"} onClick={handleClose}>API test</MenuItem>
<MenuItem component= {Link} to={"/login"} onClick={handleClose}>Login</MenuItem>
<MenuItem component= {Link} to={"/about"} onClick={handleClose}>About</MenuItem>
</Menu>
<Typography variant="title" color="inherit" className={classes.title}>
<Logo />
</Typography>
{auth && (
<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}>Admin</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
</Menu>
</div>
)}
</Toolbar>
</AppBar>
</div>
);
}

Event Timeline

c4science · Help