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

feat: navigation menu

Browse Source
This commit is contained in:
Gustavo "Guz" L. de Mello
2024-05-28 19:17:38 -03:00
parent 9043cba830
commit 7f431aed5b
3 changed files with 81 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
components/nav.templ Normal file
View File

@@ -0,0 +1,67 @@
package components
import (
"fmt"
)
type Link struct {
Text string
Link templ.SafeURL
}
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">
<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 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 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" }
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" }
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-%s", i.Link) }
href={ i.Link }
>
{ i.Text }
</a>
</li>
}
</ul>
</div>
</nav>
}

7
pages/homepage.templ
View File

@@ -7,6 +7,13 @@ import (
templ Homepage() {
@layouts.Page("013") {
@components.Nav([]components.Link{
{Text: "about", Link: templ.SafeURL("#about")},
{Text: "projects", Link: templ.SafeURL("#projects")},
{Text: "gallery", Link: templ.SafeURL("#gallery")},
{Text: "blog", Link: templ.SafeURL("#blog")},
{Text: "contact", Link: templ.SafeURL("#contact")},
})
<header
class="flex flex-col lg:flex-row lg:justify-between lg:gap-5rem w-90% lg:w-80% xl:w-60%"
style="--anim-slide-from-y: 10px; --anim-delay: 120ms; --anim-duration: 0.6s;"

11
static/global.css
View File

@@ -17,14 +17,13 @@
from {
opacity: var(--anim-fade-from, 1);
transform:
translateY(var(--anim-slide-from-y, 0))
translateX(var(--anim-slide-from-x, 0));
translateY(var(--anim-slide-from-y, 0)) translateX(var(--anim-slide-from-x, 0));
}
to {
opacity: var(--anim-fade-to, 1);
transform:
translateY(var(--anim-slide-to-y, 0))
translateX(var(--anim-slide-to-x, 0));
translateY(var(--anim-slide-to-y, 0)) translateX(var(--anim-slide-to-x, 0));
}
}
@@ -44,3 +43,7 @@
.slide-from-b {
--anim-slide-from-y: 1.7rem;
}
.slide-from-r {
--anim-slide-from-x: 1.7rem;
}