import { EuiHeaderSectionItem } from '@elastic/eui' ; import React from 'react' ; import useObservable from 'react-use/lib/useObservable' ; import { Observable } from 'rxjs' ; import { ChromeNavControl } from '../../nav_controls' ; import { HeaderExtension } from './header_extension' ; interface Props { navControls$ : Observable < readonly ChromeNavControl [ ] > ; side ? : 'left' | 'right' ; } export function HeaderNavControls ( { navControls$ , side } ) { const navControls = useObservable ( navControls$ , [ ] ) ; if ( ! navControls ) { return null ; } return ( < > { navControls . map ( ( navControl , index ) => ( < EuiHeaderSectionItem key = { index } border = { side ? ( side === 'left' ? 'right' : 'left' ) : 'none' } > < HeaderExtension extension = { navControl . mount } / > < /EuiHeaderSectionItem>))} < />); }