97 lines
2.6 KiB
JavaScript
97 lines
2.6 KiB
JavaScript
css(`
|
|
app-menu img:hover {
|
|
opacity: 0.8;
|
|
}
|
|
`)
|
|
|
|
register(
|
|
|
|
class AppMenu extends Shadow {
|
|
selected;
|
|
|
|
constructor(selected) {
|
|
super()
|
|
this.selected = selected
|
|
}
|
|
|
|
render() {
|
|
VStack(() => {
|
|
|
|
function cssVariable(value) {
|
|
return getComputedStyle(document.documentElement)
|
|
.getPropertyValue("--" + value)
|
|
.trim();
|
|
}
|
|
HStack(() => {
|
|
img(cssVariable("house-src"), "1.5em")
|
|
img(cssVariable("people-src"), "1.7em")
|
|
})
|
|
.justifyContent("center")
|
|
.gap(3.5, em)
|
|
.paddingRight(2, em)
|
|
})
|
|
.position("fixed")
|
|
.x(0).yBottom(0)
|
|
.width(100, vw)
|
|
.paddingVertical(1, em)
|
|
.borderTop("0.5px solid var(--accent)")
|
|
.onNavigate(() => {
|
|
if(window.location.pathname === "/") {
|
|
this.styleMaximized()
|
|
$("app-window").close()
|
|
} else {
|
|
this.styleMinimized()
|
|
$("app-window").open(this.selected)
|
|
}
|
|
})
|
|
.onAppear(() => {
|
|
Array.from(this.querySelectorAll("img")).forEach((el) => {
|
|
el.addEventListener("mousedown", (e) => {
|
|
el.classList.add("touched")
|
|
})
|
|
})
|
|
window.addEventListener("mouseup", (e) => {
|
|
let target = e.target
|
|
if(!target.matches("app-menu img")) {
|
|
return
|
|
}
|
|
|
|
target.classList.remove("touched")
|
|
|
|
if(target.classList.contains("selected")) {
|
|
this.selected = ""
|
|
window.navigateTo("/")
|
|
} else {
|
|
this.selected = target.innerText
|
|
window.navigateTo("/app/" + target.innerText.toLowerCase())
|
|
}
|
|
})
|
|
})
|
|
|
|
if(this.selected) {
|
|
this.styleMinimized()
|
|
}
|
|
}
|
|
|
|
styleMaximized() {
|
|
$$("app-menu p").forEach((el) => {
|
|
el.classList.remove("selected")
|
|
})
|
|
this.classList.remove("minimized")
|
|
$("#divider").style.display = ""
|
|
}
|
|
|
|
styleMinimized() {
|
|
$$("app-menu p").forEach((el) => {
|
|
if(el.innerText !== this.selected) {
|
|
el.classList.remove("selected")
|
|
} else {
|
|
el.classList.add("selected")
|
|
}
|
|
})
|
|
this.classList.add("minimized")
|
|
$("#divider").style.display = "none"
|
|
}
|
|
}
|
|
|
|
, "app-menu") |