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>
    </>
  );
}


import * as React from 'react';
import { Box, Button, IconButton, Tooltip, Popover, Typography, Divider, } from '@mui/material';
import { IoMdHelp } from 'react-icons/io';
import { HiX } from 'react-icons/hi';
export default function ExplanatoryHelpMenu({ children, }) {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    const open = Boolean(anchorEl);
    return (<>
      <Tooltip title='Help and Resources' arrow placement='top-start'>
        <Button onClick={handleClick} size='large' variant='outlined' color='secondary' sx={{
            display: { xs: 'none', sm: 'flex' },
            position: 'fixed',
            bottom: 0,
            right: 0,
            margin: 3,
            px: 0,
            boxShadow: 2,
            borderRadius: 99,
            minWidth: 'inherit',
            width: 36,
            height: 36,
        }}>
          <IoMdHelp />
        </Button>
      </Tooltip>
      <Popover id='help-menu' open={open} disablePortal={true} anchorEl={anchorEl} onClose={handleClose} container={() => document.body} anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'right',
        }} transformOrigin={{
            vertical: 'bottom',
            horizontal: 'right',
        }} sx={{
            '.MuiPaper-root': {
                boxShadow: 2,
            },
        }}>
        <Box sx={{
            display: { xs: 'none', sm: 'flex' },
            flexDirection: 'column',
            alignItems: 'flex-start',
            textAlign: 'left',
            padding: 4,
            minWidth: 300,
            maxWidth: 440,
            gap: 2,
            position: 'relative',
            width: '100%',
        }}>
          <IconButton size='small' onClick={handleClose} sx={{
            position: 'absolute',
            top: '12px',
            right: '12px',
        }}>
            <HiX />
          </IconButton>
          <Box sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
        }}>
            <Typography variant='h3' fontSize='xl'>
              Help
            </Typography>
          </Box>
          <Box sx={{
            color: 'gray.600',
            fontSize: 'sm',
        }}>
            Running into an issue? You can reach out to us via email at{' '}
            <Box component='a' sx={{ color: 'primary.600' }} href={undefined}>
              support@uifoundations.com
            </Box>{' '}
            or check out some of our docs with the links below.
          </Box>
          <Divider light sx={{
            width: '100%',
        }}/>
          <Box>
            <Typography variant='h4' fontSize='md'>
              Helpful links
            </Typography>
            <Box component='ul' sx={{
            listStyle: 'none',
            padding: 0,
            margin: 0,
        }}>
              <Box component='li' sx={{ fontSize: 'sm' }}>
                <Box component='a' target='_blank' rel='noopener noreferrer' sx={{ color: 'primary.600' }} href={undefined}>
                  Contact Sales
                </Box>
              </Box>
              <Box component='li' sx={{ fontSize: 'sm' }}>
                <Box component='a' target='_blank' rel='noopener noreferrer' sx={{ color: 'primary.600' }} href={undefined}>
                  Support
                </Box>
              </Box>
            </Box>
          </Box>
          {children}
        </Box>
      </Popover>
    </>);
}


import * as React from 'react';
import {
  Box,
  Button,
  IconButton,
  Tooltip,
  Popover,
  Typography,
  Divider,
} from '@mui/material';
import { IoMdHelp } from 'react-icons/io';
import { HiX } from 'react-icons/hi';

export default function ExplanatoryHelpMenu({
  children,
}: {
  children: React.ReactNode;
}) {
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
    null,
  );
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };
  const open = Boolean(anchorEl);

  return (
    <>
      <Tooltip title='Help and Resources' arrow placement='top-start'>
        <Button
          onClick={handleClick}
          size='large'
          variant='outlined'
          color='secondary'
          sx={{
            display: { xs: 'none', sm: 'flex' },
            position: 'fixed',
            bottom: 0,
            right: 0,
            margin: 3,
            px: 0,
            boxShadow: 2,
            borderRadius: 99,
            minWidth: 'inherit',
            width: 36,
            height: 36,
          }}
        >
          <IoMdHelp />
        </Button>
      </Tooltip>
      <Popover
        id='help-menu'
        open={open}
        disablePortal={true}
        anchorEl={anchorEl}
        onClose={handleClose}
        container={() => document.body}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'right',
        }}
        transformOrigin={{
          vertical: 'bottom',
          horizontal: 'right',
        }}
        sx={{
          '.MuiPaper-root': {
            boxShadow: 2,
          },
        }}
      >
        <Box
          sx={{
            display: { xs: 'none', sm: 'flex' },
            flexDirection: 'column',
            alignItems: 'flex-start',
            textAlign: 'left',
            padding: 4,
            minWidth: 300,
            maxWidth: 440,
            gap: 2,
            position: 'relative',
            width: '100%',
          }}
        >
          <IconButton
            size='small'
            onClick={handleClose}
            sx={{
              position: 'absolute',
              top: '12px',
              right: '12px',
            }}
          >
            <HiX />
          </IconButton>
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              gap: 1,
            }}
          >
            <Typography variant='h3' fontSize='xl'>
              Help
            </Typography>
          </Box>
          <Box
            sx={{
              color: 'gray.600',
              fontSize: 'sm',
            }}
          >
            Running into an issue? You can reach out to us via email at{' '}
            <Box component='a' sx={{ color: 'primary.600' }} href={undefined}>
              support@uifoundations.com
            </Box>{' '}
            or check out some of our docs with the links below.
          </Box>
          <Divider
            light
            sx={{
              width: '100%',
            }}
          />
          <Box>
            <Typography variant='h4' fontSize='md'>
              Helpful links
            </Typography>
            <Box
              component='ul'
              sx={{
                listStyle: 'none',
                padding: 0,
                margin: 0,
              }}
            >
              <Box component='li' sx={{ fontSize: 'sm' }}>
                <Box
                  component='a'
                  target='_blank'
                  rel='noopener noreferrer'
                  sx={{ color: 'primary.600' }}
                  href={undefined}
                >
                  Contact Sales
                </Box>
              </Box>
              <Box component='li' sx={{ fontSize: 'sm' }}>
                <Box
                  component='a'
                  target='_blank'
                  rel='noopener noreferrer'
                  sx={{ color: 'primary.600' }}
                  href={undefined}
                >
                  Support
                </Box>
              </Box>
            </Box>
          </Box>
          {children}
        </Box>
      </Popover>
    </>
  );
}


Help Menus

Simple Help Menu

Explanatory Help Menu