diff options
| -rw-r--r-- | src/components/Header/Header.js | 29 |
1 files changed, 22 insertions, 7 deletions
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 26ba45c..1479636 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -1,4 +1,5 @@ import React from "react"; + import { AppBar, Tabs, @@ -6,16 +7,19 @@ import { Typography, Toolbar, } from "@material-ui/core"; + import { makeStyles } from '@material-ui/core/styles'; +import TimerIcon from '@material-ui/icons/Timer'; +import AccountCircleIcon from '@material-ui/icons/AccountCircle'; +import AssignmentIcon from '@material-ui/icons/Assignment'; +import GitHubIcon from '@material-ui/icons/GitHub'; + const useStyles = makeStyles(theme => ({ logo: { color: theme.palette.secondary.main, margin: theme.spacing(0, 2, 0, 3) }, - tab: { - padding: theme.spacing(3, 0, 3, 0) - }, })); @@ -26,15 +30,26 @@ const Header = ({ page, setPage }) => { setPage(newPage); }; - const menuItems = ['app', 'profile', 'scoreboard', 'news']; + const icons = { + app: (<TimerIcon />), + profile: (<AccountCircleIcon />), + scoreboard: (<AssignmentIcon />), + contribute: (<GitHubIcon />), + }; return ( - <AppBar position="sticky" className={classes.header}> + <AppBar position="sticky"> <Toolbar> <Typography variant="h4" className={classes.logo}> ChronoCube </Typography> <Tabs onChange={handleChange} value={page}> - { menuItems.map(menuItem => ( - <Tab label={menuItem} value={menuItem} key={menuItem} className={classes.tab}/> + { Object.keys(icons).map(item => ( + <Tab + className={classes.tab} + label={item} + icon={icons[item]} + value={item} + key={item} + /> ))} </Tabs> </Toolbar> |