90 lines
3.0 KiB
JavaScript
90 lines
3.0 KiB
JavaScript
class AppMenu extends Shadow {
|
|
|
|
images = {
|
|
"Dashboard": {src: "house-src", size: "1.5em"},
|
|
"People": {src: "people-src", size: "1.7em"},
|
|
"Settings": {src: "settings-src", size: "1.7em"}
|
|
}
|
|
|
|
unselectedIconStyle(el) {
|
|
return el
|
|
.paddingBottom(5, px)
|
|
.borderBottom("")
|
|
}
|
|
|
|
selectedIconStyle(el) {
|
|
return el
|
|
.paddingBottom(4, px)
|
|
.borderBottom("1px solid var(--accent)")
|
|
}
|
|
|
|
onAppChange() {
|
|
let icons = this.$$("img")
|
|
icons.forEach((icon) => {
|
|
icon.styles(this.unselectedIconStyle)
|
|
})
|
|
let selected = this.$(`img[app="${global.currentApp}"]`)
|
|
selected.styles(this.selectedIconStyle)
|
|
}
|
|
|
|
render() {
|
|
VStack(() => {
|
|
function cssVariable(value) {
|
|
return getComputedStyle(document.documentElement)
|
|
.getPropertyValue("--" + value)
|
|
.trim();
|
|
}
|
|
|
|
HStack(() => {
|
|
let currentNetwork = global.currentNetwork
|
|
if(!currentNetwork) return
|
|
let currentApp = global.currentApp
|
|
|
|
for(let i = 0; i < currentNetwork.apps.length; i++) {
|
|
let app = currentNetwork.apps[i]
|
|
img(cssVariable(this.images[app].src), this.images[app].size)
|
|
.attr({app: app})
|
|
.padding(0.3, em)
|
|
.styles(currentApp === app ? this.selectedIconStyle : this.unselectedIconStyle)
|
|
.onClick(function (done) {
|
|
if(!done) {
|
|
this.style.transform = "translateY(10%)"
|
|
} else {
|
|
this.style.transform = ""
|
|
global.openApp(app)
|
|
}
|
|
})
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.translateY = -0.1
|
|
} else {
|
|
this.style.translateY = ""
|
|
}
|
|
})
|
|
.cursor("pointer")
|
|
}
|
|
})
|
|
.justifyContent("center")
|
|
.gap(3.5, em)
|
|
.paddingRight(2, em)
|
|
})
|
|
.onEvent("themechange", () => {
|
|
this.rerender()
|
|
})
|
|
.onEvent("appchange", () => {
|
|
// console.log("app hello?") // BUG: Quill is not acknowledging this event unless there is something else in the function body
|
|
this.onAppChange()
|
|
})
|
|
.onEvent("networkchange", () => {
|
|
// console.log(global.currentApp)
|
|
this.rerender()
|
|
})
|
|
.position("fixed")
|
|
.x(0).yBottom(0)
|
|
.width(100, vw)
|
|
.height(2.5, em)
|
|
.paddingVertical(0.7, em)
|
|
}
|
|
}
|
|
|
|
register(AppMenu, "app-menu") |