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

React / Material UI Design kit for Elacity project

import { __rest } from '../../node_modules/tslib/tslib.es6.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useState } from 'react';
import { Icon } from '@iconify/react';
import { useLocation, matchPath } from 'react-router-dom';
import arrowIosForwardFill from '@iconify/icons-eva/arrow-ios-forward-fill';
import arrowIosDownwardFill from '@iconify/icons-eva/arrow-ios-downward-fill';
import { styled, useTheme, alpha } from '@mui/material/styles';
import { ListItemButton, ListItemIcon, Box, List, ListItemText, Collapse } from '@mui/material';
import { NavLink } from '../Link.js';
import ItemMini from './MiniNavItem.js';

// @ts-ignore
const ListItemStyle = styled((props) => jsx(ListItemButton, Object.assign({}, props)))(({ theme }) => (Object.assign(Object.assign({}, theme.typography.h6), { height: 48, position: 'relative', textTransform: 'capitalize', fontWeight: 500, margin: theme.spacing(1, 1.8), borderRadius: theme.shape.borderRadius, paddingLeft: theme.spacing(4), paddingRight: theme.spacing(3), 
    // color: theme.palette.text.primary,
    '&:before': {
        top: 0,
        right: 0,
        width: 3,
        bottom: 0,
        display: 'none',
        position: 'absolute',
        borderTopLeftRadius: 4,
        borderBottomLeftRadius: 4,
        backgroundColor: theme.palette.primary.main,
    } })));
const ListItemIconStyle = styled(ListItemIcon)({
    width: 22,
    height: 22,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
});
function NavItem({ item, active, minimized }) {
    const theme = useTheme();
    const isActiveRoot = active(item.path);
    const { title, path, icon, info, children } = item;
    // only for non-minimized
    const [open, setOpen] = useState(isActiveRoot);
    const handleOpen = () => {
        setOpen((prev) => !prev);
    };
    const activeRootStyle = {
        color: 'primary.main',
        fontWeight: 600,
        bgcolor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
        '&:before': { display: 'block' },
    };
    const activeSubStyle = {
        color: 'text.primary',
    };
    const activeIconStyle = {
        color: 'primary.main',
    };
    // @todo: create another component for minimized state
    if (minimized) {
        return jsx(ItemMini, Object.assign({ id: "mini-nav" }, { item, active }));
    }
    if (children) {
        return (jsxs(Fragment, { children: [jsxs(ListItemStyle, Object.assign({ onClick: handleOpen, sx: Object.assign({}, (isActiveRoot
                        ? activeRootStyle
                        : {
                            '& .MuiListItemText-root': {
                                color: theme.palette.grey[700],
                            },
                        })) }, { children: [icon && (jsx(ListItemIconStyle, Object.assign({ sx: Object.assign({}, (isActiveRoot && activeIconStyle)) }, { children: icon }))), jsx(ListItemText, { disableTypography: true, primary: title }), info && info, jsx(Box, { component: Icon, icon: open ? arrowIosDownwardFill : arrowIosForwardFill, sx: { width: 16, height: 16, ml: 1 } })] })), jsx(Collapse, Object.assign({ in: open, timeout: "auto", unmountOnExit: true }, { children: jsx(List, Object.assign({ component: "div", disablePadding: true }, { children: children.map((i) => {
                            const isActiveSub = active(path);
                            return (jsxs(ListItemStyle, Object.assign({ component: NavLink, to: i.path, sx: Object.assign(Object.assign({}, (isActiveSub && activeSubStyle)), { fontWeight: 'normal' }) }, { children: [jsx(ListItemIconStyle, { children: jsx(Box, { component: "span", sx: Object.assign({ width: 4, height: 4, display: 'flex', borderRadius: '50%', alignItems: 'center', justifyContent: 'center', bgcolor: 'text.disabled', 
                                                // eslint-disable-next-line @typescript-eslint/no-shadow
                                                transition: (theme) => theme.transitions.create('transform') }, (isActiveSub && {
                                                transform: 'scale(1)',
                                                bgcolor: 'primary.main',
                                            })) }) }), jsx(ListItemText, { disableTypography: true, primary: i.title, sx: { fontSize: '0.92rem' } })] }), i.title));
                        }) })) }))] }));
    }
    return (jsx(Fragment, { children: jsxs(ListItemStyle, Object.assign({ component: NavLink, to: path, sx: Object.assign({}, (isActiveRoot && activeRootStyle)) }, { children: [jsx(ListItemIconStyle, { children: icon && icon }), jsx(ListItemText, { disableTypography: true, primary: title }), info && info] })) }));
}
var VerticalMenu = (_a) => {
    var { menus, minimized } = _a, other = __rest(_a, ["menus", "minimized"]);
    const { pathname } = useLocation();
    const match = (path) => (path ? !!matchPath({ path, end: false }, pathname.toLowerCase()) : false);
    return (jsx(Box, Object.assign({}, other, { children: jsx(List, Object.assign({ disablePadding: true }, { children: menus.map((item) => (jsx(NavItem, { minimized: minimized, item: item, active: match }, item.title))) })) })));
};

export { ListItemStyle, VerticalMenu as default };
//# sourceMappingURL=VerticalMenu.js.map