From 525057b79052b2c5d50c2f83f81abcb8385437ee Mon Sep 17 00:00:00 2001
From: Arend Peter Castelein <apc1993@gmail.com>
Date: Tue, 21 Nov 2023 19:52:02 -0800
Subject: [PATCH] Rework login / logout button

---
 frontend/src/components/Header.js | 110 ++++++++++--------------------
 1 file changed, 37 insertions(+), 73 deletions(-)

diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index f13e66db..080caeed 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -147,92 +147,56 @@ const Header = ({ authSession }) => {
                         <Typography variant={navVariant} sx={{ fontWeight: 'bold' }} color={headerTextColor}>
                             Sandbox
                         </Typography>
-
                     </Button>
                 </Box>
 
                 {/**** LOG IN/OUT ****/}
-                <Box variant="h5" sx={{ alignItems: 'center', flexWrap: 'wrap', flexGrow: 0, display: { xs: 'none', md: 'flex' } }}>
-
-                    {authSession.isLoggedIn() ?
-                        <>
-                            <Typography variant={navVariant} sx={{ fontWeight: 'medium' }} color={headerTextColor}>
+                <Box sx={{ flexGrow: 0, display: 'flex' }}>
+                    {authSession.isLoggedIn() && <>
+                        <IconButton
+                            size="large"
+                            aria-label="account of current user"
+                            aria-controls="menu-appbar"
+                            aria-haspopup="true"
+                            onClick={handleOpenUserMenu}
+                            color="inherit">
+                            <AccountCircleIcon />
+                        </IconButton>
+                        <Menu
+                            id="menu-appbar"
+                            anchorEl={anchorElUser}
+                            anchorOrigin={{
+                                vertical: 'bottom',
+                                horizontal: 'left',
+                            }}
+                            keepMounted
+                            transformOrigin={{
+                                vertical: 'top',
+                                horizontal: 'left',
+                            }}
+                            open={Boolean(anchorElUser)}
+                            onClose={handleCloseUserMenu}
+                            sx={{ display: 'block'}}
+                        >
+                            <MenuItem>
                                 {authSession.getIdField('email')}
-                            </Typography>
-                            <Button
+                            </MenuItem>
+                            <MenuItem
                                 color='inherit'
                                 onClick={() => authSession.openLogout()}
                             >
-                                <Typography variant={navVariant} sx={{ fontWeight: 'bold' }} color={headerTextColor}>
-                                    Log Out
-                                </Typography>
-                            </Button>
-                        </>
-                        :
-                        <Button
-                            color='inherit'
-                            onClick={() => authSession.openLogin()}
-                        >
-
+                                Logout
+                            </MenuItem>
+                        </Menu>
+                    </>}
+                    {!authSession.isLoggedIn() &&
+                        <Button color='inherit' onClick={() => authSession.openLogin()} >
                             <Typography variant={navVariant} sx={{ fontWeight: 'bold' }} color={headerTextColor}>
-                                Log In
+                                Login
                             </Typography>
                         </Button>
                     }
                 </Box>
-                <Box sx={{ flexGrow: 0, display: { xs: 'flex', md: 'none' } }}>
-                    <IconButton
-                        size="large"
-                        aria-label="account of current user"
-                        aria-controls="menu-appbar"
-                        aria-haspopup="true"
-                        onClick={handleOpenUserMenu}
-                        color="inherit">
-                        <AccountCircleIcon />
-                    </IconButton>
-                    <Menu
-                        id="menu-appbar"
-                        anchorEl={anchorElUser}
-                        anchorOrigin={{
-                            vertical: 'bottom',
-                            horizontal: 'left',
-                        }}
-                        keepMounted
-                        transformOrigin={{
-                            vertical: 'top',
-                            horizontal: 'left',
-                        }}
-                        open={Boolean(anchorElUser)}
-                        onClose={handleCloseUserMenu}
-                        sx={{
-                            display: { xs: 'block', md: 'none' },
-                        }}
-                    >
-                        {authSession.isLoggedIn() ?
-                            <>
-                                <MenuItem>
-                                    {authSession.getIdField('email')}
-                                </MenuItem>
-                                <MenuItem
-                                    color='inherit'
-                                    onClick={() => authSession.openLogout()}
-                                >
-                                    Logout
-                                </MenuItem>
-                            </>
-                            :
-                            <>
-                                <MenuItem
-                                    color='inherit'
-                                    onClick={() => authSession.openLogin()}
-                                >
-                                    Login
-                                </MenuItem>
-                            </>
-                        }
-
-                    </Menu>
-                </Box>
 
             </Toolbar>
         </AppBar >