Header logo (#133)

* Display project icon in the top of application menu bar

Co-authored-by: kasedy <[email protected]>

Author: rjwats

interface/src/components/MenuAppBar.tsx

@@ -1,7 +1,7 @@
 import React, { RefObject } from 'react';
 import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 
-import { Drawer, AppBar, Toolbar, Avatar, Divider, Button, IconButton } from '@material-ui/core';
+import { Drawer, AppBar, Toolbar, Avatar, Divider, Button, Box, IconButton } from '@material-ui/core';
 import { ClickAwayListener, Popper, Hidden, Typography } from '@material-ui/core';
 import { List, ListItem, ListItemIcon, ListItemText, ListItemAvatar } from '@material-ui/core';
 import { Card, CardContent, CardActions } from '@material-ui/core';
@@ -42,6 +42,16 @@ const styles = (theme: Theme) => createStyles({
       width: `calc(100% - ${drawerWidth}px)`,
     },
   },
+  toolbarImage: {
+    [theme.breakpoints.up('xs')]: {
+      height: 24,
+      marginRight: theme.spacing(2)
+    },
+    [theme.breakpoints.up('sm')]: {
+      height: 36,
+      marginRight: theme.spacing(3)
+    },
+  },
   menuButton: {
     marginRight: theme.spacing(2),
     [theme.breakpoints.up('md')]: {
@@ -64,7 +74,7 @@ const styles = (theme: Theme) => createStyles({
     "& > * + *": {
       marginLeft: theme.spacing(2),
     }
-  }
+  },
 });
 
 interface MenuAppBarState {
@@ -110,6 +120,9 @@ class MenuAppBar extends React.Component<MenuAppBarProps, MenuAppBarState> {
     const drawer = (
       <div>
         <Toolbar>
+          <Box display="flex">
+            <img src="/app/icon.png" className={classes.toolbarImage} alt={PROJECT_NAME} />
+          </Box>
           <Typography variant="h6" color="textPrimary">
             {PROJECT_NAME}
           </Typography>
@@ -142,7 +155,7 @@ class MenuAppBar extends React.Component<MenuAppBarProps, MenuAppBarState> {
               <DeviceHubIcon />
             </ListItemIcon>
             <ListItemText primary="MQTT" />
-          </ListItem>          
+          </ListItem>
           <ListItem to='/security/' selected={path.startsWith('/security/')} button component={Link} disabled={!authenticatedContext.me.admin}>
             <ListItemIcon>
               <LockIcon />