diff --git a/components/Header.jsx b/components/Header.jsx index ed102d46..ae007b86 100644 --- a/components/Header.jsx +++ b/components/Header.jsx @@ -126,14 +126,19 @@ const activeStyle = { // TODO: links/routing, mobile const Header = () => { const classes = useStyles(); - const [isIconOpen, setIsIconOpen] = React.useState(false); + // this variable gets set to the DOM reference of IconButton, non-null value indicates the menu should be visible + const [isMenuOpen, setIsMenuOpen] = React.useState(null); - const handleIconClick = event => { - setIsIconOpen(event.currentTarget); + const handleMenuClick = event => { + if (Boolean(isMenuOpen)){ + setIsMenuOpen(null); + } else{ + setIsMenuOpen(event.currentTarget); + } }; - const handleIconClose = () => { - setIsIconOpen(null); + const handleMenuClose = () => { + setIsMenuOpen(null); }; return ( @@ -155,11 +160,11 @@ const Header = () => { Accessibility @@ -167,17 +172,17 @@ const Header = () => { - +