1import React from 'react';
2import { Link, useLocation } from 'react-router-dom';
3
4import AppBar from '@material-ui/core/AppBar';
5import Tab, { TabProps } from '@material-ui/core/Tab';
6import Tabs from '@material-ui/core/Tabs';
7import Toolbar from '@material-ui/core/Toolbar';
8import Tooltip from '@material-ui/core/Tooltip/Tooltip';
9import { makeStyles } from '@material-ui/core/styles';
10
11import CurrentIdentity from '../Identity/CurrentIdentity';
12import { LightSwitch } from '../Themer';
13
14const useStyles = makeStyles((theme) => ({
15 offset: {
16 ...theme.mixins.toolbar,
17 },
18 filler: {
19 flexGrow: 1,
20 },
21 appBar: {
22 backgroundColor: theme.palette.primary.dark,
23 color: theme.palette.primary.contrastText,
24 },
25 appTitle: {
26 ...theme.typography.h6,
27 color: theme.palette.primary.contrastText,
28 textDecoration: 'none',
29 display: 'flex',
30 alignItems: 'center',
31 },
32 lightSwitch: {
33 padding: '0 20px',
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 <div className={classes.lightSwitch}>
89 <LightSwitch />
90 </div>
91 <CurrentIdentity />
92 </Toolbar>
93 </AppBar>
94 <div className={classes.offset} />
95 <Tabs centered value={highlightTab()} aria-label="nav tabs">
96 <DisabledTabWithTooltip label="Code" value="/code" {...a11yProps(1)} />
97 <Tab label="Bugs" value="/" component={Link} to="/" {...a11yProps(2)} />
98 <DisabledTabWithTooltip
99 label="Pull Requests"
100 value="/pulls"
101 {...a11yProps(3)}
102 />
103 <DisabledTabWithTooltip
104 label="Settings"
105 value="/settings"
106 {...a11yProps(4)}
107 />
108 </Tabs>
109 </>
110 );
111}
112
113export default Header;