When the hamburger icon is pressed, a menu appears over the current page with CSS from Glamor. The menu slides in perfectly from the right side of the screen, but I am having trouble getting it to slide out when any part of the menu is clicked.
I have defined the animation for sliding out (animateOut), but I need assistance in implementing the code to switch between animating in and out based on where the user clicks:
- Clicking on the hamburger menu -> menu slides in from the right
- Clicking anywhere inside the menu container -> menu slides out to the right
HamburgerMenu.js
CSS
const cssHamburgerMenuIcon = css({
position: 'absolute',
height: 20,
width: 20,
right: 20,
marginTop: 20,
})
const animateIn = css.keyframes({
'0%': {
transform: 'translateX(100%)'
},
'100%': {
transform: 'translateX(0%)'
}
})
const animateOut = css.keyframes({
'0%': {
transform: 'translateX(0%)'
},
'100%': {
transform: 'translateX(100%)'
}
})
const cssHamburgerMenu = css({
display: 'flex',
position: 'absolute',
flexDirection: 'column',
height: '100%',
width: 250,
right: 0,
top: 0,
zIndex: 1,
color: 'white',
backgroundColor: hamburgerGrey,
fontFamily: 'Century Gothic',
fontSize: '19px',
// animation
animation: `${animateIn} 0.5s`,
})
const cssHamburgerList = css({
listStyleType: 'none',
lineHeight: '47px',
})
const cssHamburgerListItem = css({
})
"CODE"
class HamburgerMenu extends Component {
constructor(props) {
super(props)
this.state = {
menuVisible: false,
}
}
render() {
const menuVisible = this.state.menuVisible
return(
menuVisible ?
<div className={cssHamburgerMenu} onClick={() =>this.setState({ menuVisible: false })}>
<ul className={cssHamburgerList}>
<li className={cssHamburgerListItem}>Home</li>
<li className={cssHamburgerListItem}>News</li>
<li className={cssHamburgerListItem}>About us</li>
<li className={cssHamburgerListItem}>More</li>
</ul>
</div>
: (
<img
className={cssHamburgerMenuIcon}
src={HamburgerMenuIcon}
onClick={() => this.setState({ menuVisible: true})
}
/>
)
)
}
}
export default HamburgerMenu