jsx import { CSSObject , jsx } from '@emotion/core' ; import React from 'react' ; import { QueryKeys , media } from '../../mediaQueries' ; import { filterProps } from '../../util' ; import type { Theme } from '../Theme' ; export interface MenuOpenButtonProps < T = HTMLDivElement > extends React . HTMLProps < T > { open ? : boolean ; } export const menuOpenButtonStyle = ( theme , { open } ) => ( { display : 'block' , div : { backgroundColor : theme . general . color , height : '2px' , margin : '4px' , transition : 'all 0.25s ease-in-out' , width : '16px' , } , 'div:nth-child(1)' : { transform : open ? 'translateY(6px) rotate(-45deg)' : undefined , } , 'div:nth-child(2)' : { opacity : open ? 0 : undefined , transform : open ? 'scale(0, 1)' : undefined , } , 'div:nth-child(3)' : { transform : open ? 'translateY(-6px) rotate(45deg)' : undefined , } , [ media [ QueryKeys . DESKTOP ] ] : { display : 'none' , } , zIndex : 2 , } ) ; const filterMenuOpenButtonProps = ( props ) => filterProps ( props , [ 'open' ] ) ; export const MenuOpenButton = ( props ) => ( < div css = { theme => menuOpenButtonStyle ( theme , props ) } { ... filterMenuOpenButtonProps ( props ) } > < div /> < div / > < div /> < /div>);