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  greenButton: {
33    backgroundColor: '#2ea44fd9',
34    color: '#fff',
35    '&:hover': {
36      backgroundColor: '#2ea44f',
37    },
38  },
39}));
40
41function Header() {
42  const classes = useStyles();
43
44  return (
45    <>
46      <AppBar position="fixed" color="primary">
47        <Toolbar>
48          <Link to="/" className={classes.appTitle}>
49            <img src="/logo.svg" className={classes.logo} alt="git-bug" />
50            git-bug
51          </Link>
52          <div className={classes.filler}></div>
53          <div className={classes.lightSwitch}>
54            <LightSwitch />
55          </div>
56          <CurrentIdentity />
57        </Toolbar>
58      </AppBar>
59      <div className={classes.offset} />
60    </>
61  );
62}
63
64export default Header;