I’m not quite sure why the click event is not working.
I simply trying the use a responsive accessible navigation but looks like I’m missing something in the constructor or I’m not firing the function properly?
I have the feeling that my es6 constructor is not right.
Please let me know if you could help me
import React, { Component} from "react";
import {hot} from "react-hot-loader";
import { Link } from "react-router-dom";
import "../styles/navbar.scss"
import cart from '../assets/images/cart.png'
class NavBar extends Component{
constructor(props){
super(props);
this.responsiveNav = this.responsiveNav.bind(this);
}
responsiveNav(){
const primaryNav = document.querySelector(".nav-items");
const navToggle = document.querySelector(".mobile-nav-toggle");
navToggle.addEventListener("click", () => {
console.log('click')
const visibility = primaryNav.getAttribute("data-visible");
if (visibility === "false") {
primaryNav.setAttribute("data-visible", true);
navToggle.setAttribute("aria-expanded", true);
} else if (visibility === "true") {
primaryNav.setAttribute("data-visible", false);
navToggle.setAttribute("aria-expanded", false);
}
});
}
render(){
return(
<div id={this.props.id} className="navbar">
<button className="mobile-nav-toggle" aria-controls="nav-items" aria-expanded="false">
<span className="sr-only">Menu</span>
</button>
<nav className="nav">
<div className="nav-menu flex-row">
<div className="nav-brand">
<h2><Link to="/">APP</Link></h2>
</div>
<ul className="menu" data-visible="false" className="primary-nav flex">
<li>
<Link to="/">Products</Link>
</li>
<li>
<Link to="/">News</Link>
</li>
<li>
<Link to="/">Content</Link>
</li>
<li>
<Link to="/cart"><img src={cart} alt="cart icon"/><div id="yourcart">Your Cart</div></Link>
</li>
</ul>
</div>
</nav>
</div>
);
}
}
export default hot(module)(NavBar);
