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

Mostly completed appbar, waiting for login

This commit is contained in:
Kristoffer Juelsenn 2022-04-06 15:18:51 +02:00
parent f8b376768d
commit 68cc3f3b82
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/client/src/components/AsuraBar.js
View File

@ -16,6 +16,12 @@ function LoggedInMenu() {
const handleClose = () => { const handleClose = () => {
setAnchorEl(null); setAnchorEl(null);
}; };
const logout = () => {
console.log("Logged out");
setAnchorEl(null);
}
return ( return (
<> <>
<IconButton size="large" edge="start" color="inherit" aria-label="menu" onClick={handleClick}> <IconButton size="large" edge="start" color="inherit" aria-label="menu" onClick={handleClick}>
@ -24,18 +30,23 @@ function LoggedInMenu() {
<Menu anchorEl={anchorEl} open={open} onClose={handleClose} MenuListProps={{'aria-labelledby': 'basic-button',}} sx={{position:"absolute"}}> <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="/" 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="/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> <Link to="/" style={{color:"black"}}><MenuItem onClick={logout}><Button endIcon={<LogoutIcon />} >Logout</Button></MenuItem></Link>
</Menu> </Menu>
</> </>
); );
} }
function notLoggedInButton() { function NotLoggedInButton() {
const login = () => {
console.log("Logged in");
}
return ( return (
<> <>
<Link to="/create" style={{color:"white"}}> <Link to="/" style={{color:"white"}}>
<Button sx={{color:"white"}}> <Button sx={{color:"white"}} onclick={login}>
Login Login
</Button> </Button>
</Link> </Link>
@ -44,7 +55,7 @@ function notLoggedInButton() {
} }
export default function Appbar(props) { export default function Appbar(props) {
const isLoggedIn = false; const isLoggedIn = true; // props.isLoggedIn;
return ( return (
<> <>
@ -71,7 +82,7 @@ export default function Appbar(props) {
<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}>
{ isLoggedIn ? <LoggedInMenu /> : <notLoggedInButton /> } { isLoggedIn ? <LoggedInMenu /> : <NotLoggedInButton /> }
</Grid> </Grid>
</Grid> </Grid>
</Box> </Box>