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 { LightSwitch } from '../../components/Themer';
 9import CurrentIdentity from '../CurrentIdentity/CurrentIdentity';
10
11const useStyles = makeStyles((theme) => ({
12  offset: {
13    ...theme.mixins.toolbar,
14  },
15  filler: {
16    flexGrow: 1,
17  },
18  appTitle: {
19    ...theme.typography.h6,
20    color: 'white',
21    textDecoration: 'none',
22    display: 'flex',
23    alignItems: 'center',
24  },
25  lightSwitch: {
26    padding: '0 20px',
27  },
28  logo: {
29    height: '42px',
30    marginRight: theme.spacing(2),
31  },
32}));
33
34function Header() {
35  const classes = useStyles();
36
37  return (
38    <>
39      <AppBar position="fixed" color="primary">
40        <Toolbar>
41          <Link to="/" className={classes.appTitle}>
42            <img src="/logo.svg" className={classes.logo} alt="git-bug" />
43            git-bug
44          </Link>
45          <div className={classes.filler}></div>
46          <div className={classes.lightSwitch}>
47            <LightSwitch />
48          </div>
49          <CurrentIdentity />
50        </Toolbar>
51      </AppBar>
52      <div className={classes.offset} />
53    </>
54  );
55}
56
57export default Header;