updated navigation structure

src/App.css

@@ -3,10 +3,11 @@ body {
 }
 
 .report-google-map-container > div {
-    height: 92% !important;
     width: 50% !important;
 }
 
+@media (min-width: 960px) {
     .sighting-google-map-container > div {
-    height: 92% !important;
+        width: calc(100% - 241px) !important;
+    }
 }

src/components/Main.js

@@ -1,75 +1,173 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
+import Toolbar from '@material-ui/core/Toolbar';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
 import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import Hidden from '@material-ui/core/Hidden';
+import Divider from '@material-ui/core/Divider';
+import MenuIcon from '@material-ui/icons/Menu';
+import HomeIcon from '@material-ui/icons/Home';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+import MapIcon from '@material-ui/icons/Map';
+import ListIcon from '@material-ui/icons/List';
+import SlideshowIcon from '@material-ui/icons/Slideshow';
 import Home from '../pages/Home';
 import ViewMap from '../pages/ViewMap';
 import Quiz from '../pages/Quiz';
 import SightingList from '../pages/SightingList';
 import Report from '../pages/Report';
-import Info from '../pages/Info';
 
-function TabContainer(props) {
-    return (
-        <Typography component="div" style={{ padding: 8 * 3 }}>
-            {props.children}
-        </Typography>
-    );
-}
-
-TabContainer.propTypes = {
-    children: PropTypes.node.isRequired,
-};
+const drawerWidth = 240;
 
 const styles = theme => ({
     root: {
         flexGrow: 1,
-        backgroundColor: theme.palette.background.paper,
+        height: '100vh',
+        zIndex: 1,
+        overflow: 'hidden',
+        position: 'relative',
+        display: 'flex',
+        width: '100%',
+    },
+    appBar: {
+        position: 'absolute',
+        marginLeft: drawerWidth,
+        [theme.breakpoints.up('md')]: {
+            width: `calc(100% - ${drawerWidth}px)`,
+        },
+    },
+    navIconHide: {
+        [theme.breakpoints.up('md')]: {
+            display: 'none',
+        },
+    },
+    toolbar: theme.mixins.toolbar,
+    drawerPaper: {
+        width: drawerWidth,
+        [theme.breakpoints.up('md')]: {
+            position: 'relative',
+        },
+    },
+    content: {
+        flexGrow: 1,
+        backgroundColor: theme.palette.background.default,
+        padding: theme.spacing.unit * 3,
     },
 });
 
-class SimpleTabs extends React.Component {
+class ResponsiveDrawer extends React.Component {
     state = {
-        value: 0,
-    };
+        mobileOpen: false,
+        key: ''
+    }
 
-    handleChange = (event, value) => {
-        this.setState({ value });
-    };
+    handleDrawerToggle = () => {
+        this.setState(state => ({ mobileOpen: !state.mobileOpen }));
+    }
+
+    nav = (text) => {
+        this.setState({
+            key: text
+        })
+    }
 
     render() {
-        const { classes } = this.props;
-        const { value } = this.state;
+        const { classes, theme } = this.props;
+
+        const drawer = (
+            <div>
+                <div className={classes.toolbar} />
+                <Divider />
+                <List>
+                    <ListItem button key='Home' onClick={() => this.nav('Home')}>
+                        <ListItemIcon><HomeIcon/></ListItemIcon>
+                        <ListItemText primary='Home' />
+                    </ListItem>
+                    <ListItem button key='Report' onClick={() => this.nav('Report')}>
+                        <ListItemIcon><AssignmentIcon/></ListItemIcon>
+                        <ListItemText primary='Report' />
+                    </ListItem>
+                    <ListItem button key='Map' onClick={() => this.nav('Map')}>
+                        <ListItemIcon><MapIcon/></ListItemIcon>
+                        <ListItemText primary='Map' />
+                    </ListItem>
+                    <ListItem button key='List' onClick={() => this.nav('List')}>
+                        <ListItemIcon><ListIcon/></ListItemIcon>
+                        <ListItemText primary='List' />
+                    </ListItem>
+                    <ListItem button key='Quiz' onClick={() => this.nav('Quiz')}>
+                        <ListItemIcon><SlideshowIcon/></ListItemIcon>
+                        <ListItemText primary='Quiz' />
+                    </ListItem>
+                </List>
+            </div>
+        );
 
         return (
             <div className={classes.root}>
-        <AppBar position="static">
-            <Tabs value={value} onChange={this.handleChange} centered>
-                <Tab label="Home" />
-                <Tab label="Report a Sighting"/>
-                <Tab label="Sightings" />
-                <Tab label="Trail-Cam Quiz" />
-                <Tab label="View Map" />
-                <Tab label="Marten Info" />
-            </Tabs>
+                <AppBar className={classes.appBar}>
+                    <Toolbar>
+                        <IconButton
+                            color="inherit"
+                            aria-label="Open drawer"
+                            onClick={this.handleDrawerToggle}
+                            className={classes.navIconHide}
+                        >
+                            <MenuIcon />
+                        </IconButton>
+                        <Typography variant='title' color="inherit" noWrap>
+                            The American Marten
+                        </Typography>
+                    </Toolbar>
                 </AppBar>
-        {value === 0 && <Home/>}
-        {value === 1 && <Report/>}
-        {value === 2 && <SightingList/>}
-        {value === 3 && <Quiz/>}
-        {value === 4 && <ViewMap/>}
-        {value === 5 && <Info/>}
+                <Hidden mdUp>
+                    <Drawer
+                        variant="temporary"
+                        anchor={theme.direction === 'rtl' ? 'right' : 'left'}
+                        open={this.state.mobileOpen}
+                        onClose={this.handleDrawerToggle}
+                        classes={{
+                            paper: classes.drawerPaper,
+                        }}
+                        ModalProps={{
+                            keepMounted: true, // Better open performance on mobile.
+                        }}
+                    >
+                        {drawer}
+                    </Drawer>
+                </Hidden>
+                <Hidden smDown implementation="css">
+                    <Drawer
+                        variant="permanent"
+                        open
+                        classes={{
+                            paper: classes.drawerPaper,
+                        }}
+                    >
+                        {drawer}
+                    </Drawer>
+                </Hidden>
+                    <div className={classes.toolbar} />
+                    {this.state.key === 'Home' && <Home />}
+                    {this.state.key === 'Report' && <Report />}
+                    {this.state.key === 'Map' && <ViewMap />}
+                    {this.state.key === 'List' && <SightingList />}
+                    {this.state.key === 'Quiz' && <Quiz />}
             </div>
         );
     }
 }
 
-SimpleTabs.propTypes = {
+ResponsiveDrawer.propTypes = {
     classes: PropTypes.object.isRequired,
+    theme: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(SimpleTabs);
-
+export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);

src/components/ReportForm.js

@@ -17,6 +17,7 @@ const styles = theme => ({
   container: {
     display: 'flex',
     flexWrap: 'wrap',
+    marginTop: '64px'
   },
   textField: {
     marginLeft: theme.spacing.unit * 2,