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

import Divider from '@mui/material/Divider';
import Paper from '@mui/material/Paper';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import PermContactCalendarIcon from '@mui/icons-material/PermContactCalendar';
import SettingsIcon from '@mui/icons-material/Settings';
import Brightness3Icon from '@mui/icons-material/Brightness3'; 
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import BugReportIcon from '@mui/icons-material/BugReport';
import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
import Switch from '@mui/material/Switch';
import { makeStyles } from '@material-ui/core'
import { useDispatch } from 'react-redux';
import { asyncCurrentUser } from '../../../../redux/authorization/operations';
import { updateUser } from '../../../../api-data';

const useStyles = makeStyles({
    overlay: {
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100vw',
      height: '100vh',
      zIndex:100
    },
    container: {
      position: 'absolute',
      width: 270,
      maxWidth: '100%',
      top: 60,
      left: 15,
      zIndex: 10,
      visibility: 'visible',
    },
    list: {
      background:'#fdfdfd'
    },
    listItemLast: {
      textAlign: 'center',
    },
    listIcon: {
        marginRight: 15,
    },
    listIconText: {
        marginRight: 15,
        paddingLeft:6
    }
})

const label = { inputProps: { 'aria-label': 'Switch demo' } };

interface IContactsList {
  handleSelectedMenu: (i: number) => void,
  nightMode: boolean
}

const MenuBar = ({handleSelectedMenu,nightMode}:IContactsList) => {
  const classes = useStyles()
  const dispatch = useDispatch()
  const handleNightMode = () => {
      updateUser({ nightMode: !nightMode })
      dispatch(asyncCurrentUser())
  }
  return (
    <div className={classes.overlay} id='overlay'>
      <Paper className={classes.container}>
       <MenuList className={classes.list}>
        <MenuItem  onClick={() => handleSelectedMenu(3)}>
          <ListItemIcon className={classes.listIcon}>
            <PersonAddAltIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText>New Contact</ListItemText>
          </MenuItem>          
        <MenuItem  onClick={() => handleSelectedMenu(1)}>
          <ListItemIcon className={classes.listIcon}>
            <PermContactCalendarIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText>Contacts</ListItemText>
        </MenuItem>
 
        <MenuItem onClick={() => handleSelectedMenu(2)}>
          <ListItemIcon className={classes.listIcon}>
            <SettingsIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText>Settings</ListItemText>
        </MenuItem>
        <MenuItem style={{cursor:'default'}}>
          <ListItemIcon className={classes.listIcon}>
            <Brightness3Icon fontSize="medium" />
          </ListItemIcon>
          <ListItemText>Night Mode</ListItemText>
          <Switch onClick={handleNightMode} checked={nightMode} {...label} style={{cursor:'pointer'}}/>
        </MenuItem>
        <a style={{ textDecoration: 'none', color: 'inherit' }} target='blank'
          href='https://www.makeuseof.com/tag/useful-telegram-features/'>
          <MenuItem>
            <ListItemIcon className={classes.listIcon}>
              <HelpOutlineIcon fontSize="medium" />
            </ListItemIcon>
            <ListItemText>Telegram Features</ListItemText>
          </MenuItem>
        </a>
        <a style={{ textDecoration: 'none', color: 'inherit' }} target='blank'
          href='https://bugs.telegram.org/?tag_ids=41&sort=time'>
          <MenuItem>
            <ListItemIcon className={classes.listIcon}>
              <BugReportIcon fontSize="medium" />
            </ListItemIcon>
            <ListItemText>Report bug</ListItemText>
          </MenuItem>
        </a>
        <a style={{ textDecoration: 'none', color: 'inherit' }} target='blank'
          href='https://www.msn.com/en-in/money/tech/telegram-webk-and-webz-web-apps-launched-whats-the-difference/ar-BB1fOwLR'>
          <MenuItem>
            <ListItemIcon className={classes.listIconText}>
              K
            </ListItemIcon>
            <ListItemText>Switch to K Version</ListItemText>
          </MenuItem>
        </a>
        <a style={{ textDecoration: 'none', color: 'inherit' }} target='blank'
          href='https://desktop.telegram.org/changelog'>
          <MenuItem>
            <ListItemIcon className={classes.listIconText}>
              W
            </ListItemIcon>
            <ListItemText>Switch to Old Version</ListItemText>
          </MenuItem>
        </a>            
        <Divider />
        <MenuItem style={{cursor:'default'}}>
          <ListItemText secondary='Telegram WebZ 1.32.3' className={classes.listItemLast}/>
        </MenuItem>
      </MenuList>
      </Paper>
    </div>
  );
}

export default MenuBar