mui-nav-menu/lib/esm/MenuItemGroup.js

Navigation menu component based on material ui

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useMemo } from "react";
import classNames from "classnames";
import { useConnectedPath } from "./contexts/PathContext";
import { useMenuContext } from "./contexts/MenuContext";
import { makeStyles } from "tss-react/mui";
import { ListSubheader } from "@mui/material";
const useStyle = makeStyles()((theme) => ({
    headerMini: {
        textAlign: "center",
        padding: 0,
    },
}));
const MenuItemGroup = ({ label, className, children, }) => {
    const { classes } = useStyle();
    const connectedIdPath = useConnectedPath();
    const { collapsed } = useMenuContext();
    const nestedLevel = useMemo(() => {
        return connectedIdPath.length;
    }, [connectedIdPath]);
    return (_jsxs(_Fragment, { children: [_jsx(ListSubheader, { className: classNames(className, {
                    [classes.headerMini]: collapsed && nestedLevel <= 1,
                }), children: label }), children] }));
};
export default memo(MenuItemGroup);