rewrote structure for new nav

src/App.css

@@ -2,15 +2,6 @@ body {
     margin: 0;
 }
 
-/* #root > div > div {
-    overflow: scroll !important;
-} */
-
-div[class="ResponsiveDrawer-root-1"] {
-    overflow: scroll !important;
-    overflow-x: hidden !important;
-}
-
 @media (min-width: 960px) {
     .sighting-google-map-container > div {
         width: calc(100% - 241px) !important;

src/components/Main.js

@@ -20,58 +20,65 @@ 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 QuizPage from '../pages/QuizPage';
+import Quiz from '../pages/QuizPage';
 import SightingList from '../pages/SightingList';
 import Report from '../pages/Report';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import Collapse from '@material-ui/core/Collapse';
 
 const drawerWidth = 240;
 
 const styles = theme => ({
     root: {
-        flexGrow: 1,
-        height: '100vh',
-        zIndex: 1,
-        overflow: 'hidden',
-        position: 'relative',
         display: 'flex',
-        width: '100%',
+    },
+    drawer: {
+        [theme.breakpoints.up('sm')]: {
+            width: drawerWidth,
+            flexShrink: 0,
+        },
+    },
+    nested: {
+        paddingLeft: theme.spacing.unit * 4,
     },
     appBar: {
-        position: 'absolute',
         marginLeft: drawerWidth,
-        [theme.breakpoints.up('md')]: {
+        [theme.breakpoints.up('sm')]: {
             width: `calc(100% - ${drawerWidth}px)`,
         },
     },
-    navIconHide: {
+    menuButton: {
-        [theme.breakpoints.up('md')]: {
+        marginRight: 20,
+        [theme.breakpoints.up('sm')]: {
             display: 'none',
         },
     },
     toolbar: theme.mixins.toolbar,
     drawerPaper: {
         width: drawerWidth,
-        [theme.breakpoints.up('md')]: {
-            position: 'relative',
-        },
     },
     content: {
-        flexGrow: 1,
+        flexGrow: 1
-        backgroundColor: theme.palette.background.default,
-        padding: theme.spacing.unit * 3,
     },
 });
 
 class ResponsiveDrawer extends React.Component {
     state = {
         mobileOpen: false,
-        key: ''
+        key: '',
-    }
+        open: false
+    };
 
     handleDrawerToggle = () => {
         this.setState(state => ({ mobileOpen: !state.mobileOpen }));
     }
 
+    handleClick = () => {
+        this.setState(state => ({ open: !state.open }));
+    }
+
     nav = (text) => {
         this.setState({
             key: text
@@ -102,33 +109,63 @@ class ResponsiveDrawer extends React.Component {
                         <ListItemIcon><ListIcon /></ListItemIcon>
                         <ListItemText primary='List' />
                     </ListItem>
-                    <ListItem button key='Quiz' onClick={() => this.nav('Quiz')}>
+                    <ListItem button onClick={this.handleClick}>
-                        <ListItemIcon><SlideshowIcon/></ListItemIcon>
+                        <ListItemIcon>
-                        <ListItemText primary='Quiz' />
+                            <SlideshowIcon />
+                        </ListItemIcon>
+                        <ListItemText inset primary="Quiz" />
+                        {this.state.open ? <ExpandLess /> : <ExpandMore />}
+                    </ListItem>
+                    <Collapse in={this.state.open} timeout="auto" unmountOnExit>
+                        <List component="div" disablePadding>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Easy-Quiz')}>
+                                <ListItemIcon>
+                                    <MapIcon />
+                                </ListItemIcon>
+                                <ListItemText inset primary="Easy" />
+                            </ListItem>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Medium-Quiz')}>
+                                <ListItemIcon>
+                                    <MapIcon />
+                                </ListItemIcon>
+                                <ListItemText inset primary="Medium" />
+                            </ListItem>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Hard-Quiz')}>
+                                <ListItemIcon>
+                                    <MapIcon />
+                                </ListItemIcon>
+                                <ListItemText inset primary="Hard" />
                             </ListItem>
                         </List>
+                    </Collapse>
+                </List>
+                <Divider />
             </div>
         );
 
         return (
             <div className={classes.root}>
-                <AppBar className={classes.appBar}>
+                <CssBaseline />
+                <AppBar position="fixed" className={classes.appBar}>
                     <Toolbar>
                         <IconButton
                             color="inherit"
                             aria-label="Open drawer"
                             onClick={this.handleDrawerToggle}
-                            className={classes.navIconHide}
+                            className={classes.menuButton}
                         >
                             <MenuIcon />
                         </IconButton>
-                        <Typography variant='title' color="inherit" noWrap>
+                        <Typography variant="title" color="inherit" noWrap>
                             The American Marten
                         </Typography>
                     </Toolbar>
                 </AppBar>
-                <Hidden mdUp>
+                <nav className={classes.drawer}>
+                    {/* The implementation can be swap with js to avoid SEO duplication of links. */}
+                    <Hidden smUp implementation="css">
                         <Drawer
+                            container={this.props.container}
                             variant="temporary"
                             anchor={theme.direction === 'rtl' ? 'right' : 'left'}
                             open={this.state.mobileOpen}
@@ -143,23 +180,28 @@ class ResponsiveDrawer extends React.Component {
                             {drawer}
                         </Drawer>
                     </Hidden>
-                <Hidden smDown implementation="css">
+                    <Hidden xsDown implementation="css">
                         <Drawer
-                        variant="permanent"
-                        open
                             classes={{
                                 paper: classes.drawerPaper,
                             }}
+                            variant="permanent"
+                            open
                         >
                             {drawer}
                         </Drawer>
                     </Hidden>
+                </nav>
+                <main className={classes.content}>
                     <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' && <QuizPage />}
+                    {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
+                    {this.state.key === 'Medium-Quiz' && <Quiz difficulty='Medium'/>}
+                    {this.state.key === 'Hard-Quiz' && <Quiz difficulty='Hard'/>}
+                </main>
             </div>
         );
     }
@@ -167,6 +209,9 @@ class ResponsiveDrawer extends React.Component {
 
 ResponsiveDrawer.propTypes = {
     classes: PropTypes.object.isRequired,
+    // Injected by the documentation to work in an iframe.
+    // You won't need it on your project.
+    container: PropTypes.object,
     theme: PropTypes.object.isRequired,
 };
 

src/components/QuizGame.js

@@ -2,10 +2,6 @@ import React, { Fragment } from 'react';
 import Grid from '@material-ui/core/Grid';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import AppBar from '@material-ui/core/AppBar';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
 import Quiz from 'react-quiz-component';
 
 /**
@@ -23,42 +19,17 @@ function shuffleArray(array) {
     return array;
 }
 
-function TabContainer(props) {
-    return (
-        <Typography component="div" variant='headline' align='center' style={{ padding: 8 }}>
-            {props.children}
-        </Typography>
-    );
-}
-
-TabContainer.propTypes = {
-    children: PropTypes.node.isRequired,
-};
-
 // Style for the tabs.
 const styles = theme => ({
     root: {
         flexGrow: 1,
         backgroundColor: theme.palette.background.paper,
-        marginTop: '64px',
-        overflow: 'scroll',
-        height: '95%',
     },
 });
 
 class QuizGame extends React.Component {
-    // The state of the component.
-    state = {
-        value: 0,
-    };
 
-    // Handles tab changes.
+    easy = {
-    handleChange = (event, value) => {
-        this.setState({ value });
-    };
-
-    // Object that contains the easy quiz material.
-    easyQuiz = {
         "quizTitle": "Trail Cam Quiz: Easy",
         "questions": shuffleArray([
             {
@@ -117,37 +88,166 @@ class QuizGame extends React.Component {
                 "correctAnswer": "3"
             },
         ])
-    };
+    }
+
+    medium = {
+        "quizTitle": "Trail Cam Quiz: Medium",
+        "questions": shuffleArray([
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "Black bear",
+                    "Common wombat",
+                    "Raccoon",
+                    "White-tailed deer"
+                ],
+                "correctAnswer": "1"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question2.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American beaver",
+                    "Muskrat",
+                    "Porcupine",
+                    "Woodchuck"
+                ],
+                "correctAnswer": "3"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question3.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American badger",
+                    "Raccoon",
+                    "Striped skunk",
+                    "Virginia opossum"
+                ],
+                "correctAnswer": "2"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question4.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "Eastern fox squirrel",
+                    "Eastern gray squirrel",
+                    "Red squirrel",
+                    "Southern flying squirrel"
+                ],
+                "correctAnswer": "3"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question5.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American Crow",
+                    "Black Vulture",
+                    "Turkey Vulture",
+                    "Northern Raven"
+                ],
+                "correctAnswer": "3"
+            },
+        ])
+    }
+
+    hard = {
+        "quizTitle": "Trail Cam Quiz: Hard",
+        "questions": shuffleArray([
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "Black bear",
+                    "Common wombat",
+                    "Raccoon",
+                    "White-tailed deer"
+                ],
+                "correctAnswer": "1"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question2.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American beaver",
+                    "Muskrat",
+                    "Porcupine",
+                    "Woodchuck"
+                ],
+                "correctAnswer": "3"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question3.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American badger",
+                    "Raccoon",
+                    "Striped skunk",
+                    "Virginia opossum"
+                ],
+                "correctAnswer": "2"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question4.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "Eastern fox squirrel",
+                    "Eastern gray squirrel",
+                    "Red squirrel",
+                    "Southern flying squirrel"
+                ],
+                "correctAnswer": "3"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question5.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American Crow",
+                    "Black Vulture",
+                    "Turkey Vulture",
+                    "Northern Raven"
+                ],
+                "correctAnswer": "3"
+            },
+        ])
+    }
+
+    pickDifficulty = difficulty => {
+        let level
+
+        switch (difficulty) {
+            case 'Easy':
+                level = this.easy
+                break
+            case 'Medium':
+                level = this.medium
+                break
+            case 'Hard':
+                level = this.hard
+                break
+            default:
+                break
+        }
+
+        return level
+    }
+
+    // The state of the component.
+    state = {
+        //difficulty: pickDifficulty(this.props.difficulty)
+        difficulty: this.pickDifficulty(this.props.difficulty)
+    }
 
     // Renders the quiz component.
     render() {
         const { classes } = this.props;
-        const { value } = this.state;
 
         return (
             // Tabs
             <div className={classes.root}>
-                <AppBar position="static">
-                    <Tabs
-                        value={value}
-                        centered
-                        fullWidth
-                        onChange={this.handleChange}
-                    >
-                        <Tab label="Easy" />
-                        <Tab label="Medium" />
-                        <Tab label="Hard" />
-                    </Tabs>
-                </AppBar>
-                {value === 0 && <TabContainer>
-                    <Fragment>
                 <Grid container justify="center">
-                            <Quiz quiz={this.easyQuiz} />
+                    <Quiz quiz={this.state.difficulty} />
                 </Grid>
-                    </Fragment>
-                </TabContainer>}
-                {value === 1 && <TabContainer>Medium Quiz</TabContainer>}
-                {value === 2 && <TabContainer>Hard Quiz</TabContainer>}
             </div>
         );
     }

src/components/ReportForm.js

@@ -16,8 +16,7 @@ import GoogleMap from '../components/ReportMap';
 const styles = theme => ({
   container: {
     display: 'flex',
-    flexWrap: 'wrap',
+    flexWrap: 'wrap'
-    marginTop: '64px'
   },
   textField: {
     marginLeft: theme.spacing.unit * 2,

src/pages/QuizPage.js

@@ -5,7 +5,7 @@ import QuizGame from '../components/QuizGame';
 class QuizPage extends Component {
     render() {
         return (
-      <QuizGame />
+            <QuizGame difficulty={this.props.difficulty}/>
         );
     }
 }