diff options
| -rw-r--r-- | src/components/Header/Header.js | 20 |
1 files changed, 13 insertions, 7 deletions
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 9c286f7..26ba45c 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -3,14 +3,18 @@ import { AppBar, Tabs, Tab, - Typography + Typography, + Toolbar, } from "@material-ui/core"; import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles(theme => ({ logo: { color: theme.palette.secondary.main, - margin: theme.spacing(2, 3, 2, 2) + margin: theme.spacing(0, 2, 0, 3) + }, + tab: { + padding: theme.spacing(3, 0, 3, 0) }, })); @@ -26,12 +30,14 @@ const Header = ({ page, setPage }) => { return ( <AppBar position="sticky" className={classes.header}> - <Tabs onChange={handleChange} value={page}> + <Toolbar> <Typography variant="h4" className={classes.logo}> ChronoCube </Typography> - { menuItems.map(menuItem => ( - <Tab label={menuItem} value={menuItem}/> - ))} - </Tabs> + <Tabs onChange={handleChange} value={page}> + { menuItems.map(menuItem => ( + <Tab label={menuItem} value={menuItem} key={menuItem} className={classes.tab}/> + ))} + </Tabs> + </Toolbar> </AppBar> ); }; |