Add RepsonsiveToggle to View Transition life cycle event

markteekman · Dec 27, 2023 · cea7b82 · cea7b82
1 parent a6338f3
commit cea7b82
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 20 deletions.
diff --git 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
@@ -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>