From cea7b82430d1450d300b8d89901bc5675ffa4da5 Mon Sep 17 00:00:00 2001
From: Mark Teekman <markteekman@users.noreply.github.com>
Date: Wed, 27 Dec 2023 10:24:26 +0100
Subject: [PATCH] Add RepsonsiveToggle to View Transition life cycle event

---
 package.json                          |  2 +-
 src/components/ResponsiveToggle.astro | 40 ++++++++++++++-------------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 4acf958..c223ddd 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "accessible-astro-starter",
   "description": "An Accessible Starter Theme for Astro including several accessibility features and tools to help you build faster.",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "author": "Mark Teekman",
   "homepage": "https://accessible-astro.netlify.app/",
   "scripts": {
diff --git a/src/components/ResponsiveToggle.astro b/src/components/ResponsiveToggle.astro
index 2addf42..e08b243 100644
--- a/src/components/ResponsiveToggle.astro
+++ b/src/components/ResponsiveToggle.astro
@@ -10,28 +10,30 @@
 </button>
 
 <script>
-  // variables
-  const responsiveToggle = document.querySelector('.responsive-toggle')
-
-  // functions
-  const openMenu = (toggle) => {
-    toggle.setAttribute('aria-expanded', true)
-    toggle.setAttribute('aria-label', 'Close menu navigation')
-    toggle.innerHTML = `<svg width="20" height="20" aria-hidden="true" fill="var(--action-color)" xmlns="http://www.w3.org/2000/svg"><path d="M10 10 2 2m8 8 8 8m-8-8 8-8m-8 8-8 8" stroke="var(--action-color)" stroke-width="2.667" stroke-linecap="round" stroke-linejoin="round"/></svg>`
-  }
+  document.addEventListener('astro:page-load', () => {
+    // variables
+    const responsiveToggle = document.querySelector('.responsive-toggle')
 
-  const closeMenu = (toggle) => {
-    toggle.setAttribute('aria-expanded', false)
-    toggle.setAttribute('aria-label', 'Open menu navigation')
-    toggle.innerHTML = `<svg width="26" height="21" aria-hidden="true" fill="var(--action-color)" xmlns="http://www.w3.org/2000/svg"><path d="M2 1.667h24m-24 8h24m-24 8h24" stroke="var(--action-color)" stroke-width="2.667" stroke-linecap="round" stroke-linejoin="round"/></svg>`
-  }
+    // functions
+    const openMenu = (toggle) => {
+      toggle.setAttribute('aria-expanded', true)
+      toggle.setAttribute('aria-label', 'Close menu navigation')
+      toggle.innerHTML = `<svg width="20" height="20" aria-hidden="true" fill="var(--action-color)" xmlns="http://www.w3.org/2000/svg"><path d="M10 10 2 2m8 8 8 8m-8-8 8-8m-8 8-8 8" stroke="var(--action-color)" stroke-width="2.667" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+    }
+
+    const closeMenu = (toggle) => {
+      toggle.setAttribute('aria-expanded', false)
+      toggle.setAttribute('aria-label', 'Open menu navigation')
+      toggle.innerHTML = `<svg width="26" height="21" aria-hidden="true" fill="var(--action-color)" xmlns="http://www.w3.org/2000/svg"><path d="M2 1.667h24m-24 8h24m-24 8h24" stroke="var(--action-color)" stroke-width="2.667" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+    }
 
-  // execution
-  responsiveToggle.addEventListener('click', (_) => {
-    const mobileNavigation = document.querySelector('.mobile-menu')
+    // execution
+    responsiveToggle.addEventListener('click', (_) => {
+      const mobileNavigation = document.querySelector('.mobile-menu')
 
-    mobileNavigation.classList.toggle('show')
-    mobileNavigation.classList.contains('show') ? openMenu(responsiveToggle) : closeMenu(responsiveToggle)
+      mobileNavigation.classList.toggle('show')
+      mobileNavigation.classList.contains('show') ? openMenu(responsiveToggle) : closeMenu(responsiveToggle)
+    })
   })
 </script>