Create a gist now

Instantly share code, notes, and snippets.

Embed
// ...
class Hamburger extends Component {
constructor(props) {
super(props);
this.state = {
toggleState: 0
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.refs.container.classList.toggle('change');
this.setState({
toggleState: this.state.toggleState ? 0 : 1
});
}
render() {
return (
<div id="parent">
<div id="nav-bar">
<div className="container" ref="container" onClick={this.handleClick}>
<div className="bar1" />
<div className="bar2" />
<div className="bar3" />
</div>
</div>
<Motion
defaultStyle={{ left: -40 }}
style={{
left: spring(this.state.toggleState ? 0 : -40, {
stiffness: 210,
damping: 10
})
}}
>
{style => (
<Drawer left={style.left}>
<Link>Home</Link>
<Link>Contact</Link>
<Link>Exit</Link>
</Drawer>
)}
</Motion>
</div>
);
}
}
export default Hamburger;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment