import * as React from 'react';
import { Button, Menu, MenuItem, Tooltip, Divider } from '@mui/material';
import { IoMdHelp } from 'react-icons/io';
export default function SimpleHelpMenu() {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const open = Boolean(anchorEl);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    return (<>
      <Tooltip title='Help and Resources' arrow placement='top-start'>
        <Button onClick={handleClick} size='large' sx={{
            color: 'primary.200',
            display: { xs: 'none', sm: 'flex' },
            backgroundColor: 'gray.800',
            '&:hover, &:focus, &:active': {
                backgroundColor: 'gray.700',
            },
            position: 'fixed',
            bottom: 0,
            right: 0,
            margin: 3,
            px: 0,
            boxShadow: 2,
            borderRadius: 99,
            minWidth: 'inherit',
            width: 36,
            height: 36,
        }}>
          <IoMdHelp />
        </Button>
      </Tooltip>
      <Menu id='basic-menu' anchorEl={anchorEl} open={open} onClose={handleClose} MenuListProps={{
            'aria-labelledby': 'basic-button',
        }} disablePortal={true} anchorOrigin={{
            vertical: 'top',
            horizontal: 'right',
        }} transformOrigin={{
            vertical: 'bottom',
            horizontal: 'right',
        }} sx={{
            transform: 'translateY(-12px)',
        }}>
        <MenuItem dense onClick={handleClose}>
          Help Center
        </MenuItem>
        <MenuItem dense onClick={handleClose}>
          Support Forum
        </MenuItem>
        <MenuItem dense onClick={handleClose}>
          Changelog
        </MenuItem>
        <Divider />
        <MenuItem dense onClick={handleClose}>
          Keyboard shortcuts
        </MenuItem>
        <MenuItem dense onClick={handleClose}>
          Contact Support
        </MenuItem>
        <MenuItem dense onClick={handleClose}>
          Change language
        </MenuItem>
      </Menu>
    </>);
}


import * as React from 'react';
import { Button, Menu, MenuItem, Tooltip, Divider } from '@mui/material';
import { IoMdHelp } from 'react-icons/io';

export default function SimpleHelpMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (event: any) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <>
      <Tooltip title='Help and Resources' arrow placement='top-start'>
        <Button
          onClick={handleClick}
          size='large'
          sx={{
            color: 'primary.200',
            display: { xs: 'none', sm: 'flex' },
            backgroundColor: 'gray.800',
            '&:hover, &:focus, &:active': {
              backgroundColor: 'gray.700',
            },
            position: 'fixed',
            bottom: 0,
            right: 0,
            margin: 3,
            px: 0,
            boxShadow: 2,
            borderRadius: 99,
            minWidth: 'inherit',
            width: 36,
            height: 36,
          }}
        >
          <IoMdHelp />
        </Button>
      </Tooltip>
      <Menu
        id='basic-menu'
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': 'basic-button',
        }}
        disablePortal={true}
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'right',
        }}
        transformOrigin={{
          vertical: 'bottom',
          horizontal: 'right',
        }}
        sx={{
          transform: 'translateY(-12px)',
        }}
      >
        <MenuItem dense onClick={handleClose}>
          Help Center
        </MenuItem>
        <MenuItem dense onClick={handleClose}>
          Support Forum
        </MenuItem>
        <MenuItem dense onClick={handleClose}>
          Changelog
        </MenuItem>
        <Divider />
        <MenuItem dense onClick={handleClose}>
          Keyboard shortcuts
        </MenuItem>
        <MenuItem dense onClick={handleClose}>
          Contact Support
        </MenuItem>
        <MenuItem dense onClick={handleClose}>
          Change language
        </MenuItem>
      </Menu>
    </>
  );
}


Help Menus

Simple Help Menu

Explanatory Help Menu