jsx import { CSSObject , jsx } from '@emotion/core' ; import type { TextProps } from '../../Text' ; import { filterProps } from '../../util' ; import { contentStyle } from '../Content' ; export interface MenuContentProps < T = HTMLDivElement > extends TextProps < T > { open ? : boolean ; } export const menuContentStyle = props => ( { ... contentStyle ( props ) , alignItems : 'center' , display : 'grid' , gridColumnGap : '8px' , gridTemplateColumns : '1fr auto 1fr' , height : '64px' , justifyContent : 'space-between' , left : props . open ? 0 : undefined , position : props . open ? 'fixed' : undefined , width : props . open ? '100%' : undefined , zIndex : props . open ? 10000 : undefined , } ) ; const filterMenuContentProps = ( props ) => filterProps ( props , [ 'open' ] ) ; export const MenuContent = ( props ) => ( < div css = { menuContentStyle ( props ) } { ... filterMenuContentProps ( props ) } />);