import React, {Component} from 'react';
import $ from "jquery";
class Nav extends Component{
constructor(props){
super();
this.refs.ClickItem = this.refs.ClickItem.bind(this);
}
menuClick(){
this.refs.ClickItem.slideToggle(500);
}
updateDimensions(){
if ($(window).width()> 500){
this.refs.ClickItem.removeAttr('style');
}
}
componentDidMount(){
window.addEventListener("resize", this.updateDimensions)
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions);
}
render(){
return(
<nav>
<a href="#" className="menu-trigger" onClick={()=>this.menuClick()}>Open menu</a>
<div className="container">
<div className="logo clearfix">
<img src="img/logo.png" alt=""/>
</div>
<div className="nav__items">
<ul ref="ClickItem">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
</nav>
);
}
}
export default Nav;