1import React from 'react';
  2import { Link } from 'react-router-dom';
  3
  4import AppBar from '@material-ui/core/AppBar';
  5import Tab from '@material-ui/core/Tab';
  6import Tabs from '@material-ui/core/Tabs';
  7import Toolbar from '@material-ui/core/Toolbar';
  8import { makeStyles } from '@material-ui/core/styles';
  9
 10import { LightSwitch } from '../../components/Themer';
 11import CurrentIdentity from '../CurrentIdentity/CurrentIdentity';
 12
 13const useStyles = makeStyles((theme) => ({
 14  offset: {
 15    ...theme.mixins.toolbar,
 16  },
 17  filler: {
 18    flexGrow: 1,
 19  },
 20  appBar: {
 21    backgroundColor: theme.palette.primary.dark,
 22    color: theme.palette.primary.contrastText,
 23  },
 24  appTitle: {
 25    ...theme.typography.h6,
 26    color: theme.palette.primary.contrastText,
 27    textDecoration: 'none',
 28    display: 'flex',
 29    alignItems: 'center',
 30  },
 31  lightSwitch: {
 32    padding: '0 20px',
 33  },
 34  logo: {
 35    height: '42px',
 36    marginRight: theme.spacing(2),
 37  },
 38}));
 39
 40function a11yProps(index: any) {
 41  return {
 42    id: `nav-tab-${index}`,
 43    'aria-controls': `nav-tabpanel-${index}`,
 44  };
 45}
 46
 47function NavTabs() {
 48  const [value, setValue] = React.useState(0);
 49
 50  //TODO page refresh resets state. Must parse url to determine which tab is
 51  //highlighted
 52  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
 53    setValue(newValue);
 54  };
 55
 56
 57  return (
 58    <Tabs
 59      variant="fullWidth"
 60      value={value}
 61      onChange={handleChange}
 62      aria-label="nav tabs example"
 63    >
 64      <Tab label="Code" component="a" href="/code" {...a11yProps(0)} />
 65      <Tab label="Bugs" component="a" href="/" {...a11yProps(1)} />
 66      <Tab
 67        label="Pull Requests"
 68        component="a"
 69        href="/pulls"
 70        {...a11yProps(2)}
 71      />
 72      <Tab label="Projects" component="a" href="/projects" {...a11yProps(3)} />
 73      <Tab label="Wiki" component="a" href="/wiki" {...a11yProps(4)} />
 74      <Tab label="Settings" component="a" href="/settings" {...a11yProps(5)} />
 75    </Tabs>
 76  );
 77}
 78
 79function Header() {
 80  const classes = useStyles();
 81
 82  return (
 83    <>
 84      <AppBar position="fixed" className={classes.appBar}>
 85        <Toolbar>
 86          <Link to="/" className={classes.appTitle}>
 87            <img src="/logo.svg" className={classes.logo} alt="git-bug" />
 88            git-bug
 89          </Link>
 90          <div className={classes.filler} />
 91          <div className={classes.lightSwitch}>
 92            <LightSwitch />
 93          </div>
 94          <CurrentIdentity />
 95        </Toolbar>
 96      </AppBar>
 97      <div className={classes.offset} />
 98      <NavTabs />
 99    </>
100  );
101}
102
103export default Header;