From 5627e7eded65cc9cdd05f6ca63a3cdd60d6aa1e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joel=20Mart=C3=ADnez?= <joel.mh112@gmail.com>
Date: Tue, 12 Mar 2024 22:42:20 +0100
Subject: [PATCH 1/6] [WIP]

---
 src/components/Header.astro   | 58 +++++++++++++++++++++++++++++++++++
 src/components/HeroLogo.astro |  4 +--
 src/layouts/Layout.astro      |  2 ++
 3 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Header.astro

diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 000000000..f202eda4d
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,58 @@
+---
+import HeroLogo from "@/components/HeroLogo.astro"
+
+const pages = [
+	{ name: "El Evento", href: "/" },
+	{ name: "Combates", href: "/combates" },
+	{ name: "Pronósticos", href: "/pronosticos" },
+	{ name: "Entradas", href: "/entradas" },
+]
+---
+
+<header class="mb-10 h-24">
+	<nav class="hidden h-full justify-center lg:flex">
+		{
+			pages.map((page, key) => (
+				<>
+					<a
+						href={page.href}
+						class="nav-item from current relative flex items-center justify-center px-10 text-xl uppercase text-white hover:text-gray-300"
+					>
+						<span class="z-10">{page.name}</span>
+						<div class="background absolute -z-10 h-full w-full" />
+					</a>
+					{key == 1 && <div class={`w-64`} />}
+				</>
+			))
+		}
+	</nav>
+	<div class="relative flex h-2 w-full flex-col items-center">
+		<div class="absolute flex h-full w-full items-center">
+			<hr
+				class="h-[2px] w-full border-t-0"
+				style="background:linear-gradient(to right, transparent 3%, white 35%, white 100%)"
+			/>
+			<HeroLogo class:list={`-mx-2 h-80 w-auto`} noEffect />
+			<hr
+				class="h-[2px] w-full border-t-0"
+				style="background:linear-gradient(to left, transparent 3%, white 35%, white 100%)"
+			/>
+		</div>
+	</div>
+</header>
+
+<style>
+	.nav-item .background {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		background: linear-gradient(to bottom, rgba(221, 221, 221, 20%) 0%, transparent 100%);
+		transition: opacity 0.3s;
+	}
+
+	.nav-item:hover .background {
+		opacity: 1;
+	}
+</style>
diff --git a/src/components/HeroLogo.astro b/src/components/HeroLogo.astro
index 8cda961d3..50d5f7d68 100644
--- a/src/components/HeroLogo.astro
+++ b/src/components/HeroLogo.astro
@@ -21,6 +21,6 @@
 		>
 		</path>
 	</symbol>
-	<use href="#hero-logo" class="text-[#f1ffaa]/70 blur-xl md:blur-md"></use>
-	<use href="#hero-logo" class="text-primary"></use>
+	{Astro.props.noEffect && <use href="#hero-logo" class="text-[#f1ffaa]/70 blur-xl md:blur-md" />}
+	<use href="#hero-logo" class:list={Astro.props.noEffect ? "text-white" : "text-primary"}></use>
 </svg>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 91587be26..745999146 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -2,6 +2,7 @@
 import { ViewTransitions } from "astro:transitions"
 
 import ButtonUp from "@/components/ButtonUp.astro"
+import Header from "@/components/Header.astro"
 import KonamiCode from "@/components/KonamiCode.astro"
 import LightsBackground from "@/components/LightsBackground.astro"
 import NoiseBackground from "@/components/NoiseBackground.astro"
@@ -31,6 +32,7 @@ const { title, description, preloadImgLCP } = Astro.props
 		<!-- <SmokeBackground /> -->
 		<NoiseBackground />
 		<LightsBackground />
+		<Header />
 		<div
 			class="mx-auto max-w-6xl px-2 pt-16 selection:bg-primary selection:text-secondary md:pt-20 lg:px-10"
 			id="main-content"

From 2b16d4ba47837d4a44a391e7b0ed76628c3aff9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joel=20Mart=C3=ADnez?= <joel.mh112@gmail.com>
Date: Wed, 13 Mar 2024 16:46:42 +0100
Subject: [PATCH 2/6] [WIP]

---
 src/components/HamburgerButton.astro | 32 ++++++++++++++++++++++++++++
 src/components/Header.astro          | 22 +++++++++++--------
 2 files changed, 45 insertions(+), 9 deletions(-)
 create mode 100644 src/components/HamburgerButton.astro

diff --git a/src/components/HamburgerButton.astro b/src/components/HamburgerButton.astro
new file mode 100644
index 000000000..8922ef470
--- /dev/null
+++ b/src/components/HamburgerButton.astro
@@ -0,0 +1,32 @@
+---
+const genericHamburgerLine = `h-0.5 w-4 my-0.5 bg-gray-300 transition ease transform duration-300`
+---
+
+<button
+	id="hamburgerButton"
+	class="group group flex h-5 w-4 flex-col items-center justify-center lg:hidden"
+	aria-label="hamburguer menu button"
+>
+	<div
+		class={`${genericHamburgerLine}  group-hover:opacity-100 group-[.open]:translate-y-1.5 group-[.open]:rotate-45 group-[.open]:group-hover:opacity-100`}
+	>
+	</div>
+	<div class={`${genericHamburgerLine} group-[.open]:opacity-0 group-hover:opacity-100}`}></div>
+	<div
+		class={`${genericHamburgerLine} group-[.open]:-translate-y-1.5 group-[.open]:-rotate-45 group-[.open]:group-hover:opacity-100 group-hover:opacity-100`}
+	>
+	</div>
+</button>
+
+<style>
+	#hamburgerButton.open {
+	}
+</style>
+
+<script>
+	document.querySelector("#hamburgerButton")?.addEventListener("click", () => {
+		const isOpen = document.querySelector("#hamburgerButton")?.classList.contains("open")
+		document.querySelector("#hamburgerButton")?.classList.toggle("open")
+		dispatchEvent(new CustomEvent("hamburgerButtonClicked", { detail: { isOpen: !isOpen } }))
+	})
+</script>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index f202eda4d..7c4a655fd 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,28 +3,32 @@ import HeroLogo from "@/components/HeroLogo.astro"
 
 const pages = [
 	{ name: "El Evento", href: "/" },
-	{ name: "Combates", href: "/combates" },
-	{ name: "Pronósticos", href: "/pronosticos" },
-	{ name: "Entradas", href: "/entradas" },
+	{ name: "Combates", href: "/combates", disabled: true },
+	{ name: "Pronósticos", href: "/pronosticos", disabled: true },
+	{ name: "Entradas", href: "/entradas", disabled: true },
 ]
 ---
 
 <header class="mb-10 h-24">
-	<nav class="hidden h-full justify-center lg:flex">
+	<nav class="h-full justify-center lg:flex">
 		{
-			pages.map((page, key) => (
+			pages.map(({ disabled, name, href }, key) => (
 				<>
 					<a
-						href={page.href}
-						class="nav-item from current relative flex items-center justify-center px-10 text-xl uppercase text-white hover:text-gray-300"
+						href={disabled ? "" : href}
+						class:list={[
+							"nav-item relative hidden select-none items-center justify-center px-10 text-xl uppercase text-white lg:flex",
+							disabled ? "cursor-not-allowed hover:text-gray-300" : "",
+						]}
 					>
-						<span class="z-10">{page.name}</span>
+						<span class="z-10">{name}</span>
 						<div class="background absolute -z-10 h-full w-full" />
 					</a>
-					{key == 1 && <div class={`w-64`} />}
+					{key == 1 && <div class={`hidden w-64 lg:block`} />}
 				</>
 			))
 		}
+		<HamburgerButton class:list={`block lg:hidden`} />
 	</nav>
 	<div class="relative flex h-2 w-full flex-col items-center">
 		<div class="absolute flex h-full w-full items-center">

From e8b74eabb32be26bf2ad70ea51b32718b8c3202f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joel=20Mart=C3=ADnez?= <joel.mh112@gmail.com>
Date: Wed, 13 Mar 2024 19:39:51 +0100
Subject: [PATCH 3/6] [FEAT] full responsive menu

---
 public/img/lvda.webp                 | Bin 0 -> 7410 bytes
 src/components/FooterContent.astro   |  10 +++
 src/components/HamburgerButton.astro |  29 +++++----
 src/components/Header.astro          |  94 +++++++++++++++++++++++++--
 src/components/SocialButtons.astro   |  52 +++++++++++++++
 src/layouts/Layout.astro             |   1 +
 src/sections/Footer.astro            |  60 ++---------------
 7 files changed, 171 insertions(+), 75 deletions(-)
 create mode 100644 public/img/lvda.webp
 create mode 100644 src/components/FooterContent.astro
 create mode 100644 src/components/SocialButtons.astro

diff --git a/public/img/lvda.webp b/public/img/lvda.webp
new file mode 100644
index 0000000000000000000000000000000000000000..217b512e025307901ddd60957dceb38b554b0688
GIT binary patch
literal 7410
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
C`=!JH

literal 0
HcmV?d00001

diff --git a/src/components/FooterContent.astro b/src/components/FooterContent.astro
new file mode 100644
index 000000000..337279f67
--- /dev/null
+++ b/src/components/FooterContent.astro
@@ -0,0 +1,10 @@
+---
+import Typography from "@/components/Typography.astro"
+---
+
+<Typography as="span" variant="body" color="neutral" class:list={"text-center"}>
+	&copy; {new Date().getFullYear()} La Velada del Año <span
+		aria-hidden="true"
+		class="hidden md:inline">|</span
+	><br aria-hidden="true" class="block md:hidden" /> Todos los derechos reservados.
+</Typography>
diff --git a/src/components/HamburgerButton.astro b/src/components/HamburgerButton.astro
index 8922ef470..b62f96092 100644
--- a/src/components/HamburgerButton.astro
+++ b/src/components/HamburgerButton.astro
@@ -1,32 +1,33 @@
 ---
-const genericHamburgerLine = `h-0.5 w-4 my-0.5 bg-gray-300 transition ease transform duration-300`
+const width = "w-6"
+const genericHamburgerLine = `h-[2px] ${width} bg-gray-300 transition ease transform duration-300`
 ---
 
 <button
-	id="hamburgerButton"
-	class="group group flex h-5 w-4 flex-col items-center justify-center lg:hidden"
+	id={Astro.props.id}
+	class={`group flex h-[20px] ${width} flex-col items-center justify-between lg:hidden relative hamburgerButton`}
 	aria-label="hamburguer menu button"
 >
 	<div
-		class={`${genericHamburgerLine}  group-hover:opacity-100 group-[.open]:translate-y-1.5 group-[.open]:rotate-45 group-[.open]:group-hover:opacity-100`}
+		class={`${genericHamburgerLine}  group-hover:opacity-100 group-[.open]:translate-y-2 group-[.open]:rotate-45 group-[.open]:group-hover:opacity-100`}
 	>
 	</div>
 	<div class={`${genericHamburgerLine} group-[.open]:opacity-0 group-hover:opacity-100}`}></div>
+	<div class={`${genericHamburgerLine} group-[.open]:opacity-0 group-hover:opacity-100}`}></div>
 	<div
-		class={`${genericHamburgerLine} group-[.open]:-translate-y-1.5 group-[.open]:-rotate-45 group-[.open]:group-hover:opacity-100 group-hover:opacity-100`}
+		class={`${genericHamburgerLine} group-[.open]:-translate-y-[0.6rem] group-[.open]:-rotate-45 group-[.open]:group-hover:opacity-100 group-hover:opacity-100`}
 	>
 	</div>
 </button>
 
-<style>
-	#hamburgerButton.open {
-	}
-</style>
-
 <script>
-	document.querySelector("#hamburgerButton")?.addEventListener("click", () => {
-		const isOpen = document.querySelector("#hamburgerButton")?.classList.contains("open")
-		document.querySelector("#hamburgerButton")?.classList.toggle("open")
-		dispatchEvent(new CustomEvent("hamburgerButtonClicked", { detail: { isOpen: !isOpen } }))
+	document.addEventListener("astro:page-load", () => {
+		document.querySelectorAll(".hamburgerButton").forEach((button) => {
+			button.addEventListener("click", () => {
+				const hamburgerButton = document.querySelector(".hamburgerButton")
+				hamburgerButton?.classList.toggle("open")
+				hamburgerButton?.dispatchEvent(new CustomEvent("hamburgerButtonClicked"))
+			})
+		})
 	})
 </script>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 7c4a655fd..5703de6f9 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,5 +1,10 @@
 ---
+import HamburgerButton from "@/components/HamburgerButton.astro"
 import HeroLogo from "@/components/HeroLogo.astro"
+import DrawnXLogo from "./DrawnXLogo.astro"
+import Footer from "@/sections/Footer.astro"
+import FooterContent from "@/components/FooterContent.astro"
+import SocialButtons from "@/components/SocialButtons.astro"
 
 const pages = [
 	{ name: "El Evento", href: "/" },
@@ -9,15 +14,15 @@ const pages = [
 ]
 ---
 
-<header class="mb-10 h-24">
-	<nav class="h-full justify-center lg:flex">
+<header class="mb-10 h-16 lg:h-24">
+	<nav class="group flex h-full w-full items-center justify-between px-10 lg:justify-center">
 		{
 			pages.map(({ disabled, name, href }, key) => (
 				<>
 					<a
 						href={disabled ? "" : href}
 						class:list={[
-							"nav-item relative hidden select-none items-center justify-center px-10 text-xl uppercase text-white lg:flex",
+							"nav-item relative hidden h-full select-none items-center justify-center px-10 text-xl uppercase text-white lg:flex",
 							disabled ? "cursor-not-allowed hover:text-gray-300" : "",
 						]}
 					>
@@ -28,7 +33,51 @@ const pages = [
 				</>
 			))
 		}
-		<HamburgerButton class:list={`block lg:hidden`} />
+		<DrawnXLogo class:list={`block w-10 lg:hidden`} />
+		<HamburgerButton class:list={`block lg:hidden`} id="menuButton" />
+		<div
+			class="absolute inset-0 z-[888] flex h-screen w-screen flex-col items-center overflow-x-auto bg-[var(--background-color)] px-10 lg:hidden"
+			id="menuMobileContent"
+		>
+			<aside class="flex min-h-16 w-full items-center justify-between">
+				<span class="text-xl font-semibold uppercase text-primary">Menú</span>
+				<HamburgerButton id="innerMenuButton" />
+			</aside>
+			<div class="flex min-h-2 w-full items-center">
+				<hr
+					class="h-[2px] w-full border-t-0"
+					style="background:linear-gradient(to right, transparent 0%, white 50%, transparent 100%)"
+				/>
+			</div>
+			<nav class="flex w-full flex-col items-center gap-5">
+				<img src="img/lvda.webp" class="accent-drop-shadow my-4 max-w-60 drop-shadow-lg" />
+				<hr
+					class="h-[2px] w-full border-t-0"
+					style="background:linear-gradient(to right, transparent 0%, white 50%, transparent 100%)"
+				/>
+				{
+					pages.map(({ disabled, name, href }, key) => (
+						<>
+							<a
+								href={disabled ? "" : href}
+								class="flex flex-col items-center justify-center gap-2 text-xl capitalize"
+							>
+								<span class="z-10 uppercase text-primary">{name}</span>
+								{disabled && <span class="text-accent">Próximamente</span>}
+							</a>
+							<hr
+								class="h-[2px] w-full border-t-0"
+								style="background:linear-gradient(to right, transparent 0%, white 50%, transparent 100%)"
+							/>
+						</>
+					))
+				}
+				<nav class="my-4 flex flex-col gap-10">
+					<FooterContent />
+					<SocialButtons class="flex items-center justify-center" />
+				</nav>
+			</nav>
+		</div>
 	</nav>
 	<div class="relative flex h-2 w-full flex-col items-center">
 		<div class="absolute flex h-full w-full items-center">
@@ -36,7 +85,7 @@ const pages = [
 				class="h-[2px] w-full border-t-0"
 				style="background:linear-gradient(to right, transparent 3%, white 35%, white 100%)"
 			/>
-			<HeroLogo class:list={`-mx-2 h-80 w-auto`} noEffect />
+			<HeroLogo class:list={`-mx-2 h-60 w-auto lg:-ml-5 lg:h-80`} noEffect />
 			<hr
 				class="h-[2px] w-full border-t-0"
 				style="background:linear-gradient(to left, transparent 3%, white 35%, white 100%)"
@@ -59,4 +108,39 @@ const pages = [
 	.nav-item:hover .background {
 		opacity: 1;
 	}
+
+	#menuMobileContent {
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 0.3s;
+	}
+
+	#menuMobileContent.open {
+		opacity: 1 !important;
+		pointer-events: all;
+	}
+
+	.accent-drop-shadow {
+		filter: drop-shadow(0px 0px 25px rgba(var(--color-accent-rgb), 0.25));
+	}
 </style>
+
+<script>
+	document.addEventListener("astro:page-load", () => {
+		const nav = document.querySelector("nav")
+		document
+			.querySelector("#menuButton")
+			?.addEventListener("hamburgerButtonClicked", () => toggleMenu(nav))
+		console.log(document.querySelector("#innerMenuButton"))
+		document.querySelector("#innerMenuButton")?.addEventListener("hamburgerButtonClicked", () => {
+			toggleMenu(nav)
+		})
+
+		function toggleMenu(nav: HTMLElement | null) {
+			console.log("toggleMenu")
+			document.querySelector("#menuMobileContent")?.classList.toggle("open")
+			nav?.classList.toggle("open")
+			document.body.classList.toggle("overflow-hidden")
+		}
+	})
+</script>
diff --git a/src/components/SocialButtons.astro b/src/components/SocialButtons.astro
new file mode 100644
index 000000000..6c1fd472a
--- /dev/null
+++ b/src/components/SocialButtons.astro
@@ -0,0 +1,52 @@
+---
+import GithubIcon from "@/icons/github.astro"
+import InstagramIcon from "@/icons/instagram.astro"
+import XIcon from "@/icons/x.astro"
+---
+
+<nav class={`${Astro.props.class}`}>
+	<ul
+		class="flex flex-row items-center gap-x-6"
+		aria-label="redes sociales y botón para alternar tema"
+	>
+		<li>
+			<a
+				target="_blank"
+				rel="noopener"
+				aria-label="Instagram de la velada, se abrirá en una nueva pestaña"
+				href="https://www.instagram.com/infolavelada"
+				class="inline-block any-hover:scale-125 any-hover:opacity-70 motion-safe:transition motion-reduce:any-hover:scale-100"
+			>
+				<InstagramIcon
+					class="text-primary transition-colors duration-300 hover:text-accent motion-reduce:duration-0"
+				/>
+			</a>
+		</li>
+		<li>
+			<a
+				target="_blank"
+				rel="noopener"
+				aria-label="X de la velada, se abrirá en una nueva pestaña"
+				href="https://x.com/infoLaVelada"
+				class="inline-block any-hover:scale-125 any-hover:opacity-70 motion-safe:transition motion-reduce:any-hover:scale-100"
+			>
+				<XIcon
+					class="text-primary transition-colors duration-300 hover:text-accent motion-reduce:duration-0"
+				/>
+			</a>
+		</li>
+		<li>
+			<a
+				target="_blank"
+				rel="noopener"
+				aria-label="Github de la velada, se abrirá en una nueva pestaña"
+				href="https://github.com/midudev/la-velada-web-oficial"
+				class="inline-block any-hover:scale-125 any-hover:opacity-70 motion-safe:transition motion-reduce:any-hover:scale-100"
+			>
+				<GithubIcon
+					class="text-primary transition-colors duration-300 hover:text-accent motion-reduce:duration-0"
+				/>
+			</a>
+		</li>
+	</ul>
+</nav>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 8cd734092..106d33b0b 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -47,6 +47,7 @@ const { title, description, preloadImgLCP } = Astro.props
 				--color-primary: #ddd;
 				--color-secondary: #333;
 				--color-accent: #d5ff00;
+				--color-accent-rgb: 213, 255, 0;
 
 				--background-color: #141800;
 				--background-twitch: var(--color-twitch-ice);
diff --git a/src/sections/Footer.astro b/src/sections/Footer.astro
index 5d8eb7997..2a0901465 100644
--- a/src/sections/Footer.astro
+++ b/src/sections/Footer.astro
@@ -1,8 +1,6 @@
 ---
-import Typography from "@/components/Typography.astro"
-import GithubIcon from "@/icons/github.astro"
-import InstagramIcon from "@/icons/instagram.astro"
-import XIcon from "@/icons/x.astro"
+import FooterContent from "@/components/FooterContent.astro"
+import SocialButtons from "@/components/SocialButtons.astro"
 ---
 
 <footer
@@ -11,60 +9,10 @@ import XIcon from "@/icons/x.astro"
 	<hr
 		class="absolute top-0 h-[2px] w-full min-w-[20rem] border-t-0 bg-transparent bg-gradient-to-r from-transparent via-white to-transparent bg-center md:my-9"
 	/>
-	<Typography as="span" variant="body" color="neutral" class:list={"text-center"}>
-		&copy; {new Date().getFullYear()} La Velada del Año <span
-			aria-hidden="true"
-			class="hidden md:inline">|</span
-		><br aria-hidden="true" class="block md:hidden" /> Todos los derechos reservados.
-	</Typography>
+	<FooterContent />
 	<hr
 		aria-hidden="true"
 		class="my-12 h-[2px] w-full min-w-[20rem] border-t-0 bg-transparent bg-gradient-to-r from-transparent via-white to-transparent bg-center md:hidden"
 	/>
-	<nav>
-		<ul
-			class="flex flex-row items-center gap-x-6"
-			aria-label="redes sociales y botón para alternar tema"
-		>
-			<li>
-				<a
-					target="_blank"
-					rel="noopener"
-					aria-label="Instagram de la velada, se abrirá en una nueva pestaña"
-					href="https://www.instagram.com/infolavelada"
-					class="inline-block any-hover:scale-125 any-hover:opacity-70 motion-safe:transition motion-reduce:any-hover:scale-100"
-				>
-					<InstagramIcon
-						class="text-primary transition-colors duration-300 hover:text-accent motion-reduce:duration-0"
-					/>
-				</a>
-			</li>
-			<li>
-				<a
-					target="_blank"
-					rel="noopener"
-					aria-label="X de la velada, se abrirá en una nueva pestaña"
-					href="https://x.com/infoLaVelada"
-					class="inline-block any-hover:scale-125 any-hover:opacity-70 motion-safe:transition motion-reduce:any-hover:scale-100"
-				>
-					<XIcon
-						class="text-primary transition-colors duration-300 hover:text-accent motion-reduce:duration-0"
-					/>
-				</a>
-			</li>
-			<li>
-				<a
-					target="_blank"
-					rel="noopener"
-					aria-label="Github de la velada, se abrirá en una nueva pestaña"
-					href="https://github.com/midudev/la-velada-web-oficial"
-					class="inline-block any-hover:scale-125 any-hover:opacity-70 motion-safe:transition motion-reduce:any-hover:scale-100"
-				>
-					<GithubIcon
-						class="text-primary transition-colors duration-300 hover:text-accent motion-reduce:duration-0"
-					/>
-				</a>
-			</li>
-		</ul>
-	</nav>
+	<SocialButtons />
 </footer>

From d5ccf5d792bebbdb5f75d82fa4c106af417797be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joel=20Mart=C3=ADnez?= <joel.mh112@gmail.com>
Date: Wed, 13 Mar 2024 22:29:11 +0100
Subject: [PATCH 4/6] [REFACTOR] hamburgerButton

---
 src/components/HamburgerButton.astro | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/HamburgerButton.astro b/src/components/HamburgerButton.astro
index b62f96092..74a9285f4 100644
--- a/src/components/HamburgerButton.astro
+++ b/src/components/HamburgerButton.astro
@@ -5,26 +5,31 @@ const genericHamburgerLine = `h-[2px] ${width} bg-gray-300 transition ease trans
 
 <button
 	id={Astro.props.id}
-	class={`group flex h-[20px] ${width} flex-col items-center justify-between lg:hidden relative hamburgerButton`}
+	class:list={[
+		`hamburgerButton group relative flex h-[20px] flex-col items-center justify-between lg:hidden`,
+		width,
+	]}
 	aria-label="hamburguer menu button"
 >
-	<div
-		class={`${genericHamburgerLine}  group-hover:opacity-100 group-[.open]:translate-y-2 group-[.open]:rotate-45 group-[.open]:group-hover:opacity-100`}
-	>
+	<div class:list={[`group-[.open]:translate-y-2 group-[.open]:rotate-45`, genericHamburgerLine]}>
 	</div>
-	<div class={`${genericHamburgerLine} group-[.open]:opacity-0 group-hover:opacity-100}`}></div>
-	<div class={`${genericHamburgerLine} group-[.open]:opacity-0 group-hover:opacity-100}`}></div>
+	<div class:list={[`group-[.open]:opacity-0`, genericHamburgerLine]}></div>
+	<div class:list={[`group-[.open]:opacity-0`, genericHamburgerLine]}></div>
 	<div
-		class={`${genericHamburgerLine} group-[.open]:-translate-y-[0.6rem] group-[.open]:-rotate-45 group-[.open]:group-hover:opacity-100 group-hover:opacity-100`}
+		class:list={[
+			`group-[.open]:-translate-y-[0.6rem] group-[.open]:-rotate-45 `,
+			genericHamburgerLine,
+		]}
 	>
 	</div>
 </button>
 
 <script>
+	import { $, $$ } from "@/consts/dom-selector"
 	document.addEventListener("astro:page-load", () => {
-		document.querySelectorAll(".hamburgerButton").forEach((button) => {
+		$$(".hamburgerButton").forEach((button) => {
 			button.addEventListener("click", () => {
-				const hamburgerButton = document.querySelector(".hamburgerButton")
+				const hamburgerButton = $(".hamburgerButton")
 				hamburgerButton?.classList.toggle("open")
 				hamburgerButton?.dispatchEvent(new CustomEvent("hamburgerButtonClicked"))
 			})

From 4fae4d11b54b9e82bf571b72c61a7be21545fa20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joel=20Mart=C3=ADnez?= <joel.mh112@gmail.com>
Date: Wed, 13 Mar 2024 22:36:00 +0100
Subject: [PATCH 5/6] [REFACTOR] header

---
 src/components/Header.astro | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 5703de6f9..b06c38834 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -22,12 +22,16 @@ const pages = [
 					<a
 						href={disabled ? "" : href}
 						class:list={[
-							"nav-item relative hidden h-full select-none items-center justify-center px-10 text-xl uppercase text-white lg:flex",
-							disabled ? "cursor-not-allowed hover:text-gray-300" : "",
+							"nav-item relative hidden h-full select-none flex-col items-center justify-center gap-1 px-10 text-xl uppercase text-white lg:flex",
+							{ "cursor-not-allowed": disabled },
 						]}
 					>
 						<span class="z-10">{name}</span>
-						<div class="background absolute -z-10 h-full w-full" />
+						{disabled ? (
+							<span class="absolute mt-10 -skew-x-6 text-xs text-accent">Próximamente</span>
+						) : (
+							<div class="background absolute -z-10 h-full w-full" />
+						)}
 					</a>
 					{key == 1 && <div class={`hidden w-64 lg:block`} />}
 				</>
@@ -59,7 +63,7 @@ const pages = [
 					pages.map(({ disabled, name, href }, key) => (
 						<>
 							<a
-								href={disabled ? "" : href}
+								href={href}
 								class="flex flex-col items-center justify-center gap-2 text-xl capitalize"
 							>
 								<span class="z-10 uppercase text-primary">{name}</span>
@@ -126,19 +130,17 @@ const pages = [
 </style>
 
 <script>
+	import { $, $$ } from "@/consts/dom-selector"
 	document.addEventListener("astro:page-load", () => {
-		const nav = document.querySelector("nav")
-		document
-			.querySelector("#menuButton")
-			?.addEventListener("hamburgerButtonClicked", () => toggleMenu(nav))
-		console.log(document.querySelector("#innerMenuButton"))
-		document.querySelector("#innerMenuButton")?.addEventListener("hamburgerButtonClicked", () => {
-			toggleMenu(nav)
-		})
+		const nav = $("nav")
+		const menuButton = $("#menuButton")
+		const innerMenuButton = $("#innerMenuButton")
+
+		menuButton?.addEventListener("hamburgerButtonClicked", () => toggleMenu(nav))
+		innerMenuButton?.addEventListener("hamburgerButtonClicked", () => toggleMenu(nav))
 
 		function toggleMenu(nav: HTMLElement | null) {
-			console.log("toggleMenu")
-			document.querySelector("#menuMobileContent")?.classList.toggle("open")
+			$("#menuMobileContent")?.classList.toggle("open")
 			nav?.classList.toggle("open")
 			document.body.classList.toggle("overflow-hidden")
 		}

From 79d701540d65e460a0623951b0fee1bbf2d2fe7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joel=20Mart=C3=ADnez?= <joel.mh112@gmail.com>
Date: Wed, 13 Mar 2024 22:41:19 +0100
Subject: [PATCH 6/6] [FIX] logo to "/" and disabled pointer events none mobile

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

diff --git a/src/components/Header.astro b/src/components/Header.astro
index b06c38834..7f54757f0 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -37,7 +37,7 @@ const pages = [
 				</>
 			))
 		}
-		<DrawnXLogo class:list={`block w-10 lg:hidden`} />
+		<a href="/"><DrawnXLogo class:list={`block w-10 lg:hidden`} /></a>
 		<HamburgerButton class:list={`block lg:hidden`} id="menuButton" />
 		<div
 			class="absolute inset-0 z-[888] flex h-screen w-screen flex-col items-center overflow-x-auto bg-[var(--background-color)] px-10 lg:hidden"
@@ -64,7 +64,10 @@ const pages = [
 						<>
 							<a
 								href={href}
-								class="flex flex-col items-center justify-center gap-2 text-xl capitalize"
+								class:list={[
+									"flex flex-col items-center justify-center gap-2 text-xl capitalize",
+									{ "pointer-events-none": disabled },
+								]}
 							>
 								<span class="z-10 uppercase text-primary">{name}</span>
 								{disabled && <span class="text-accent">Próximamente</span>}