55 lines
1.6 KiB
JavaScript
55 lines
1.6 KiB
JavaScript
class NavBar extends Shadow {
|
|
NavButton(text) {
|
|
|
|
function normalizeText(text) {
|
|
return text.toLowerCase().replace(/[\s?]+/g, "");
|
|
}
|
|
|
|
function isSelected(el) {
|
|
return ("/" + normalizeText(el.innerText)) === window.location.pathname
|
|
}
|
|
|
|
return p(text)
|
|
.cursor("default")
|
|
.textUnderlineOffset(0.5, em)
|
|
.onAppear(function() {
|
|
this.style.textDecoration = isSelected(this) ? "underline" : ""
|
|
})
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.textDecoration = "underline"
|
|
} else if(!isSelected(this)) {
|
|
this.style.textDecoration = ""
|
|
}
|
|
})
|
|
.onClick(function (done) {
|
|
if(done) {
|
|
if(!isSelected(this)) {
|
|
window.navigateTo(normalizeText(this.innerText))
|
|
} else {
|
|
window.navigateTo("/")
|
|
}
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
render() {
|
|
HStack(() => {
|
|
this.NavButton("WHY?")
|
|
this.NavButton("EVENTS")
|
|
div().width(2.5, em).height(2.5, em)
|
|
this.NavButton("JOIN")
|
|
this.NavButton("SIGN IN")
|
|
})
|
|
.x(50, vw).y(4, em)
|
|
.center()
|
|
.fontSize(0.85, em)
|
|
.justifyContent("center")
|
|
.gap(3, em)
|
|
.paddingRight(2, em)
|
|
.width(50, vw)
|
|
}
|
|
}
|
|
|
|
register(NavBar) |