こちらのサイト（whimsical-meringue-9c9ee0.netlify.app/）で、スマホサイズ時にハンバーガーメニューを表示させたいと考えています。現在、途中まで実装はできているのですが、スマホサイズではメニューが表示されず、動作しません。以下のJavaScriptを使用すると一応動作はするものの、クリック時にページ全体が再読み込みされてしまいます。どのように修正すればよいか、ご教示いただけますでしょうか。// // 共通パーツを読み込み// async function loadPart(id, file) {// const yomikomi = await fetch(file);// document.getElementById(id).innerHTML = await yomikomi.text();// }// loadPart(\u0026quot;header\u0026quot;, \u0026quot;header.html\u0026quot;);// loadPart(\u0026quot;footer\u0026quot;, \u0026quot;footer.html\u0026quot;);// function updateText(newText) {// document.getElementById(\u0026quot;display-text\u0026quot;).textContent = newText;// }// //参考// //https://breezegroup.co.jp/202004/javascript-fetch/// //バーガーメニューとドロワー// const hamburger_menu = document.querySelector(\u0026quot;#hamburger_menu\u0026quot;);// const gnav = document.querySelector(\u0026quot;nav\u0026quot;);// hamburger_menu.addEventListener(\u0026quot;click\u0026quot;, ()=\u0026gt;{// hamburger_menu.classList.toggle(\u0026quot;active\u0026quot;);// gnav.classList.toggle(\u0026quot;active\u0026quot;);// })// gnav.addEventListener(\u0026quot;click\u0026quot;, () =\u0026gt;{// hamburger_menu.classList.remove(\u0026quot;active\u0026quot;);// gnav.classList.remove(\u0026quot;active\u0026quot;);// })// async function loadPart(id, file) {// const yomikomi = await fetch(file);// document.getElementById(id).innerHTML = await yomikomi.text();// // ヘッダーが読み込まれた後にイベントを登録// if (id === \u0026quot;header\u0026quot;) {// const hamburger_menu = document.querySelector(\u0026quot;#hamburger_menu\u0026quot;);// const gnav = document.querySelector(\u0026quot;nav\u0026quot;);// if (hamburger_menu \u0026amp;\u0026amp;gnav) {// hamburger_menu.addEventListener(\u0026quot;click\u0026quot;, () =\u0026gt;{// hamburger_menu.classList.toggle(\u0026quot;active\u0026quot;);// gnav.classList.toggle(\u0026quot;active\u0026quot;);// });// gnav.addEventListener(\u0026quot;click\u0026quot;, () =\u0026gt;{// hamburger_menu.classList.remove(\u0026quot;active\u0026quot;);// gnav.classList.remove(\u0026quot;active\u0026quot;);// });// }// }// }// loadPart(\u0026quot;header\u0026quot;, \u0026quot;header.html\u0026quot;);// loadPart(\u0026quot;footer\u0026quot;, \u0026quot;footer.html\u0026quot;);