import React from 'react' ; import 'typeface-roboto' ; import makeStyles from '@material-ui/core/styles/makeStyles' ; import AppBar from '@material-ui/core/AppBar' ; import IconButton from '@material-ui/core/IconButton' ; import Toolbar from '@material-ui/core/Toolbar' ; import Typography from '@material-ui/core/Typography' ; import MenuIcon from '@material-ui/icons/Menu' ; import AccountCircle from '@material-ui/icons/AccountCircle' ; import MenuItem from '@material-ui/core/MenuItem' ; import Menu from '@material-ui/core/Menu' ; import { version } from '../../../package.json' ; interface IProps { title : string ; drawerWidth : number ; handleDrawerToggle : ( ) => void ; signOut : ( ) => void ; } const useStyles = makeStyles ( theme => ( { appBar : ( drawerWidth ) => ( { marginLeft : drawerWidth , [ theme . breakpoints . up ( 'sm' ) ] : { width : `calc(100% - ${ drawerWidth }px)` , } , } ) , rightSection : { display : 'flex' , alignItems : 'center' , } , menuButton : { marginRight : theme . spacing ( 2 ) , [ theme . breakpoints . up ( 'sm' ) ] : { display : 'none' , } , } , grow : { flexGrow : 1 , } , } ) ) ; const TitleBar = ( { title , drawerWidth , handleDrawerToggle , signOut } ) => { const classes = useStyles ( drawerWidth ) ; const [ anchorEl , setAnchorEl ] = React . useState < null | HTMLElement > ( null ) ; const open = Boolean ( anchorEl ) ; function handleMenu ( event ) { setAnchorEl ( event . currentTarget ) ; } function handleClose ( ) { setAnchorEl ( null ) ; } function handleSignOut ( ) { handleClose ( ) ; signOut ( ) ; } return ( < AppBar position = "fixed" className = { classes . appBar } > < Toolbar > < IconButton color = "inherit" aria - label = "Open drawer" edge = "start" onClick = { handleDrawerToggle } className = { classes . menuButton } href = "#" > < MenuIcon /> < /IconButton> < Typography variant = "h6" noWrap > { title } < /Typography> < div className = { classes . grow } / > < div className = { classes . rightSection } > < Typography variant = "body2" noWrap > App Version : { version } < /Typography> < IconButton aria - label = "Account of current user" aria - controls = "menu-appbar" aria - haspopup = "true" onClick = { handleMenu } color = "inherit" > < AccountCircle /> < /IconButton> < Menu id = "menu-appbar" anchorEl = { anchorEl } anchorOrigin = { { vertical : 'top' , horizontal : 'right' , } } keepMounted transformOrigin = { { vertical : 'top' , horizontal : 'right' , } } open = { open } onClose = { handleClose } > < MenuItem data - test - id = "menu-sign-out" onClick = { handleSignOut } > Sign Out < /MenuItem> < /Menu> < /div> < /Toolbar> < /AppBar>); } ; export default TitleBar ;