Elep

import React, { Component } from 'react';
import {NavLink} from 'react-router-dom';
import Sidenav from './Sidenav/Sidenav';

export default class Layout extends Component {
    constructor(props){
        super()
        this.state = {
            showSideNav: false
        }
    }

showSideNav = (e) => {
        // e.preventDefault()
        this.setState(prevState => ({showSideNav: !prevState.showSideNav}))
    }

submit = (e) => {
        const answer = confirm("Are you sure you are ready to submit? You can't go back.")
        if(answer) window.location.href = "/test/finish";
    }

render() {

// console.log(this.props.next())
        return (
            <>
                <header>
                    <div className="header-bar">
                        <div className="hamburger">
                            <div className="hamburger-wrapper">
                                <button className="hamburger-button" onClick={this.showSideNav}>
                                    <img className="hamburger-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAAVElEQVRoge3W0Q2AMAxDQRcxOExOhyBSoupuAvvvJQA0WEme7hEVVpKve0SFq3tAFUemuZO83SMAgCIyfppjotGRaWQ8AJxExk9zTDQ6Mo2MB+CPDXJLBiVsKHgMAAAAAElFTkSuQmCC" alt="Hamburger Icon" />
                                </button>
                            </div>
                        </div>
                        <div className="header-brand">
                            <div className="brand-logo">
                                <NavLink to="/questions" className="home-link">
                                    <img src="/images/logo.png" alt="Brand Logo" className="logo" />
                                </NavLink>
                            </div>
                        </div>
                        <nav className="header-nav">
                            <ul className="nav-list">
                                <li className="nav-list-item">
                                    <NavLink to="/test/start/1" className="nav-link">
                                        <span className="nav-label">Question One</span>
                                    </NavLink>
                                </li>
                                <li className="nav-list-item">
                                    <NavLink to="/test/start/2" className="nav-link">
                                        <span className="nav-label">Question Two</span>
                                    </NavLink>
                                </li>
                                <li className="nav-list-item">
                                    <NavLink to="/test/start/3" className="nav-link">
                                        <span className="nav-label">Question Three</span>
                                    </NavLink>
                                </li>
                                <li className="nav-list-item">
                                    <NavLink to="/test/start/4" className="nav-link">
                                        <span className="nav-label">Question Four</span>
                                    </NavLink>
                                </li>
                                <li className="nav-list-item">
                                    <NavLink to="/test/start/5" className="nav-link">
                                        <span className="nav-label">Question Five</span>
                                    </NavLink>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    {this.state.showSideNav && <Sidenav close={this.showSideNav} />}
                </header>
                
                <main className="wrapper">
                    {this.props.children}
                    <div className="submit">
                        <button onClick={this.submit} disabled={this.props.next()}>Submit Final</button>
                    </div>
                </main>
            </>
            
        )
    }
}