Solucionado
Para que o menu só "feche" quando clicamos no :after do .menu-ativo, o instrutor adiciona este script:
document.documentElement.onclick = function(event){
if(event.target===document.documentElement){
document.documentElement.classList.remove('menu-ativo');
}
};
Ele disse que assim, o clique só é validado se for na tag
, assim o menu "fecha". Eu não entendi o por quê disso acontecer. Ao clicar num pseudo-elemento ":after" do .menu-ativo é a mesma coisa que clicar no ?
Fala ai Cauê, tudo bem? Basicamente o que ele fez foi adicionar um listener global que vai ouvir qualquer clique na página.
Uma vez que o clique foi realizado, ele verifica se não é dentro do menu, ou seja, ele está verificando se o clique foi feito na página em si e não dentro do menu.
Isso porque quando clicamos no ::after ou qualquer elemento filho do menu a ideia seria não fechá-lo.
Espero ter ajudado.
Obrigado!
Magina Cauê, sempre que precisar não deixe de criar suas dúvidas.
Abraços e bons estudos.