nicer buttons

This commit is contained in:
metacryst
2026-02-28 04:56:19 -06:00
parent 21f654bbed
commit bdd260c2b5
5 changed files with 48 additions and 24 deletions

View File

@@ -14,7 +14,7 @@ class AppMenu extends Shadow {
.getPropertyValue("--" + value)
.trim();
}
HStack(() => {
let currentNetwork = global.currentNetwork
if(!currentNetwork) return
@@ -27,16 +27,22 @@ class AppMenu extends Shadow {
.padding(0.3, em)
.paddingBottom(currentApp === app ? 4 : 5, px)
.borderBottom(currentApp === app ? "1px solid var(--accent)" : "")
.onClick((done) => {
if(done) global.openApp(app)
.onClick(function (done) {
if(!done) {
this.style.transform = "translateY(10%)"
} else {
this.style.transform = ""
global.openApp(app)
}
})
.onHover(function (hovering) {
if(hovering) {
this.style.opacity = 0.8
this.style.translateY = -0.1
} else {
this.style.opacity = ""
this.style.translateY = ""
}
})
.cursor("pointer")
}
})
.justifyContent("center")

View File

@@ -21,12 +21,16 @@ class Sidebar extends Shadow {
.marginTop(6, vh)
.marginBottom(2, vh)
.attr({selected: selected ? "" : null})
.paddingRight(0.5, em)
.paddingLeft(selected ? 9 : 10, px)
.borderLeft(selected ? "1px solid var(--accent)" : "0")
.onClick((done, e) => {
if(done) {
this.toggleSelectedStyles(e.target)
.cursor("pointer")
.transition("transform .1s")
.onClick(function (done, e) {
if(!done) {
this.style.transform = "translateX(-10%)"
} else {
this.style.transform = ""
this.parentShadow().toggleSelectedStyles(e.target)
window.navigateTo("/my")
}
})
@@ -38,23 +42,19 @@ class Sidebar extends Shadow {
img(`/db/images/${networks[i].logo}`, "2.25em", "2.25em")
.marginTop(3, vh)
.attr({selected: selected ? "" : null})
.paddingRight(0.5, em)
.paddingLeft(selected ? 9 : 10, px)
.borderLeft(selected ? "1px solid var(--accent)" : "0")
.onHover(function (hovering) {
if(hovering) {
this.style.opacity = 0.8
.cursor("pointer")
.transition("transform .1s")
.onClick(function (done, e) {
if(!done) {
this.style.transform = "translateX(-10%)"
} else {
this.style.opacity = ""
}
})
.onClick((done, e) => {
if(done) {
this.toggleSelectedStyles(e.target)
this.style.transform = ""
this.parentShadow().toggleSelectedStyles(e.target)
window.navigateTo(`/${networks[i].abbreviation}`)
}
})
.cursor("default")
}
})
.paddingLeft(1.5, em)