Menu Responsivo (vanilla)

navResponsive.css

/*Menu responsivo e efeito de fading*/
.navResponsive {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  
  width: 70%;
  margin: 0;
  
  background: grey;
  box-shadow: 0 0 10px 1000px rgba(0, 0, 0, 0.8); 
  color: white;
}

.fading {
  animation: fade-out .7s ease-out; }

@keyframes fade-out {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
/*Menu responsivo e efeito de fading*/

toggler.js

//menu
let menu = document.querySelector('.navbar-top');
let menuBtn = document.querySelector('.menu-mobile');

//abre o menu clicando no hamburger
menuBtn.addEventListener('click', () => {
	menu.classList.add('navResponsive');
});

//fecha o menu clicando fora da janela
document.addEventListener('mouseup', (e) => {

	if (document.documentElement.clientWidth <= 768) { //verifica o tamanho da tela
		if(e.target != menu && getComputedStyle(menu, null).display == 'flex'){ 
			menu.classList.add('fading');
			
			setTimeout(() => {
				menu.classList.remove('fading');
				menu.classList.remove('navResponsive');
			}, 500);
		}
	}
	
});