React responsive nav component es6 function not firing

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);