import React from 'react' ; import { EuiPageSideBar , EuiSideNav } from '@elastic/eui' ; import { useHistory } from 'react-router-dom' ; import { routes } from '../../../routes' ; interface SidebarProps { } export const Sidebar = ( ) => { const history = useHistory ( ) ; return ( < EuiPageSideBar > < EuiSideNav items = { [ { name : 'bfetch explorer' , id : 'home' , items : routes . map ( ( { id , title , items } ) => ( { id , name : title , isSelected : true , items : items . map ( ( route ) => ( { id : route . id , name : route . title , onClick : ( ) => history . push ( `/${ route . id }` ) , 'data-test-subj' : route . id , } ) ) , } ) ) , } , ] } / > < /EuiPageSideBar>); } ;