From baac9b86421bc94149bbe411f99bb109a2f2bf01 Mon Sep 17 00:00:00 2001
From: "Gustavo \"Guz\" L. de Mello" <contact.guz013@gmail.com>
Date: Wed, 29 May 2024 16:16:34 -0300
Subject: [PATCH] fix: mobile menu appearing in desktop

---
 components/nav.templ | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/nav.templ b/components/nav.templ
index 790e384..78a3720 100644
--- a/components/nav.templ
+++ b/components/nav.templ
@@ -10,9 +10,10 @@ type Link struct {
 }
 
 templ Nav(links []Link) {
-	<section class="lg:flex lg:flex-row lg:justify-between fixed top-0 font-cal w-90% lg:w-80% xl:w-90%">
-		<p class="text-gray">Gustavo "Guz" L. de Mello</p>
-		<nav class="hidden lg:block">
+	<section class="flex flex-row justify-between fixed top-0 font-cal w-90% lg:w-80% xl:w-90%">
+		<p class="text-gray cannot-hover md:block!">Gustavo "Guz" L. de Mello</p>
+		<p class="text-gray can-hover md:hidden">Guz</p>
+		<nav class="can-hover">
 			<ul class="flex flex-row gap-3 list-none">
 				for _, i := range links {
 					<li class="transform-gpu hover:-translate-y-0.2 transition-transform">
@@ -30,15 +31,15 @@ templ Nav(links []Link) {
 		</nav>
 	</section>
 	<button
-		class={ "block lg:hidden p-0.3 bg-black/97 b-0 m-0 outline-0 shadow-2xl " +
-		"fixed bottom-5 right-5 text-gray z-100" }
+		class={ "block p-0.3 bg-black/97 b-0 m-0 outline-0 shadow-2xl " +
+		"fixed bottom-5 right-5 text-gray z-100 cannot-hover" }
 		popovertarget="nav-popover"
 	>
 		<span class="i-solar:hamburger-menu-broken w-2rem h-2rem block">Menu</span>
 	</button>
 	<nav
-		class={ "lg:hidden absolute pb-10 p-5 m-0 b-0 h-100vh bg-black/97 shadow-black shadow-2xl z-1 " +
-		"animate slide-from-r fade-in overflow-hidden" }
+		class={ "absolute pb-10 p-5 m-0 b-0 h-100vh bg-black/97 shadow-black shadow-2xl z-1 " +
+		"animate slide-from-r fade-in overflow-hidden cannot-hover" }
 		style="inset: unset; bottom: 0; right: 0; --anim-duration: 300ms; --anim-slide-from-x: 50%;"
 		id="nav-popover"
 		popover