Skip to content

Instantly share code, notes, and snippets.

@ivandoric ivandoric/momoo.jsx
Created May 6, 2019

Embed
What would you like to do?
Za momu, 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))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.