1  import { Fragment, useState, Children } from "react";
 2  import { Menu, ThemeProvider, styled } from "@mui/material";
 3  
 4  import useSettings from "app/hooks/useSettings";
 5  
 6  const MenuButton = styled("div")(({ theme }) => ({
 7    display: "inline-block",
 8    color: theme.palette.text.primary,
 9    "& div:hover": { backgroundColor: theme.palette.action.hover }
10  }));
11  
12  export default function MatxMenu(props) {
13    const { settings } = useSettings();
14    const [anchorEl, setAnchorEl] = useState(null);
15  
16    const children = Children.toArray(props.children);
17    let { shouldCloseOnItemClick = true, horizontalPosition = "left" } = props;
18  
19    const handleClose = () => setAnchorEl(null);
20    const handleClick = (event) => setAnchorEl(event.currentTarget);
21  
22    return (
23      <Fragment>
24        <MenuButton onClick={handleClick}>{props.menuButton}</MenuButton>
25        <ThemeProvider theme={settings.themes[settings.activeTheme]}>
26          <Menu
27            elevation={8}
28            open={!!anchorEl}
29            anchorEl={anchorEl}
30            onClose={handleClose}
31            anchorOrigin={{ vertical: "bottom", horizontal: horizontalPosition }}
32            transformOrigin={{ vertical: "top", horizontal: horizontalPosition }}>
33            {children.map((child, index) => (
34              <div onClick={shouldCloseOnItemClick ? handleClose : () => {}} key={index}>
35                {child}
36              </div>
37            ))}
38          </Menu>
39        </ThemeProvider>
40      </Fragment>
41    );
42  }