Created
May 6, 2019 09:05
-
-
Save ivandoric/19ebbc8dc8fec825ee53ed89594c2c5c to your computer and use it in GitHub Desktop.
Za momu, JSX
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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