@churchapps/apphelper
Version:
Library of helper functions for React and NextJS ChurchApps
40 lines • 2.31 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useRef } from "react";
import { Box, Button, Icon, Paper, Popper, Grow, ClickAwayListener } from "@mui/material";
import { NavItem } from "../wrapper/NavItem";
export const PrimaryMenu = (props) => {
const [open, setOpen] = useState(false);
const anchorRef = useRef(null);
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen);
};
const handleClose = (event) => {
if (anchorRef.current &&
anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
const handleItemClick = (url) => {
setOpen(false);
props.onNavigate(url);
};
const getNavItems = () => {
let result = [];
props.menuItems.forEach((item) => {
result.push(_jsx(NavItem, { url: item.url, label: item.label.toUpperCase(), icon: item.icon, onNavigate: handleItemClick }, item.url));
});
return result;
};
return (_jsxs(_Fragment, { children: [_jsxs(Button, { ref: anchorRef, onClick: handleToggle, color: "inherit", endIcon: _jsx(Icon, { children: "expand_more" }), id: "primaryNavButton", children: [_jsx("img", { src: "/images/logo-icon.png", alt: "Primary Menu" }), _jsx("h2", { children: props.label })] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, role: undefined, placement: "bottom-end", transition: true, disablePortal: true, style: { zIndex: 1300, color: "#FFF" }, children: ({ TransitionProps }) => (_jsx(Grow, { ...TransitionProps, children: _jsx(Paper, { elevation: 3, sx: {
backgroundColor: "var(--c1)",
color: "#FFF",
minWidth: 300,
paddingY: "10px",
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
}, children: _jsx(ClickAwayListener, { onClickAway: handleClose, children: _jsx(Box, { sx: {
"& a": { color: "#FFF", textDecoration: "none" },
"& a:hover": { color: "#DDD" },
}, children: getNavItems() }) }) }) })) })] }));
};
//# sourceMappingURL=PrimaryMenu.js.map