don't animate menu unless interacted with

web/src/components/layout/Header.tsx

@@ -25,8 +25,12 @@ export const Header = () => {
   const { replace } = useRouter();
   const pathname = usePathname();
   const [showMenu, setShowMenu] = useState(false);
+  // Only enable the menu's slide/fade animations once the user has interacted,
+  // so they don't play on first page load
+  const [hasInteracted, setHasInteracted] = useState(false);
 
   function toggleMenu() {
+    setHasInteracted(true);
     setShowMenu(!showMenu);
   }
 
@@ -61,6 +65,7 @@ export const Header = () => {
       <header
         className={styles.header}
         data-show={showMenu}
+        data-animate={hasInteracted}
         data-small={!isInView}
       >
         <Link href="/" aria-label="Hjem">

web/src/components/layout/header.module.scss

@@ -54,6 +54,12 @@
       transition: transform .6s ease;
     }
   }
+
+  &[data-animate=false] {
+    .mainMenu {
+      animation: none;
+    }
+  }
 }
 
 .overlay {
@@ -282,4 +288,4 @@
   .logo {
     font-size: 1rem;
   }
-}
+}