Header logo (#133)

* Display project icon in the top of application menu bar

Co-authored-by: kasedy <kasedy@gmail.com>
This commit is contained in:
rjwats 2020-05-26 20:46:20 +01:00 committed by GitHub
parent 1e05546ecb
commit d9ae0f5cf9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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 />