1import AppBar from '@mui/material/AppBar';
 2import Toolbar from '@mui/material/Toolbar';
 3import { alpha } from '@mui/material/styles';
 4import makeStyles from '@mui/styles/makeStyles';
 5import { Link } from 'react-router';
 6
 7import CurrentIdentity from '../Identity/CurrentIdentity';
 8import CurrentRepository from '../Identity/CurrentRepository';
 9import { LightSwitch } from '../Themer';
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    marginRight: theme.spacing(2),
31    color: alpha(theme.palette.primary.contrastText, 0.5),
32  },
33  logo: {
34    height: '42px',
35    marginRight: theme.spacing(2),
36  },
37}));
38
39function Header() {
40  const classes = useStyles();
41
42  return (
43    <>
44      <AppBar position="fixed" className={classes.appBar}>
45        <Toolbar>
46          <Link to="/" className={classes.appTitle}>
47            <img src="/logo.svg" className={classes.logo} alt="git-bug logo" />
48            <CurrentRepository default="git-bug" />
49          </Link>
50          <div className={classes.filler} />
51          <LightSwitch className={classes.lightSwitch} />
52          <CurrentIdentity />
53        </Toolbar>
54      </AppBar>
55      <div className={classes.offset}></div>
56    </>
57  );
58}
59
60export default Header;