Add header to enable drawer.

Author: Bart Hazen

src/components/Header/index.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import AppBar from '@material-ui/core/AppBar';
+import Grid from '@material-ui/core/Grid';
+import Hidden from '@material-ui/core/Hidden';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import Toolbar from '@material-ui/core/Toolbar';
+import { withStyles } from '@material-ui/core/styles';
+
+const lightColor = 'rgba(255, 255, 255, 0.7)';
+
+const styles = (theme) => ({
+  secondaryBar: {
+    zIndex: 0,
+  },
+  menuButton: {
+    marginLeft: -theme.spacing(1),
+  },
+  iconButtonAvatar: {
+    padding: 4,
+  },
+  link: {
+    textDecoration: 'none',
+    color: lightColor,
+    '&:hover': {
+      color: theme.palette.common.white,
+    },
+  },
+  button: {
+    borderColor: lightColor,
+  },
+});
+
+function Header(props) {
+  const { classes, onDrawerToggle } = props;
+
+  return (
+    <React.Fragment>
+      <AppBar color="primary" position="sticky" elevation={0}>
+        <Toolbar>
+          <Grid container spacing={1} alignItems="center">
+            <Hidden smUp>
+              <Grid item>
+                <IconButton
+                  color="inherit"
+                  aria-label="open drawer"
+                  onClick={onDrawerToggle}
+                  className={classes.menuButton}
+                >
+                  <MenuIcon />
+                </IconButton>
+              </Grid>
+            </Hidden>
+          </Grid>
+        </Toolbar>
+      </AppBar>
+    </React.Fragment>
+  );
+}
+
+Header.propTypes = {
+  classes: PropTypes.object.isRequired,
+  onDrawerToggle: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(Header);

src/pages/Homepage/index.js

@@ -3,6 +3,7 @@ import ReactMarkdown from 'react-markdown'
 
 import { Paper } from "@material-ui/core";
 import markdownSource from "pages/Homepage/Homepage.md"
+import Header from "components/Header";
 
 export default class Homepage extends React.Component {
   constructor(props) {
@@ -11,7 +12,7 @@ export default class Homepage extends React.Component {
     this.state = { markdown: null }
   }
 
-  componentWillMount() {
+  componentDidMount() {
     fetch(markdownSource).then((response) => response.text()).then((text) => {
       this.setState({ markdown: text })
     })
@@ -20,6 +21,7 @@ export default class Homepage extends React.Component {
   render() {
     return (
       <React.Fragment>
+        <Header onDrawerToggle={this.props.handleDrawerToggle} />
         <main className={this.props.classes.main}>
           <Paper className={this.props.classes.paper}>
             <div className={this.props.classes.contentWrapper}>