From 35bb361952651f3fb19abf6bdcbf25838bf8e1ab Mon Sep 17 00:00:00 2001
From: Jose <romerojosemanuel@hotmail.com>
Date: Thu, 28 Mar 2024 18:08:58 -0600
Subject: [PATCH] add animation to mobile menu

---
 src/components/Header.astro | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index cf6f78464..288247039 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -59,7 +59,7 @@ const pages = [
 					style="background:linear-gradient(to right, transparent 0%, white 50%, transparent 100%)"
 				/>
 			</div>
-			<nav class="flex w-full flex-col items-center gap-5">
+			<nav class="navContent flex w-full flex-col items-center gap-5">
 				<img
 					src="/img/lvda.webp"
 					alt="lvda logo"
@@ -206,9 +206,14 @@ const pages = [
 <script>
 	import { $ } from "@/lib/dom-selector"
 
-	function toggleMenu(nav: HTMLElement | null, menuMobileContent: HTMLElement | null) {
+	function toggleMenu(
+		nav: HTMLElement | null,
+		menuMobileContent: HTMLElement | null,
+		navContent: HTMLElement | null
+	) {
 		menuMobileContent?.classList.toggle("open")
 		nav?.classList.toggle("open")
+		navContent?.classList.toggle("animate-bounce-fade-in")
 		document.body.classList.toggle("overflow-hidden")
 		document.body.classList.toggle("lg:overflow-auto")
 	}
@@ -218,14 +223,17 @@ const pages = [
 		const menuButton = $("#menuButton")
 		const innerMenuButton = $("#innerMenuButton")
 		const menuMobileContext = $("#menuMobileContent")
+		const navContent = $(".navContent")
 
-		menuButton?.addEventListener("hamburgerButtonClicked", () => toggleMenu(nav, menuMobileContext))
+		menuButton?.addEventListener("hamburgerButtonClicked", () =>
+			toggleMenu(nav, menuMobileContext, navContent)
+		)
 		innerMenuButton?.addEventListener("hamburgerButtonClicked", () =>
-			toggleMenu(nav, menuMobileContext)
+			toggleMenu(nav, menuMobileContext, navContent)
 		)
 
 		if (menuMobileContext?.classList.contains("open")) {
-			toggleMenu(nav, menuMobileContext)
+			toggleMenu(nav, menuMobileContext, navContent)
 		}
 	})
 </script>