56 lines
1.4 KiB
React
56 lines
1.4 KiB
React
|
import { Menu, Box, useTheme } from "@mui/material";
|
||
|
|
import { Link } from "react-router-dom";
|
||
|
|
|
||
|
|
import type { MenuItem } from "./Menu";
|
||
|
|
|
||
|
|
type DropDownMenuProps = {
|
||
|
|
anchorElement: HTMLElement | null,
|
||
|
|
setAnchorElement: (element: null) => void,
|
||
|
|
items: MenuItem[],
|
||
|
|
};
|
||
|
|
|
||
|
|
export const DropDownMenu = ({
|
||
|
|
anchorElement,
|
||
|
|
setAnchorElement,
|
||
|
|
items = [],
|
||
|
|
}: DropDownMenuProps) => {
|
||
|
|
const theme = useTheme();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Menu
|
||
|
|
anchorEl={anchorElement}
|
||
|
|
open={!!anchorElement}
|
||
|
|
onClose={() => setAnchorElement(null)}
|
||
|
|
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
|
||
|
|
sx={{
|
||
|
|
"&.MuiMenu-root.MuiModal-root": { zIndex: "1" },
|
||
|
|
"& .MuiPaper-root.MuiMenu-paper": {
|
||
|
|
padding: "0 10px",
|
||
|
|
borderRadius: "5px",
|
||
|
|
background: theme.palette.bg.dark,
|
||
|
|
margin: "0",
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{items.map(({ name, url }) => (
|
||
|
|
<Box sx={{ "& a:hover": { background: theme.palette.bg.main } }}>
|
||
|
|
<Link
|
||
|
|
key={name}
|
||
|
|
style={{
|
||
|
|
display: "block",
|
||
|
|
textDecoration: "none",
|
||
|
|
color: theme.palette.common.white,
|
||
|
|
padding: "5px",
|
||
|
|
borderRadius: "3px",
|
||
|
|
transition: ".2s",
|
||
|
|
}}
|
||
|
|
to={url}
|
||
|
|
>
|
||
|
|
{name}
|
||
|
|
</Link>
|
||
|
|
</Box>
|
||
|
|
))}
|
||
|
|
</Menu>
|
||
|
|
);
|
||
|
|
};
|