90 lines
2.4 KiB
Plaintext
90 lines
2.4 KiB
Plaintext
package components
|
|
|
|
import (
|
|
"fmt"
|
|
)
|
|
|
|
type Link struct {
|
|
Text string
|
|
Link templ.SafeURL
|
|
}
|
|
|
|
templ Nav(links []Link) {
|
|
<div
|
|
aria-hidden="true"
|
|
class="h-0 w-0 pointer-events-none bg-transparent!"
|
|
>
|
|
<div
|
|
class="fixed left-0 top-0 w-screen z-100"
|
|
>
|
|
<div class="h-4rem bg-black z-100"></div>
|
|
<div class="h-10vh bg-transparent bg-gradient-to-b from-black z-100"></div>
|
|
</div>
|
|
</div>
|
|
<section
|
|
class="flex flex-row justify-between fixed top-0 font-cal w-90% lg:w-80% xl:w-90% z-110"
|
|
>
|
|
<p
|
|
class="text-gray contrast-more:text-light-gray cannot-hover md:block!"
|
|
>
|
|
Gustavo "Guz" L. de Mello
|
|
</p>
|
|
<p
|
|
class="text-gray contrast-more:text-light-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">
|
|
<a
|
|
class={ "text-gray contrast-more:text-light-gray hover:text-white " +
|
|
"no-underline hover:underline transition-color transition-1s" }
|
|
id={ fmt.Sprintf("nav-anchor-%s", i.Link) }
|
|
href={ i.Link }
|
|
>
|
|
{ i.Text }
|
|
</a>
|
|
</li>
|
|
}
|
|
</ul>
|
|
</nav>
|
|
</section>
|
|
<button
|
|
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={ "fixed pb-10 p-5 m-0 b-0 h-100vh bg-black/97 shadow-black shadow-2xl z-10 " +
|
|
"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
|
|
>
|
|
<div class="text-right h-100% w-100% flex flex-col-reverse">
|
|
<ul class="flex flex-col h-fit gap-3 font-cal text-xl pl-0 text-gray list-none">
|
|
for _, i := range links {
|
|
<li
|
|
class={ "hover:text-white transform-gpu hover:-translate-y-0.2 " +
|
|
"transition-transform after:content-['@'] " +
|
|
"after:pl-4 after:i-solar:posts-carousel-vertical-line-duotone" }
|
|
>
|
|
<a
|
|
class={ "text-gray hover:text-white no-underline " +
|
|
"hover:underline transition-color transition-1s" }
|
|
id={ fmt.Sprintf("nav-anchor-touch-%s", i.Link) }
|
|
href={ i.Link }
|
|
>
|
|
{ i.Text }
|
|
</a>
|
|
</li>
|
|
}
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
}
|