Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | import { Button } from "@material-ui/core"; import { grey } from "@material-ui/core/colors"; import Avatar from "components/Avatar"; import { MenuIcon } from "components/Icons"; import Menu from "components/Menu"; import useCurrentUser from "features/userQueries/useCurrentUser"; import React, { Dispatch, ReactNode, SetStateAction } from "react"; import makeStyles from "utils/makeStyles"; const useStyles = makeStyles((theme) => ({ menu: { boxShadow: theme.shadows[1], minWidth: "12rem", }, menuPopover: { transform: "translateY(1rem)", }, menuBtn: { display: "flex", flexDirection: "row", alignItems: "center", border: `1px solid ${grey[300]}`, borderRadius: 999, backgroundColor: grey[200], padding: theme.spacing(1), transition: `${theme.transitions.duration.short}ms ${theme.transitions.easing.easeInOut}`, "&:hover": { opacity: 0.8, backgroundColor: grey[300], }, }, avatar: { height: "2rem", width: "2rem", }, })); export default function LoggedInMenu({ menuOpen, setMenuOpen, children, }: { menuOpen: boolean; setMenuOpen: Dispatch<SetStateAction<boolean>>; children: ReactNode; }) { const classes = useStyles(); const menuRef = React.useRef<HTMLButtonElement>(null); const { data: user } = useCurrentUser(); return ( <> <Button aria-controls="navigation-menu" aria-haspopup="true" className={classes.menuBtn} onClick={() => setMenuOpen((prevMenuOpen: boolean) => !prevMenuOpen)} ref={menuRef} > <MenuIcon /> <Avatar user={user} className={classes.avatar} isProfileLink={false} /> </Button> <Menu id="navigation-menu" open={menuOpen} anchorEl={menuRef.current} onClose={() => setMenuOpen(false)} classes={{ paper: classes.menu, }} anchorOrigin={{ vertical: "bottom", horizontal: "right", }} getContentAnchorEl={null} PopoverClasses={{ root: classes.menuPopover, }} > {children} </Menu> </> ); } |