65 lines
2.2 KiB
JavaScript
65 lines
2.2 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"}
|
|
}
|
|
|
|
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)
|
|
.paddingBottom(currentApp === app ? 4 : 5, px)
|
|
.borderBottom(currentApp === app ? "1px solid var(--accent)" : "")
|
|
.onClick((done) => {
|
|
if(done) global.openApp(app)
|
|
})
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.opacity = 0.8
|
|
} else {
|
|
this.style.opacity = ""
|
|
}
|
|
})
|
|
}
|
|
})
|
|
.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.rerender()
|
|
})
|
|
.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") |