Olá devs! Minha página no navegador estava dando problemas ao abrir o menu hamburguer em telas menores. Demorei um tempo para achar o erro, mas encontrei. E esse erro encontra-se no repositório do curso! Sugiro que façam a alteração e arrumem para que outros alunos não fiquem perdidos como eu fiquei. O erro estava no main.js. O arquivo main.js já foi fornecido pronto, pois o foco do curso é introduzir o aluno à semântica do Sass. O erro encontra-se aqui no main.js do curso:
document.getElementById('menu-toggle').addEventListener('click', function() {
const menu = document.getElementById('navbar-menu');
this.classList.toggle('open');
menu.classList.toggle('open');
});
Foi usado um getElementById para navbar-menu, mas no index do projeto ela é uma classe. Então deve-se usar o querySelector. Segue abaixo a correção. Sugiro que façam ela no repositório do curso também.
document.addEventListener('DOMContentLoaded', function() {
console.log('O código JavaScript foi executado!');
document.getElementById('menu-toggle').addEventListener('click', function() {
const menu = document.querySelector('.navbar-menu');
this.classList?.toggle('open');
menu.classList?.toggle('open');
});
});
Também adicionei um defer no script por via das dúvidas antes do fechamento do body:
<script type="module" src="/main.js" defer></script>
Espero ter ajudado. Após esses ajustes, o menu funcionou corretamente abrindo as opções para telas menores.
Bons estudos Devs. Não desistam diante dos erros. Eles nos ajudam a aprender mais.
