1import React from 'react';
 2import { Link } from 'react-router-dom';
 3
 4import AppBar from '@material-ui/core/AppBar';
 5import Toolbar from '@material-ui/core/Toolbar';
 6import { makeStyles } from '@material-ui/core/styles';
 7
 8import CurrentIdentity from './CurrentIdentity';
 9
10const useStyles = makeStyles(theme => ({
11  offset: {
12    ...theme.mixins.toolbar,
13  },
14  filler: {
15    flexGrow: 1,
16  },
17  appTitle: {
18    ...theme.typography.h6,
19    color: 'white',
20    textDecoration: 'none',
21    display: 'flex',
22    alignItems: 'center',
23  },
24  logo: {
25    height: '42px',
26    marginRight: theme.spacing(2),
27  },
28}));
29
30function Header() {
31  const classes = useStyles();
32
33  return (
34    <>
35      <AppBar position="fixed" color="primary">
36        <Toolbar>
37          <Link to="/" className={classes.appTitle}>
38            <img src="/logo.svg" className={classes.logo} alt="git-bug" />
39            git-bug
40          </Link>
41          <div className={classes.filler}></div>
42          <CurrentIdentity />
43        </Toolbar>
44      </AppBar>
45      <div className={classes.offset} />
46    </>
47  );
48}
49
50export default Header;