From 857f306a13d48eff69e699a3976157b374fe4747 Mon Sep 17 00:00:00 2001
From: EddyVinck <eddyvinck95@gmail.com>
Date: Tue, 3 Oct 2023 17:44:16 +0200
Subject: [PATCH] fix: restore hamburger click event

---
 src/components/Header.astro | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 2472886..3cc1399 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -121,15 +121,23 @@ const topics = await getCollection("topic");
 </style>
 
 <script>
-  const hamburger = document.querySelector(".hamburger");
-  const nav = document.querySelector("nav");
+  function setupHamburgerMenuToggle() {
+    const hamburger = document.querySelector(".hamburger");
+    const nav = document.querySelector("header nav");
 
-  if (!hamburger || !nav) {
-    throw new Error("Could not find hamburger or nav");
+    if (!hamburger || !nav) {
+      throw new Error("Could not find hamburger or nav");
+    }
+
+    hamburger.addEventListener("click", () => {
+      nav.classList.toggle("hidden");
+      hamburger.classList.toggle("open");
+    });
   }
 
-  hamburger.addEventListener("click", () => {
-    nav.classList.toggle("hidden");
-    hamburger.classList.toggle("open");
+  // When Astro navigates pages using <ViewTransitions /> the click event needs to be added again
+  // See: https://docs.astro.build/en/guides/view-transitions/#astropage-load
+  document.addEventListener("astro:page-load", () => {
+    setupHamburgerMenuToggle();
   });
 </script>