dot013/guz.one
1
0
Fork 0
Code Issues Pull Requests Activity

fix: mobile menu appearing in desktop

Browse Source
This commit is contained in:
Gustavo "Guz" L. de Mello
2024-05-29 16:16:34 -03:00
parent a2a86d7f32
commit baac9b8642
1 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/nav.templ
View File

@@ -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