@churchapps/apphelper
Version:
Library of helper functions for React and NextJS ChurchApps
22 lines • 1.58 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Box, Button, Icon, Menu } from "@mui/material";
import { NavItem } from "../wrapper/NavItem";
export const SecondaryMenuAlt = (props) => {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClose = () => { setAnchorEl(null); };
const open = Boolean(anchorEl);
const handleClick = (e) => {
e.preventDefault();
setAnchorEl(e.currentTarget);
};
const getItems = () => {
const result = [];
props.menuItems.forEach(item => {
result.push(_jsx(NavItem, { url: item.url, label: item.label, onNavigate: props.onNavigate, icon: "people" }, item.url));
});
return result;
};
return (_jsxs("div", { id: "secondaryMenuAlt", children: [_jsx(Button, { onClick: handleClick, color: "inherit", "aria-controls": open ? "account-menu" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, endIcon: _jsx(Icon, { children: "expand_more" }), id: "secondaryMenuButton", children: _jsx("h3", { style: { lineHeight: 1 }, children: props.label }) }), _jsx(Menu, { anchorEl: anchorEl, id: "account-menu", open: anchorEl !== null, onClose: handleClose, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, sx: { "& .MuiBox-root": { borderBottom: 0 } }, children: _jsx(Box, { sx: { borderBottom: 1, borderColor: "divider" }, children: getItems() }) })] }));
};
//# sourceMappingURL=SecondaryMenuAlt.js.map