import React from 'react' ; import { NavLink } from 'react-router-dom' ; import { Flex , ButtonPrimary } from 'design' ; import { MenuIcon , MenuItem , MenuItemIcon } from 'shared/components/MenuAction' ; import * as Icons from 'design/Icon' ; import cfg from 'teleport/config' ; export default function ActionBar ( { onLogout } ) { return ( < Flex alignItems = "center" > < MenuIcon buttonIconProps = { { mr : 2 , ml : 2 , size : 0 , style : { fontSize : '16px' } } } menuProps = { menuProps } > < MenuItem as = { NavLink } to = { cfg . routes . root } > < MenuItemIcon as = { Icons . Home } mr = "2" / > Home < /MenuItem> < MenuItem > < ButtonPrimary my = { 3 } block onClick = { onLogout } > Sign Out < /ButtonPrimary> < /MenuItem> < /MenuIcon> < /Flex>); } type Props = { onLogout ( ) : void ; } ; const menuListCss = ( ) => `
  width: 250px;
` ; const menuProps = { menuListCss , } as const ;