Animate menu button

Author: mcecode

src/components/page/header.astro

@@ -121,11 +121,14 @@ import {
   const menuButton = document.getElementById(menuButtonId) as HTMLButtonElement;
   const modeButton = document.getElementById(modeButtonId) as HTMLButtonElement;
 
+  menuButton.classList.add("transition-transform");
   menuButton.addEventListener("click", () => {
     document.body.classList.toggle("open-nav");
     header.classList.toggle("open-nav");
     navList.classList.toggle("open-nav");
     modeButton.classList.toggle("open-nav");
+
+    menuButton.classList.toggle("rotate-left");
   });
 
   const darkModeMedia = matchMedia("(prefers-color-scheme: dark)");

src/styles/header.scss

@@ -41,7 +41,7 @@
     gap: v-size(5);
     justify-items: center;
     margin-bottom: v-size(10);
-    overflow: auto;
+    overflow: hidden auto;
   }
   .logo {
     justify-self: start;

src/styles/page.scss

@@ -145,6 +145,9 @@ p.larger-spacing {
 
 // Animations
 
+.rotate-left {
+  transform: rotateZ(-90deg);
+}
 .rotate-appear {
   animation: 0ms ease-in-out forwards rotate-appear;
 }
@@ -153,9 +156,10 @@ p.larger-spacing {
 }
 
 @include m-motion {
-  .rotate-appear {
-    animation-duration: 250ms;
+  .transition-transform {
+    transition: transform 250ms ease-in-out;
   }
+  .rotate-appear,
   .rotate-vanish {
     animation-duration: 250ms;
   }