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

Updated AppBar to new name and functionality

This commit is contained in:
Kristoffer Juelsenn 2022-04-06 14:15:30 +02:00
parent 6be3966bab
commit 3d837822e9
2 changed files with 81 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
</>
);
}

81
src/client/src/components/AsuraBar.js Normal file
View File

@ -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>
</>
);
}