54 lines
1.7 KiB
JavaScript
54 lines
1.7 KiB
JavaScript
import { ExpandLess, ExpandMore, Link } from "@mui/icons-material";
|
|
import { Button, Divider, ListItemIcon, ListItemText, Menu, MenuItem } from "@mui/material";
|
|
import NextLink from "next/link";
|
|
import { useState } from "react";
|
|
|
|
const HeaderMenu = ({ menu }) => {
|
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
const open = Boolean(anchorEl);
|
|
|
|
const handleClick = (event) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
color="inherit"
|
|
aria-haspopup="true"
|
|
aria-expanded={open ? 'true' : undefined}
|
|
onClick={handleClick}
|
|
endIcon={open ? <ExpandLess /> : <ExpandMore />}
|
|
>
|
|
{menu.title}
|
|
</Button>
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
open={open}
|
|
onClose={handleClose}
|
|
>
|
|
{menu.subMenu.map((subMenu, index) => (
|
|
<>
|
|
{subMenu.map(sub => (
|
|
|
|
<MenuItem component={NextLink} href={sub.href} key={sub.title} onClick={handleClose}>
|
|
<ListItemIcon>
|
|
<Link fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText>{sub.title}</ListItemText>
|
|
</MenuItem>
|
|
))}
|
|
{menu.subMenu.length - 1 !== index && (
|
|
<Divider />
|
|
)}
|
|
</>
|
|
))}
|
|
</Menu>
|
|
</>
|
|
);
|
|
};
|
|
export default HeaderMenu;
|