FINAL-PROJECT-FRONT/src/components/HomePage/LeftBar/SmallMenuBar/index.tsx

import { makeStyles } from '@material-ui/core'
import React, { useState } from 'react';
import { styled } from '@mui/material/styles';
import Avatar from '@mui/material/Avatar';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import ChatIcon from '@mui/icons-material/Chat';
import PermContactCalendarIcon from '@mui/icons-material/PermContactCalendar';
import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
import CloseIcon from '@mui/icons-material/Close';
import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';

const StyledMenu = styled((props:any) => (
  <Menu
    elevation={0}
    anchorOrigin={{
      vertical: 'top',
      horizontal: 'right',
    }}
    transformOrigin={{
      vertical: 'bottom',
      horizontal: 'right',
    }}
    {...props}
  />
))(({ theme }:any) => ({
  '& .MuiPaper-root': {
    borderRadius: 10,
    marginTop: theme.spacing(-2),
    minWidth: 220,
    color:
      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
    boxShadow:
      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
    '& .MuiMenu-list': {
      padding: '8px 8px',
    },
    '& .MuiMenuItem-root': {
      marginBottom: theme.spacing(1),
      '& .MuiSvgIcon-root': {
        fontSize: 21,
        color: theme.palette.text.secondary,
        marginRight: theme.spacing(4),
      }
    },
  },
}));

const useStyles = makeStyles({
    container: {
        position: 'absolute',
        maxWidth: '100%',
        top: '92vh',
        right: 20,
        zIndex: 10,
        cursor:'pointer'
  },
})

interface ISmallMenuBar {
  handleSelectedMenu:(i:number) => void,
  setIsMenuSm:React.Dispatch<React.SetStateAction<boolean>>,
}
const  SmallMenuBar = ({handleSelectedMenu,setIsMenuSm}:ISmallMenuBar) => {
  const classes = useStyles()
  const [anchorEl, setAnchorEl] = useState<any>(null);
  const open = Boolean(anchorEl);
  const handleClick = (e: React.MouseEvent<HTMLDivElement>):void => setAnchorEl(e.currentTarget)

  const handleClose = ():void => {
    setIsMenuSm(false)
    setAnchorEl(null)
  }

  return (
    <div className={classes.container}>
        <Avatar  onClick={handleClick} sx={{
            bgcolor: 'rgb(41, 139, 231)',
            width: 56, height: 56 }}>
          {!anchorEl?<ModeEditOutlineOutlinedIcon />:<CloseIcon/>}
      </Avatar>
      <StyledMenu
        id="demo-positioned-menu"
        aria-labelledby="demo-positioned-button"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
      >
        <MenuItem  onClick={() => {
          handleClose();
          handleSelectedMenu(3)
        }}>
            <PersonAddAltIcon/>
            New Contact
        </MenuItem>          
        <MenuItem  onClick={() => {
          handleClose();
          handleSelectedMenu(1)
        }}>
            <PermContactCalendarIcon/>
            Contacts
        </MenuItem>      
       </StyledMenu>    
    </div>
  );
}
export default SmallMenuBar