import React, { useState } from 'react' import { Icon, IconButton, Hidden } from '@material-ui/core' import { classList } from 'Utils' const TopbarMenu = (props) => { let { offsetTop } = props const [open, setOpen] = useState(false) const handleToggle = () => { setOpen(!open) } return ( <div className={classList({ 'menu-wrap': true, open: open, })} > <Hidden mdUp> <IconButton onClick={handleToggle}> <Icon>{open ? 'close' : 'more_vert'}</Icon> </IconButton> </Hidden> <div style={{ top: offsetTop }} className="flex items-center menu-area container" > {props.children} </div> </div> ) } export default TopbarMenu