@elacity-js/uikit/dist/components/Nav/HorizontalMenu.js

React / Material UI Design kit for Elacity project

import { jsx, jsxs } from 'react/jsx-runtime';
import React__default from 'react';
import { useLocation } from 'react-router-dom';
import { Typography, Box, Link } from '@mui/material';
import { styled, alpha } from '@mui/material/styles';
import { SubmenuPopover } from './MiniNavItem.js';
import { RouterLink } from '../Link.js';

const Level1Menu = styled(Typography)(({ theme }) => ({
    color: theme.palette.mode === 'light' ? theme.palette.grey[600] : 'white',
    textDecoration: 'none',
    padding: theme.spacing(2, 2.5),
    display: 'flex',
    alignItems: 'center',
    cursor: 'pointer',
    fontWeight: 500,
    borderRadius: theme.spacing(1),
    '&:hover, &.active': {
        color: theme.palette.primary.main,
        background: alpha(theme.palette.primary.light, 0.15),
    },
}));
const HorizontalMenu = ({ menus }) => {
    const location = useLocation();
    const [anchorEl, setAnchorEl] = React__default.useState({});
    const handlePopoverOpen = (index) => (event) => {
        for (const tempIndex in anchorEl) {
            if (anchorEl[tempIndex]) {
                anchorEl[tempIndex].classList.remove('active');
            }
        }
        event.currentTarget.classList.add('active');
        setAnchorEl(Object.assign(Object.assign({}, Object.fromEntries(new Array(menus.length).fill(0).map((_, i) => [i, null]))), { [index]: event.currentTarget }));
    };
    const handlePopoverClose = (index) => () => {
        if (anchorEl[index]) {
            anchorEl[index].classList.remove('active');
        }
        setAnchorEl((prev) => (Object.assign(Object.assign({}, prev), { [index]: null })));
    };
    // close submenu when link changes
    React__default.useEffect(() => {
        menus.forEach((_, i) => {
        });
    }, [location.pathname]);
    return (jsx(Box, Object.assign({ className: "Uikit-Menu Uikit-HorizontalMenu", sx: { display: 'flex', ml: 2 } }, { children: menus.map((menu, index) => (jsxs("div", Object.assign({ "aria-owns": anchorEl ? 'mouse-over-popover' : undefined, "aria-haspopup": "true", onMouseEnter: handlePopoverOpen(index), onMouseLeave: handlePopoverClose(index) }, { children: [jsx(Level1Menu, Object.assign({ variant: "subtitle1" }, Object.assign(Object.assign(Object.assign({}, (menu.path &&
                    !menu.path.startsWith('http') && {
                    component: RouterLink,
                    to: menu.path,
                })), (menu.path &&
                    menu.path.startsWith('http') && {
                    component: Link,
                    href: menu.path,
                    target: '_blank',
                    rel: 'noreferrer',
                })), (menu.children && {
                    onMouseEnter: handlePopoverOpen(index),
                    // onMouseLeave: handlePopoverClose(index),
                })), { children: menu.icon })), menu.children && (jsx(SubmenuPopover, { elevation: 0, id: menu.path, sx: {
                        pointerEvents: 'none',
                        '& .MuiPopover-paper': {
                            pointerEvents: 'auto',
                        },
                    }, open: Boolean(anchorEl[index]), anchorEl: anchorEl[index], onClose: handlePopoverClose(index), anchorOrigin: {
                        vertical: 'bottom',
                        horizontal: 'left',
                    }, transformOrigin: {
                        vertical: 'top',
                        horizontal: 'left',
                    }, path: menu.path, submenu: menu.children, PaperProps: {
                        onMouseLeave: handlePopoverClose(index),
                        sx: {
                            // borderRadius: '0 0 8px 8px',
                            borderRadius: 1,
                            boxShadow: 3,
                            mt: '1px',
                            '& .MuiListItemButton-root': {
                                fontWeight: 500,
                                color: (t) => (t.palette.mode === 'light' ? t.palette.grey[600] : 'white'),
                                '&:hover': {
                                    color: (t) => t.palette.primary.main,
                                },
                            },
                        },
                    } }))] }), menu.path))) })));
};

export { HorizontalMenu as default };
//# sourceMappingURL=HorizontalMenu.js.map