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  appBar: {
19    backgroundColor: theme.palette.primary.dark,
20    color: theme.palette.primary.contrastText,
21  },
22  appTitle: {
23    ...theme.typography.h6,
24    color: theme.palette.primary.contrastText,
25    textDecoration: 'none',
26    display: 'flex',
27    alignItems: 'center',
28  },
29  lightSwitch: {
30    padding: '0 20px',
31  },
32  logo: {
33    height: '42px',
34    marginRight: theme.spacing(2),
35  },
36}));
37
38function Header() {
39  const classes = useStyles();
40
41  return (
42    <>
43      <AppBar position="fixed" className={classes.appBar}>
44        <Toolbar>
45          <Link to="/" className={classes.appTitle}>
46            <img src="/logo.svg" className={classes.logo} alt="git-bug" />
47            git-bug
48          </Link>
49          <div className={classes.filler}></div>
50          <div className={classes.lightSwitch}>
51            <LightSwitch />
52          </div>
53          <CurrentIdentity />
54        </Toolbar>
55      </AppBar>
56      <div className={classes.offset} />
57    </>
58  );
59}
60
61export default Header;