{"size": 2156, "ext": "js", "max_stars_repo_path": "src/components/PopoverMenu.js", "max_stars_repo_name": "epleaner/sfdc-website", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/PopoverMenu.js", "max_issues_repo_name": "epleaner/sfdc-website", "max_issues_repo_issues_event_min_datetime": "2021-03-01T21:29:00.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T10:48:35.000Z", "max_forks_repo_path": "src/components/PopoverMenu.js", "max_forks_repo_name": "epleaner/sfdc-website", "max_forks_repo_forks_event_min_datetime": "2022-02-05T23:11:51.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-05T23:11:51.000Z"}
{"max_stars_count": null, "max_issues_count": 21, "max_forks_count": 1, "avg_line_length": 25.9759036145, "max_line_length": 72, "alphanum_fraction": 0.5519480519}
import * as React from 'react';
import Menu from 'material-ui-popup-state/HoverMenu';
import MenuItem from '@material-ui/core/MenuItem';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import {
  usePopupState,
  bindHover,
  bindMenu,
} from 'material-ui-popup-state/hooks';
import { Link } from 'gatsby';

const useStyles = makeStyles((theme) => ({
  active: {
    borderBottom: `1px solid ${theme.palette.primaryBlue0}`,
    borderBottomRightRadius: '0px',
    borderBottomLeftRadius: '0px',
  },
  link: {
    textDecoration: 'none',
    textTransform: 'uppercase',
    color: 'black',
    fontWeight: 100,
  },
  small: {
    fontSize: '0.8em',
  },
  button: {
    marginRight: theme.spacing(1),
    fontWeight: 100,
  },
}));

const MenuPopupState = ({ mainText, links, currentPath }) => {
  const classes = useStyles();
  const createTextLink = (text) =>
    `/${text
      .toLowerCase()
      .replace(/[^\w\s\-]/gi, '')
      .replace(/\s\s*/g, '-')}`;

  const popupState = usePopupState({
    variant: 'popover',
    popupId: 'popupMenu',
  });

  return (
    <>
      <Link
        className={`${classes.link}`}
        {...bindHover(popupState)}
        to={createTextLink(mainText)}>
        <Button
          className={`${classes.button} ${currentPath ===
            createTextLink(mainText) && classes.active}`}>
          {mainText}
        </Button>
      </Link>
      <Menu
        {...bindMenu(popupState)}
        getContentAnchorEl={null}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
        transformOrigin={{ vertical: 'top', horizontal: 'center' }}>
        {links.map(({ name, path }) => {
          return (
            <Link key={name} to={path} className={`${classes.link}`}>
              <MenuItem onClick={popupState.close}>
                <span
                  className={`${classes.small} ${currentPath === path &&
                    classes.active}`}>
                  {name}
                </span>
              </MenuItem>
            </Link>
          );
        })}
      </Menu>
    </>
  );
};

export default MenuPopupState;
