Skip to content

Commit 0b5114c

Browse files
dpagedpage
committed
Remove login dialogue from menu item to fix tab navigation
1 parent 3ce9f43 commit 0b5114c

File tree

3 files changed

+147
-167
lines changed

3 files changed

+147
-167
lines changed

‎README.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,5 @@ Don't expect the code to do anything particularly useful!
1515

1616
## TODO
1717

18-
* Remove login dialogue from menu item to fix tab navigation
1918
* Move to using a separate context for user state
2019
* Move authentication code out of App.jsx.

‎frontend/src/components/AppBar.jsx

Lines changed: 136 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import {useState} from 'react';
23
import AppBar from '@mui/material/AppBar';
34
import Box from '@mui/material/Box';
45
import Toolbar from '@mui/material/Toolbar';
@@ -19,6 +20,7 @@ import LoginDialog from './LoginDialog';
1920
function ResponsiveAppBar({appState, handleLogin, handleLogout, clearError, onChangeTheme}) {
2021
const [anchorElNav, setAnchorElNav] = React.useState(null);
2122
const [anchorElUser, setAnchorElUser] = React.useState(null);
23+
const [showLoginDialog, setShowLoginDialog] = useState(false);
2224

2325
const handleOpenNavMenu = (event) => {
2426
setAnchorElNav(event.currentTarget);
@@ -35,135 +37,151 @@ function ResponsiveAppBar({appState, handleLogin, handleLogout, clearError, onCh
3537
setAnchorElUser(null);
3638
};
3739

38-
return (
39-
<AppBar position="static">
40-
<Container maxWidth="xl">
41-
<Toolbar disableGutters>
42-
{/* Desktop title */}
43-
<StorageTwoToneIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
44-
<Typography
45-
variant="h6"
46-
noWrap
47-
component="a"
48-
href="/"
49-
sx={{
50-
mr: 2,
51-
display: { xs: 'none', md: 'flex' },
52-
fontFamily: 'monospace',
53-
fontWeight: 700,
54-
letterSpacing: '.3rem',
55-
color: 'inherit',
56-
textDecoration: 'none',
57-
}}
58-
>
59-
Leads App
60-
</Typography>
40+
const onLogin = () => {
41+
setAnchorElUser(null);
42+
setShowLoginDialog(true);
43+
}
6144

62-
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
63-
{/* Hamburger button */}
64-
<IconButton
65-
size="large"
66-
aria-label="account of current user"
67-
aria-controls="menu-appbar"
68-
aria-haspopup="true"
69-
onClick={handleOpenNavMenu}
70-
color="inherit"
71-
>
72-
<MenuIcon />
73-
</IconButton>
45+
const onLogout = () => {
46+
setAnchorElUser(null);
47+
handleLogout();
48+
};
7449

75-
{/* Mobile menu */}
76-
<Menu
77-
id="menu-appbar"
78-
anchorEl={anchorElNav}
79-
anchorOrigin={{
80-
vertical: 'bottom',
81-
horizontal: 'left',
82-
}}
83-
keepMounted
84-
transformOrigin={{
85-
vertical: 'top',
86-
horizontal: 'left',
87-
}}
88-
open={Boolean(anchorElNav)}
89-
onClose={handleCloseNavMenu}
50+
return (
51+
<>
52+
<AppBar position="static">
53+
<Container maxWidth="xl">
54+
<Toolbar disableGutters>
55+
{/* Desktop title */}
56+
<StorageTwoToneIcon sx={{display: {xs: 'none', md: 'flex'}, mr: 1}}/>
57+
<Typography
58+
variant="h6"
59+
noWrap
60+
component="a"
61+
href="/"
9062
sx={{
91-
display: { xs: 'block', md: 'none' },
63+
mr: 2,
64+
display: {xs: 'none', md: 'flex'},
65+
fontFamily: 'monospace',
66+
fontWeight: 700,
67+
letterSpacing: '.3rem',
68+
color: 'inherit',
69+
textDecoration: 'none',
9270
}}
9371
>
94-
<MenuItem key="home" onClick={handleCloseNavMenu}>
95-
<Typography textAlign="center">Home</Typography>
96-
</MenuItem>
97-
</Menu>
98-
</Box>
72+
Leads App
73+
</Typography>
9974

100-
{/* Mobile title */}
101-
<StorageTwoToneIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
102-
<Typography
103-
variant="h5"
104-
noWrap
105-
component="a"
106-
href=""
107-
sx={{
108-
mr: 2,
109-
display: { xs: 'flex', md: 'none' },
110-
flexGrow: 1,
111-
fontFamily: 'monospace',
112-
fontWeight: 700,
113-
letterSpacing: '.3rem',
114-
color: 'inherit',
115-
textDecoration: 'none',
116-
}}
117-
>
118-
Leads App
119-
</Typography>
75+
<Box sx={{flexGrow: 1, display: {xs: 'flex', md: 'none'}}}>
76+
{/* Hamburger button */}
77+
<IconButton
78+
size="large"
79+
aria-label="account of current user"
80+
aria-controls="menu-appbar"
81+
aria-haspopup="true"
82+
onClick={handleOpenNavMenu}
83+
color="inherit"
84+
>
85+
<MenuIcon/>
86+
</IconButton>
12087

121-
{/* Desktop menu */}
122-
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
123-
<Button
124-
key="home"
125-
onClick={handleCloseNavMenu}
126-
sx={{ my: 2, color: 'white', display: 'block' }}
127-
>
128-
Home
129-
</Button>
130-
</Box>
88+
{/* Mobile menu */}
89+
<Menu
90+
id="menu-appbar"
91+
anchorEl={anchorElNav}
92+
anchorOrigin={{
93+
vertical: 'bottom',
94+
horizontal: 'left',
95+
}}
96+
keepMounted
97+
transformOrigin={{
98+
vertical: 'top',
99+
horizontal: 'left',
100+
}}
101+
open={Boolean(anchorElNav)}
102+
onClose={handleCloseNavMenu}
103+
sx={{
104+
display: {xs: 'block', md: 'none'},
105+
}}
106+
>
107+
<MenuItem key="home" onClick={handleCloseNavMenu}>
108+
<Typography textAlign="center">Home</Typography>
109+
</MenuItem>
110+
</Menu>
111+
</Box>
131112

132-
{/* User icon & menu */}
133-
<Box sx={{ flexGrow: 0 }}>
134-
<Tooltip title="User Options">
135-
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
136-
<Avatar {...appState.avatarProps} />
137-
</IconButton>
138-
</Tooltip>
139-
<Menu
140-
sx={{ mt: '45px' }}
141-
id="menu-appbar"
142-
anchorEl={anchorElUser}
143-
anchorOrigin={{
144-
vertical: 'top',
145-
horizontal: 'right',
146-
}}
147-
keepMounted
148-
transformOrigin={{
149-
vertical: 'top',
150-
horizontal: 'right',
113+
{/* Mobile title */}
114+
<StorageTwoToneIcon sx={{display: {xs: 'flex', md: 'none'}, mr: 1}}/>
115+
<Typography
116+
variant="h5"
117+
noWrap
118+
component="a"
119+
href=""
120+
sx={{
121+
mr: 2,
122+
display: {xs: 'flex', md: 'none'},
123+
flexGrow: 1,
124+
fontFamily: 'monospace',
125+
fontWeight: 700,
126+
letterSpacing: '.3rem',
127+
color: 'inherit',
128+
textDecoration: 'none',
151129
}}
152-
open={Boolean(anchorElUser)}
153-
onClose={handleCloseUserMenu}
154130
>
155-
{/* Login/Logout */}
156-
<LoginDialog appState={appState} handleLogin={handleLogin} handleLogout={handleLogout} clearError={clearError} setAnchorElUser={setAnchorElUser} />
157-
</Menu>
131+
Leads App
132+
</Typography>
133+
134+
{/* Desktop menu */}
135+
<Box sx={{flexGrow: 1, display: {xs: 'none', md: 'flex'}}}>
136+
<Button
137+
key="home"
138+
onClick={handleCloseNavMenu}
139+
sx={{my: 2, color: 'white', display: 'block'}}
140+
>
141+
Home
142+
</Button>
143+
</Box>
158144

159-
{/* Darkmode toggler */}
160-
<IconButton sx={{ ml: 1 }} onClick={onChangeTheme}>
161-
{appState.darkMode ? <Brightness7Icon /> : <Brightness4Icon />}
162-
</IconButton>
163-
</Box>
164-
</Toolbar>
165-
</Container>
166-
</AppBar>
145+
{/* User icon & menu */}
146+
<Box sx={{flexGrow: 0}}>
147+
<Tooltip title="User Options">
148+
<IconButton onClick={handleOpenUserMenu} sx={{p: 0}}>
149+
<Avatar {...appState.avatarProps} />
150+
</IconButton>
151+
</Tooltip>
152+
<Menu
153+
sx={{mt: '45px'}}
154+
id="menu-appbar"
155+
anchorEl={anchorElUser}
156+
anchorOrigin={{
157+
vertical: 'top',
158+
horizontal: 'right',
159+
}}
160+
keepMounted
161+
transformOrigin={{
162+
vertical: 'top',
163+
horizontal: 'right',
164+
}}
165+
open={Boolean(anchorElUser)}
166+
onClose={handleCloseUserMenu}
167+
>
168+
{/* Login/Logout */}
169+
<MenuItem disabled={appState.isAuthenticated} aria-label='login' onClick={onLogin}>Login</MenuItem>
170+
<MenuItem disabled={!appState.isAuthenticated} aria-label='logout' onClick={onLogout}>Logout</MenuItem>
171+
</Menu>
172+
173+
{/* Darkmode toggler */}
174+
<IconButton sx={{ml: 1}} onClick={onChangeTheme}>
175+
{appState.darkMode ? <Brightness7Icon/> : <Brightness4Icon/>}
176+
</IconButton>
177+
</Box>
178+
</Toolbar>
179+
</Container>
180+
</AppBar>
181+
{showLoginDialog && (
182+
<LoginDialog appState={appState} open={showLoginDialog} handleLogin={handleLogin} clearError={clearError}
183+
setAnchorElUser={setAnchorElUser} setShowLoginDialog={() => setShowLoginDialog(false)}/>)}
184+
</>
167185
);
168186
}
169187

0 commit comments

Comments
 (0)