src/layouts/BaseLayout.astro

@@ -35,7 +35,7 @@ const { pageTitle } = Astro.props;
             {pageTitle}
         </h1>
         <slot />
-        <Footer>
+        <Footer />
         <script>
             import "../scripts/menu.js";
         </script>
@@ -44,6 +44,6 @@ const { pageTitle } = Astro.props;
 
 <style>
   .page-title {
-      font-size: 2.8rem;
+      font-size: 2.2rem;
   }
 </style>

src/scripts/menu.js

@@ -1,3 +1,16 @@
-document.querySelector('.hamburger').addEventListener('click', () => {
+const setupHamburgerMenu = () => {
-    document.querySelector('.nav-links').classList.toggle('expanded');
+    const hamburger = document.querySelector('.hamburger');
+    const navLinks = document.querySelector('.nav-links');
+
+    if (!hamburger || !navLinks) return;
+
+    hamburger.addEventListener('click', () => {
+        navLinks.classList.toggle('expanded');
     });
+};
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', setupHamburgerMenu);
+} else {
+    setupHamburgerMenu();
+}