How to close mask

I have created a hamburger menu that opens with the mask in the background (mask opens after 4ms). Next, on closing the hamburger menu, I want that mask to close with it (means after 4ms). But instead, according to my code, my mask is not closing after my hamburger menu closes.

JS:

const menuIcon = document.querySelector('.hamburger-menu');
const mainNav = document.querySelector('.main-nav');

menuIcon.addEventListener('click', () => {
    menuIcon.classList.toggle('change');
    mainNav.classList.toggle('change');

     setTimeout(() => {
      mask.setAttribute('style','display:block');
     }, 400);                                     /*Code working till here */
    
    if($('#mask').is(':visible')){
  
      console.log('mask is showing');
    
      menuIcon.addEventListener('click', () => {
        
        setTimeout(() => {
          mask.setAttribute('style','display:none');
         }, 400);
    
      });
    }
});

I just want that mask to disappear on closing the hamburger menu.

Please any help would be appreciated.

Answer

As your code is written, instead of actually closing the mask when the mask is showing, you are adding an additional event listener which closes the mask. You should be able to fix this by replacing the code in your if statement with the following:

if($('#mask').is(':visible')){
  console.log('mask is showing');
    
  setTimeout(() => {
    mask.setAttribute('style','display:none');
  }, 400);
}

This updated code directly closes the mask instead of adding an additional event listener to close the mask.