text: import React from 'react';
  import { NavLink as RouterLink } from 'react-router-dom';
  import clsx from 'clsx';
  import PropTypes from 'prop-types';
  import {
    Button,
    ListItem,
    List,
    ListItemIcon,
    ListItemText,
    makeStyles
  } from '@material-ui/core';
  import Collapse from "@material-ui/core/Collapse";
  import ExpandLess from '@material-ui/icons/ExpandLess';
  import ExpandMore from '@material-ui/icons/ExpandMore';
  
  const useStyles = makeStyles((theme) => ({
    item: {
      display: 'flex',
      paddingTop: 0,
      paddingBottom: 0
    },
    button: {
      color: theme.palette.text.secondary,
      fontWeight: theme.typography.fontWeightMedium,
      justifyContent: 'flex-start',
      letterSpacing: 0,
      padding: '10px 8px',
      textTransform: 'none',
      width: '100%'
    },
    icon: {
      marginRight: theme.spacing(1)
    },
    title: {
      marginRight: 'auto'
    },
    active: {
      color: theme.palette.primary.main,
      '& $title': {
        fontWeight: theme.typography.fontWeightMedium
      },
      '& $icon': {
        color: theme.palette.primary.main
      },
      nested: {
        paddingLeft: theme.spacing(50)
      }
    }
  }));
  
  const NavItem = ({
                     className,
                     href,
                     icon: Icon,
                     title,
    open, child, index, menuClicked,
                     ...rest
                   }) => {
    const classes = useStyles();
  
    return (
      <React.Fragment>
      <ListItem
        className={clsx(classes.item, className)}
        disableGutters
        {...rest}
      >
        <Button
          activeClassName={classes.active}
          className={classes.button}
          onClick={menuClicked(index)}
        >
          {Icon && (
            <Icon
              className={classes.icon}
              size="20"
            />
          )}
          <span className={classes.title}>
            {title}
          </span>
          {open ? <ExpandLess/> : <ExpandMore/>}
        </Button>
      </ListItem>
  
        <Collapse in={open} timeout="auto" unmountOnExit>
          <List disablePadding>
            {child.map((smallMenu) => (
              <ListItem button component={RouterLink} to={href}>
                <span className={classes.title}>
                  {smallMenu.title}
                </span>
              </ListItem>
            ))}
          </List>
        </Collapse>
      </React.Fragment>
    );
  };
  
  NavItem.propTypes = {
    className: PropTypes.string,
    href: PropTypes.string,
    icon: PropTypes.elementType,
    title: PropTypes.string
  };
  
  export default NavItem;
  