Za momu, JSX

momoo.jsx

import { PureComponent, createRef, cloneElement } from 'react'
import Link from 'next/link'
import injectSheet, { withTheme } from 'react-jss'
import PropTypes from 'prop-types'

import Grid from 'components/Grid'

import LogoFull from 'static/svg/logo-full.svg'
import HamburgerFull from 'static/icons/hamburger-full.svg'
import Close from 'static/icons/close.svg'

import style from './style'

class MainNav extends PureComponent {
    constructor() {
        super()
        this.state = {
            menuOpen: false
        }
    }

    handleClick() {
        const { menuOpen } = this.state
        this.setState({ menuOpen: !menuOpen })
    }

    render() {
        const { classes } = this.props
        const { menuOpen } = this.state

        return (
            <section className={classes.mainNav}>
                <div className="menu-wrap">
                    <Grid container spacing={8} alignItems="center" justify="flex-start">
                        <Grid item xs={1}>
                            <button className="Hamburger" type="button" onClick={this.handleClick.bind(this)}>
                                {!menuOpen && <HamburgerFull />}
                                {menuOpen && <Close />}
                            </button>
                        </Grid>
                        <Grid item xs={1}>
                            <LogoFull className="logo" />
                        </Grid>
                    </Grid>
                </div>
                <nav className={`${classes.menuContent} ${menuOpen ? 'open' : ''}`}>
                    <ul>
                        <li>
                            <Link href="/">
                                <a>Home</a>
                            </Link>
                        </li>
                        <li>
                            <Link href="/">
                                <a>Approach</a>
                            </Link>
                        </li>
                        <li>
                            <Link href="/">
                                <a>Work</a>
                            </Link>
                        </li>
                        <li>
                            <Link href="/">
                                <a>People</a>
                            </Link>
                        </li>
                        <li>
                            <Link href="/">
                                <a>Contact</a>
                            </Link>
                        </li>

                        <ul>
                            <li>
                                <Link href="/">
                                    <a>Open positions</a>
                                </Link>
                            </li>
                            <li>
                                <Link href="/">
                                    <a>Stories</a>
                                </Link>
                            </li>
                            <li>
                                <Link href="/">
                                    <a>Privacy policy</a>
                                </Link>
                            </li>
                        </ul>
                    </ul>
                </nav>
            </section>
        )
    }
}

MainNav.propTypes = {
    classes: PropTypes.shape({})
}

MainNav.defaultProps = {
    classes: String
}

export default withTheme(injectSheet(style)(MainNav))