Updated AppBar to new name and functionality
This commit is contained in:
parent
6be3966bab
commit
3d837822e9
|
|
@ -1,68 +0,0 @@
|
||||||
import * as React from "react";
|
|
||||||
import { BrowserRouter as Router, Link, Route, Routes, History } from "react-router-dom";
|
|
||||||
import { AppBar, Typography, Toolbar, CssBaseline, Box, Button, IconButton, Grid, Menu, MenuItem } from "@mui/material"
|
|
||||||
import MenuIcon from '@mui/icons-material/Menu';
|
|
||||||
import logo from "./../Asura2222.png";
|
|
||||||
|
|
||||||
export default function Appbar(props) {
|
|
||||||
const [auth, setAuth] = React.useState(true);
|
|
||||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
||||||
|
|
||||||
const handleMenu = (event) => {
|
|
||||||
setAnchorEl(event.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CssBaseline />
|
|
||||||
<AppBar position="static" color="primary">
|
|
||||||
<Toolbar>
|
|
||||||
<Box sx={{ flexGrow: 1 }}>
|
|
||||||
<Grid container spacing={2} justifyContent="space-between" alignItems="center" align="center">
|
|
||||||
<Grid item xs={2}>
|
|
||||||
<Link to="/">
|
|
||||||
<img sx={{width: "10%"}} src={logo} alt="Tournament logo" className="mainIcon"></img>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Typography variant="h6" component="div">
|
|
||||||
<Link to="/" style={{ color:'white'}}>
|
|
||||||
Home
|
|
||||||
</Link>
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={8}>
|
|
||||||
<Typography component="div"><h2>{props.pageTitle || ""}</h2></Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={2}>
|
|
||||||
<IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ width: "5%", padding: "5% 10%" }} onClick={handleMenu}>
|
|
||||||
<MenuIcon />
|
|
||||||
</IconButton>
|
|
||||||
<Menu anchorEl={anchorEl} anchorOrigin={{vertical: 'bottom',horizontal: 'right',}} keepMounted transformOrigin={{vertical: 'top',horizontal: 'right',}} open={Boolean(anchorEl)} onClose={handleClose}>
|
|
||||||
<MenuItem onClick={handleClose}>
|
|
||||||
<Link to="/">
|
|
||||||
Logout
|
|
||||||
</Link>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}>
|
|
||||||
<Link to="/create">
|
|
||||||
Account
|
|
||||||
</Link>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}>
|
|
||||||
<Link to="/history">
|
|
||||||
History
|
|
||||||
</Link>
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Box>
|
|
||||||
</Toolbar>
|
|
||||||
</AppBar>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
import * as React from "react";
|
||||||
|
import { BrowserRouter as Router, Link, Route, Routes, History } from "react-router-dom";
|
||||||
|
import { AppBar, Typography, Toolbar, CssBaseline, Box, Button, IconButton, Grid, Menu, MenuItem, Container } from "@mui/material"
|
||||||
|
import MenuIcon from '@mui/icons-material/Menu';
|
||||||
|
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
|
||||||
|
import HistoryIcon from '@mui/icons-material/History';
|
||||||
|
import LogoutIcon from '@mui/icons-material/Logout';
|
||||||
|
import logo from "./../Asura2222.png";
|
||||||
|
|
||||||
|
function loggedInMenu() {
|
||||||
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||||
|
const open = Boolean(anchorEl);
|
||||||
|
const handleClick = (event) => {
|
||||||
|
setAnchorEl(event.currentTarget);
|
||||||
|
};
|
||||||
|
const handleClose = () => {
|
||||||
|
setAnchorEl(null);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<IconButton size="large" edge="start" color="inherit" aria-label="menu" onClick={handleClick}>
|
||||||
|
<MenuIcon />
|
||||||
|
</IconButton>
|
||||||
|
<Menu anchorEl={anchorEl} open={open} onClose={handleClose} MenuListProps={{'aria-labelledby': 'basic-button',}} sx={{position:"absolute"}}>
|
||||||
|
<Link to="/" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<AccountCircleIcon />}>Profile</Button></MenuItem></Link>
|
||||||
|
<Link to="/history" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<HistoryIcon />}>History</Button></MenuItem></Link>
|
||||||
|
<Link to="/logout" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<LogoutIcon />}>Logout</Button></MenuItem></Link>
|
||||||
|
</Menu>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function notLoggedInButton() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Link to="/create" style={{color:"white"}}>
|
||||||
|
<Button sx={{color:"white"}}>
|
||||||
|
Login
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Appbar(props) {
|
||||||
|
const isLoggedIn = true;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<CssBaseline />
|
||||||
|
<AppBar position="static" color="primary">
|
||||||
|
<Toolbar>
|
||||||
|
<Box sx={{ flexGrow: 1 }}>
|
||||||
|
<Grid container spacing={2} justifyContent="space-between" alignItems="center" align="center">
|
||||||
|
<Grid item xs={2}>
|
||||||
|
<Box sx={{ width:"100%", height: "100%", justifyContent:"left", align: "center", alignItems:"center", margin: "none", padding: "none", color: "white" ,display: "flex", flexFlow: "row"}}>
|
||||||
|
<Link to="/">
|
||||||
|
<img sx={{width: "10%"}} src={logo} alt="Tournament logo" className="mainIcon"></img>
|
||||||
|
</Link>
|
||||||
|
{ props.pageTitle !== "Asura Tournaments" &&
|
||||||
|
<Link to="/" style={{color:"white"}}>
|
||||||
|
<Typography component="div" align="center">
|
||||||
|
Home
|
||||||
|
</Typography>
|
||||||
|
</Link>
|
||||||
|
}
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={8}>
|
||||||
|
<Typography component="div"><h2>{props.pageTitle || ""}</h2></Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={2}>
|
||||||
|
{ isLoggedIn ? <loggedInMenu /> : <notLoggedInButton /> }
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
</Toolbar>
|
||||||
|
</AppBar>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue