如何折叠响应式导航栏

Question

So I have an issue in collapsing my navigation menu on Android when user clicks on the link in the nav bar in my website. I tried using addEventListener but that doesn't work. So in other words I mean that I want to collapse/close when scroll or click on the nav links. I don't want to use any library Here are the codes

const hamburger = document.querySelector('.nav-menu');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelector('.nav-links li');
hamburger.addEventListener('click', () => {
  navLinks.classList.toggle('activate');
  links.forEach(link => {
  })
})
//Here is the scroll one
//This part is not working 
hamburger.addEventListener('scroll', 'click', () => {
  navLinks.classList.remove('activate');
})

Here is my responsive nav menu css code

@media screen and (max-width: 768px) {
  .nav-line {
    height: 3px;
    width: 30px;
    background: white;
    margin: 5px;
  }
  nav {
    position: relative;
  }
  .nav-menu {
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 2;
  }
  .nav-links {
  position: fixed;
  background: var(--gray);
  height: 100vh;
  width: 100%;
  flex-direction: column;
  z-index: 1;
  clip-path: circle(100px at 90% -10%);
  -webkit-clip-path: circle(100px at 90% -10%);
  transition: all 1s ease-out;
  pointer-events: none;
  /*display: none;*/
}
.nav-links.activate{
  clip-path: circle(1000px at 90% -10%);
  -webkit-clip-path: circle(1000px at 90% -10%);
  pointer-events: all;
}
.nav-menu {
  flex-direction: column;
}
.nav-links:hover {
  color: red;
}
}

Here is my html part

  <div class="nav-menu">
    <div class="nav-line"></div>
<div class="nav-line"></div>
<div class="nav-line"></div>
  </div>

  <ul class="nav-links">
      <li><a href="#">Home</a></li>
      <li><a href="#about">About Me</a></li>
    <li><a href="#">Tools</a></li>
    <li><a href="#">Contact Me</a></li>
  </ul>
</nav>

The navbar closes perfectly when clicked on humburger button like open while clicking it. It is possible to do with same animation like the navbar closes while clicking on nav links or scrolling? Here is the website link: https://ishankbg.tech If I need to add more details I will If you feel this question is not good or missing something you can downvote

Answer 1

set the event listener for scroll separately to document object, since mouse may not be over the menu when the user scrolls.

as: document.addEventListener('scroll', #function remove classlist#)