Since adding an event listener to the document to close the navigation on an outside click, the burger menu has gone from 100% effective to activating the active class's to being less effective and not always creating the event. Any help will be much appreciated.

const burger = document.querySelector('.nav-mob-menu');
const mobNav = document.querySelector('.mobile-nav-side');

burger.addEventListener('click', () => {
  mobNav.classList.toggle('active');
  burger.classList.toggle('active');
})

document.querySelectorAll('.links').forEach(e => 
e.addEventListener('click', () => {
    burger.classList.remove('active');
    mobNav.classList.remove('active');
}))

document.addEventListener('click', (e) => {
if(e.target.id != 'nav-mob-menu' && e.target.id != 'mobile-nav-side'){
    mobNav.classList.remove('active');
    burger.classList.remove('active');
}
})