1import AppBar from '@mui/material/AppBar';
  2import Tab, { TabProps } from '@mui/material/Tab';
  3import Tabs from '@mui/material/Tabs';
  4import Toolbar from '@mui/material/Toolbar';
  5import Tooltip from '@mui/material/Tooltip/Tooltip';
  6import { alpha } from '@mui/material/styles';
  7import makeStyles from '@mui/styles/makeStyles';
  8import { Link, useLocation } from 'react-router-dom';
  9
 10import CurrentIdentity from '../Identity/CurrentIdentity';
 11import { LightSwitch } from '../Themer';
 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    marginRight: '20px',
 33    color: alpha(theme.palette.primary.contrastText, 0.5),
 34  },
 35  logo: {
 36    height: '42px',
 37    marginRight: theme.spacing(2),
 38  },
 39}));
 40
 41function a11yProps(index: any) {
 42  return {
 43    id: `nav-tab-${index}`,
 44    'aria-controls': `nav-tabpanel-${index}`,
 45  };
 46}
 47
 48const DisabledTabWithTooltip = (props: TabProps) => {
 49  /*The span elements around disabled tabs are needed, as the tooltip
 50   * won't be triggered by disabled elements.
 51   * See: https://material-ui.com/components/tooltips/#disabled-elements
 52   * This must be done in a wrapper component, otherwise the TabS component
 53   * cannot pass it styles down to the Tab component. Resulting in (console)
 54   * warnings. This wrapper acceps the passed down TabProps and pass it around
 55   * the span element to the Tab component.
 56   */
 57  const msg = `This feature doesn't exist yet. Come help us build it.`;
 58  return (
 59    <Tooltip title={msg}>
 60      <span>
 61        <Tab disabled {...props} />
 62      </span>
 63    </Tooltip>
 64  );
 65};
 66
 67function Header() {
 68  const classes = useStyles();
 69  const location = useLocation();
 70
 71  // Prevents error of invalid tab selection in <Tabs>
 72  // Will return a valid tab path or false if path is unkown.
 73  function highlightTab() {
 74    const validTabs = ['/', '/code', '/pulls', '/settings'];
 75    const tab = validTabs.find((tabPath) => tabPath === location.pathname);
 76    return tab === undefined ? false : tab;
 77  }
 78
 79  return (
 80    <>
 81      <AppBar position="fixed" className={classes.appBar}>
 82        <Toolbar>
 83          <Link to="/" className={classes.appTitle}>
 84            <img src="/logo.svg" className={classes.logo} alt="git-bug logo" />
 85            git-bug
 86          </Link>
 87          <div className={classes.filler} />
 88          <LightSwitch className={classes.lightSwitch} />
 89          <CurrentIdentity />
 90        </Toolbar>
 91      </AppBar>
 92      <div className={classes.offset} />
 93      <Tabs centered value={highlightTab()} aria-label="nav tabs">
 94        <DisabledTabWithTooltip label="Code" value="/code" {...a11yProps(1)} />
 95        <Tab label="Bugs" value="/" component={Link} to="/" {...a11yProps(2)} />
 96        <DisabledTabWithTooltip
 97          label="Pull Requests"
 98          value="/pulls"
 99          {...a11yProps(3)}
100        />
101        <DisabledTabWithTooltip
102          label="Settings"
103          value="/settings"
104          {...a11yProps(4)}
105        />
106      </Tabs>
107    </>
108  );
109}
110
111export default Header;