import * as React from 'react';
import { Box, Button, Menu, MenuItem } from '@mui/material';
export default function MenuBasic() {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const open = Boolean(anchorEl);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    return (<Box>
      <Button id='basic-button' aria-controls={open ? 'basic-menu' : undefined} aria-haspopup='true' aria-expanded={open ? 'true' : undefined} onClick={handleClick}>
        Open Menu
      </Button>
      <Menu id='basic-menu' anchorEl={anchorEl} open={open} onClose={handleClose} MenuListProps={{
            'aria-labelledby': 'basic-button',
        }} disablePortal={true}>
        <MenuItem onClick={handleClose}>Archive</MenuItem>
        <MenuItem onClick={handleClose}>Edit</MenuItem>
        <MenuItem onClick={handleClose}>Delete</MenuItem>
      </Menu>
    </Box>);
}


import * as React from 'react';
import { Box, Button, Menu, MenuItem } from '@mui/material';

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

  return (
    <Box>
      <Button
        id='basic-button'
        aria-controls={open ? 'basic-menu' : undefined}
        aria-haspopup='true'
        aria-expanded={open ? 'true' : undefined}
        onClick={handleClick}
      >
        Open Menu
      </Button>
      <Menu
        id='basic-menu'
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': 'basic-button',
        }}
        disablePortal={true}
      >
        <MenuItem onClick={handleClose}>Archive</MenuItem>
        <MenuItem onClick={handleClose}>Edit</MenuItem>
        <MenuItem onClick={handleClose}>Delete</MenuItem>
      </Menu>
    </Box>
  );
}


import * as React from 'react';
import { Box, Button, Divider, Menu, MenuItem } from '@mui/material';
import { TbHelp, TbLogout, TbSettings } from 'react-icons/tb';
// menu with a status of who is signed in
export default function MenuLoggedIn() {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const open = Boolean(anchorEl);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    return (<Box>
      <Button id='basic-button' aria-controls={open ? 'basic-menu' : undefined} aria-haspopup='true' aria-expanded={open ? 'true' : undefined} onClick={handleClick}>
        Open Menu
      </Button>
      <Menu id='basic-menu' anchorEl={anchorEl} open={open} onClose={handleClose} MenuListProps={{
            'aria-labelledby': 'basic-button',
        }} disablePortal={true}>
        <MenuItem disabled sx={{
            display: 'flex',
            alignItems: 'flex-start',
            flexDirection: 'column',
        }}>
          <Box sx={{
            lineHeight: 1,
            fontSize: 9,
            mt: 1,
        }}>
            Signed in as:
          </Box>
          <Box sx={{ fontWeight: 500 }}>kyle@uifoundations.com</Box>
        </MenuItem>
        <Divider />
        <MenuItem onClick={handleClose} sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
        }}>
          <TbSettings />
          Settings
        </MenuItem>
        <MenuItem onClick={handleClose} sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
        }}>
          <TbHelp />
          Help
        </MenuItem>
        <MenuItem onClick={handleClose} sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
        }}>
          <TbLogout />
          Sign Out
        </MenuItem>
      </Menu>
    </Box>);
}


import * as React from 'react';
import { Box, Button, Divider, Menu, MenuItem } from '@mui/material';
import { TbHelp, TbLogout, TbSettings } from 'react-icons/tb';
// menu with a status of who is signed in
export default function MenuLoggedIn() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (event: any) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <Box>
      <Button
        id='basic-button'
        aria-controls={open ? 'basic-menu' : undefined}
        aria-haspopup='true'
        aria-expanded={open ? 'true' : undefined}
        onClick={handleClick}
      >
        Open Menu
      </Button>
      <Menu
        id='basic-menu'
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': 'basic-button',
        }}
        disablePortal={true}
      >
        <MenuItem
          disabled
          sx={{
            display: 'flex',
            alignItems: 'flex-start',
            flexDirection: 'column',
          }}
        >
          <Box
            sx={{
              lineHeight: 1,
              fontSize: 9,
              mt: 1,
            }}
          >
            Signed in as:
          </Box>
          <Box sx={{ fontWeight: 500 }}>kyle@uifoundations.com</Box>
        </MenuItem>
        <Divider />
        <MenuItem
          onClick={handleClose}
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
          }}
        >
          <TbSettings />
          Settings
        </MenuItem>
        <MenuItem
          onClick={handleClose}
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
          }}
        >
          <TbHelp />
          Help
        </MenuItem>
        <MenuItem
          onClick={handleClose}
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
          }}
        >
          <TbLogout />
          Sign Out
        </MenuItem>
      </Menu>
    </Box>
  );
}


Menus

Basic menu

Menu logged in