felixalb
/
asura-tmdb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Appbar Update

This commit is contained in:
Kristoffer Juelsenn 2022-04-06 09:48:22 +02:00
parent ddbe1f21c3
commit 924664d5c2
1 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/client/src/components/Appbar.js
View File

@ -1,10 +1,21 @@
import * as React from "react"; import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes, History } from "react-router-dom"; import { BrowserRouter as Router, Link, Route, Routes, History } from "react-router-dom";
import { AppBar, Typography, Toolbar, CssBaseline, Box, Button, IconButton, Grid } from "@mui/material" import { AppBar, Typography, Toolbar, CssBaseline, Box, Button, IconButton, Grid, Menu, MenuItem } from "@mui/material"
import MenuIcon from '@mui/icons-material/Menu'; import MenuIcon from '@mui/icons-material/Menu';
import logo from "./../Asura2222.png"; import logo from "./../Asura2222.png";
export default function Appbar(props) { 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 ( return (
<> <>
<CssBaseline /> <CssBaseline />
@ -13,23 +24,40 @@ export default function Appbar(props) {
<Box sx={{ flexGrow: 1 }}> <Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2} justifyContent="space-between" alignItems="center" align="center"> <Grid container spacing={2} justifyContent="space-between" alignItems="center" align="center">
<Grid item xs={2}> <Grid item xs={2}>
<Link to="/"> <Link to="/">
<img sx={{width: "10%"}} src={logo} alt="Tournament logo" className="mainIcon"></img> <img sx={{width: "10%"}} src={logo} alt="Tournament logo" className="mainIcon"></img>
</Link> </Link>
{/* <Typography variant="h6" component="div">
<Typography variant="h6" component="div">
<Link to="/" style={{ color:'white'}}> <Link to="/" style={{ color:'white'}}>
Asura Tournaments Home
</Link> </Link>
</Typography> */} </Typography>
</Grid> </Grid>
<Grid item xs={8}> <Grid item xs={8}>
<Typography component="div"><h2>{props.pageTitle || ""}</h2></Typography> <Typography component="div"><h2>{props.pageTitle || ""}</h2></Typography>
</Grid> </Grid>
<Grid item xs={2}> <Grid item xs={2}>
{/* <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ width: "5%", padding: "5% 10%" }}> <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ width: "5%", padding: "5% 10%" }} onClick={handleMenu}>
<MenuIcon /> <MenuIcon />
</IconButton> */} </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>
</Grid> </Grid>
</Box> </Box>