Анимация внутри и сна с помощью CSS

У меня есть меню, которое отображает верхнюю часть текущей страницы после нажатия на значок гамбургера, который использует Glamour для CSS.

Меню анимируется справа от экрана и работает отлично, однако я изо всех сил пытаюсь его активировать, как только в любом месте в Меню нажата.

Анимация написана (animateOut), но мне нужна помощь с кодом во время анимации внутри и снаружи в зависимости от щелчка:

Меню гамбургера щелкнуло → слайды меню справа.
В любом месте в контейнере меню щелкнут → меню переместится вправо.

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({

})

"КОД"

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

Ответ 1