73 lines
2.7 KiB
JavaScript
73 lines
2.7 KiB
JavaScript
class Sidebar extends Shadow {
|
|
|
|
toggleSelectedStyles(el) {
|
|
let currentlySelected = $("img[selected]")
|
|
if(currentlySelected) {
|
|
currentlySelected.removeAttribute("selected")
|
|
currentlySelected.style.borderLeft = ""
|
|
currentlySelected.style.paddingLeft = "10px"
|
|
}
|
|
|
|
el.setAttribute("selected", "")
|
|
el.style.borderLeft = "1px solid var(--accent)"
|
|
el.style.paddingLeft = "9px"
|
|
}
|
|
|
|
render() {
|
|
VStack(() => {
|
|
let selected = window.location.pathname.startsWith("/my")
|
|
|
|
img(document.documentElement.classList.contains("red") ? "/_/icons/column.svg" : "/_/icons/columnred.svg", "2.5em", "2.5em")
|
|
.marginTop(6, vh)
|
|
.marginBottom(2, vh)
|
|
.attr({selected: selected ? "" : null})
|
|
.paddingLeft(selected ? 9 : 10, px)
|
|
.borderLeft(selected ? "1px solid var(--accent)" : "0")
|
|
.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")
|
|
}
|
|
})
|
|
|
|
let networks = global.profile.networks
|
|
for(let i=0; i<networks.length; i++) {
|
|
let selected = window.location.pathname.startsWith("/" + networks[i].abbreviation)
|
|
|
|
img(`/db/images/${networks[i].logo}`, "2.25em", "2.25em")
|
|
.marginTop(3, vh)
|
|
.attr({selected: selected ? "" : null})
|
|
.paddingLeft(selected ? 9 : 10, px)
|
|
.borderLeft(selected ? "1px solid var(--accent)" : "0")
|
|
.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(`/${networks[i].abbreviation}`)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
.paddingLeft(1.5, em)
|
|
.paddingRight(1, em)
|
|
.position("fixed")
|
|
.x(0).y(0)
|
|
.height(100, vh)
|
|
.zIndex(3)
|
|
.onEvent("themechange", () => {
|
|
console.log("why is this needed smg")
|
|
this.rerender()
|
|
})
|
|
}
|
|
}
|
|
|
|
register(Sidebar) |