jsx import React from 'react' ; import { CSSObject , jsx } from '@emotion/core' ; import { QueryKeys , media } from '../../mediaQueries' ; import { filterProps } from '../../util' ; import type { Theme } from '../Theme' ; export interface MenuItemsProps < T = HTMLDivElement > extends React . HTMLProps < T > { open ? : boolean ; } export const menuItemsStyle = ( theme , props ) => ( { alignSelf : 'center' , display : 'flex' , justifySelf : 'end' , [ media [ QueryKeys . TABLET_DOWN ] ] : { backgroundColor : theme . general . backgroundColor , bottom : 0 , left : 0 , overflowY : 'auto' , position : 'fixed' , right : 0 , top : 0 , transform : props . open ? 'translateX(0)' : 'translateX(110%)' , transition : 'transform 0.25s ease' , zIndex : 1 , } , } ) ; const filterMenuItemProps = ( props ) => filterProps ( props , [ 'open' ] ) ; export const MenuItems = ( props ) => ( < div css = { theme => menuItemsStyle ( theme , props ) } { ... filterMenuItemProps ( props ) } />);