jsx import { jsx } from '@emotion/core' ; import React from 'react' ; import { useState } from 'react' ; import { MenuContent } from './MenuContent' ; import { MenuItems } from './MenuItems' ; import { MenuOpenButton } from './MenuOpenButton' ; import { MenuScrollableItems } from './MenuScrollableItems' ; export interface HeaderMenuProps < T = HTMLDivElement > extends React . HTMLProps < T > { centerElement ? : React . ReactNode ; logoElement ? : React . ReactNode ; } export const HeaderMenu = ( { children , logoElement = null , centerElement = null , ... props } ) => { const [ isOpen , setIsOpen ] = useState ( false ) ; const toggleMenu = ( ) => { if ( typeof window !== 'undefined' ) { window . scrollTo ( 0 , 0 ) ; setIsOpen ( current => ! current ) ; } } ; const closeMenu = ( ) => setIsOpen ( false ) ; return ( < div css = { { height : '64px' } } { ... props } data - uie - name = "element-header-menu" > < MenuContent open = { isOpen } > < div css = { { alignSelf : 'center' , display : 'flex' , zIndex : 2 } } onClick = { closeMenu } > { logoElement } < /div> < div css = { { alignSelf : 'center' , display : 'flex' } } > { centerElement } < /div> < MenuOpenButton onClick = { toggleMenu } open = { isOpen } style = { { justifySelf : 'end' , position : isOpen ? 'fixed' : undefined , right : '16px' , top : '21px' } } data - uie - name = "do-toggle-header-menu" / > < MenuItems onClick = { closeMenu } open = { isOpen } > < MenuScrollableItems > { children } < /MenuScrollableItems> < /MenuItems> < /MenuContent> < /div>); } ;