This code snippet represents the navigation bar for an admin user, featuring 3 icons: navigation menu, user menu, and manage button icons. The problem arises when clicking on any of these icons, as all dropdown items from each icon are displayed in their respective locations. The desired behavior is to display the selected information for each specific icon.
function NavbarAdmin() {
const classes = navbarStyle();
const [anchorEl, setAnchorEl] = React.useState(null);
const isNavMenuOpen = Boolean(anchorEl);
const isProfileMenuOpen = Boolean(anchorEl);
const isManageMenuOpen = Boolean(anchorEl);
const handleProfileMenuOpen = (event) => {
setAnchorEl('profileMenu');
};
const handleNavMenuOpen = (event) => {
setAnchorEl('navMenu');
};
const handleManageMenuOpen = (event) => {
setAnchorEl('manageMenu');
};
const handleMenuClose = () => {
setAnchorEl(null);
};
const userMenu = (
<Menu
anchorEl={'profileMenu'}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
keepMounted
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
open={isProfileMenuOpen}
onClose={handleMenuClose}
>
<MenuItem onClick={handleMenuClose}>Profile</MenuItem>
<MenuItem onClick={handleMenuClose}>My account</MenuItem>
<MenuItem onClick={handleMenuClose}>Sign Out</MenuItem>
</Menu>
);
const navMenu = (
<Menu
anchorEl={'navMenu'}
anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
keepMounted
transformOrigin={{ vertical: 'top', horizontal: 'left' }}
open={isNavMenuOpen}
onClose={handleMenuClose}
>
<MenuItem onClick={handleMenuClose}>Home</MenuItem>
<MenuItem onClick={handleMenuClose}>Movies</MenuItem>
<MenuItem onClick={handleMenuClose}>Concessions</MenuItem>
<MenuItem onClick={handleMenuClose}>Showtimes</MenuItem>
</Menu>
);
const manageMenu = (
<Menu
anchorEl={'manageMenu'}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
keepMounted
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
open={isManageMenuOpen}
onClose={handleMenuClose}
>
<MenuItem onClick={handleMenuClose}>Movies</MenuItem>
<MenuItem onClick={handleMenuClose}>Seats</MenuItem>
<MenuItem onClick={handleMenuClose}>Test</MenuItem>
<MenuItem onClick={handleMenuClose}>Test</MenuItem>
<MenuItem onClick={handleMenuClose}>Test</MenuItem>
<MenuItem onClick={handleMenuClose}>Test</MenuItem>
</Menu>
);
return (
<div className={classes.grow}>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start" className={classes.menuButton}
color="inherit"
aria-label="nav account"
aria-haspopup="true"
onClick={handleNavMenuOpen}
color="inherit"
>
<MenuIcon />
</IconButton>
<Typography className={classes.acptheater} variant="h6" noWrap>
ACP Theater
</Typography>
<div className={classes.grow} />
<div>
<IconButton aria-label="show messages" color="inherit">
<Badge badgeContent={1} color="secondary">
<MailIcon />
</Badge>
</IconButton>
<IconButton
edge="end" className={classes.menuButton}
aria-label="user account"
aria-haspopup="true"
onClick={handleProfileMenuOpen}
color="inherit"
>
<AccountCircle />
</IconButton>
<Button
edge="end" className={classes.menuButton}
aria-label="user account"
aria-haspopup="true"
onClick={handleManageMenuOpen}
color="inherit"color="inherit"
>
Manage</Button>
<Button color="inherit">Login</Button>
</div>
</Toolbar>
</AppBar>
{manageMenu}
{navMenu}
{userMenu}
</div>
);
}