135 lines
3.4 KiB
JavaScript
135 lines
3.4 KiB
JavaScript
css(`
|
|
app-menu {
|
|
color: var(--tan);
|
|
transform: translateX(-50%);
|
|
transition: transform .3s;
|
|
display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2em;
|
|
}
|
|
|
|
app-menu.minimized {
|
|
color: var(--accent);
|
|
transform: translate(-50%, 65%);
|
|
border: 1px solid var(--accent);
|
|
padding-top: 0.5em;
|
|
padding-left: 2em;
|
|
padding-right: 2em;
|
|
padding-bottom: 4em;
|
|
bottom: 1em;
|
|
border-radius: 12px;
|
|
background-color: var(--green);
|
|
}
|
|
|
|
app-menu p {
|
|
cursor: default;
|
|
transition: transform .3s, text-decoration .3s;
|
|
padding: 0.5em;
|
|
border-radius: 5px;
|
|
text-underline-offset: 5px;
|
|
}
|
|
app-menu p:hover {
|
|
text-decoration: underline;
|
|
transform: translateY(-5%)
|
|
}
|
|
app-menu p.touched {
|
|
text-decoration: underline;
|
|
transform: translateY(0%)
|
|
}
|
|
app-menu p.selected {
|
|
text-decoration: underline;
|
|
transform: translateY(-10%)
|
|
}
|
|
|
|
#divider.minimized {
|
|
display: none;
|
|
}
|
|
`)
|
|
|
|
register(
|
|
|
|
class AppMenu extends Shadow {
|
|
selected;
|
|
|
|
constructor(selected) {
|
|
super()
|
|
this.selected = selected
|
|
}
|
|
|
|
render() {
|
|
VStack(() => {
|
|
HStack(() => {
|
|
p("Forum")
|
|
p("Tasks")
|
|
p("Messages")
|
|
p("Market")
|
|
p("Jobs")
|
|
})
|
|
.justifyContent("center")
|
|
.gap(1.5, em)
|
|
.paddingRight(2, em)
|
|
|
|
img("/_/images/divider.svg", "40vw")
|
|
.attr({
|
|
"id": "divider",
|
|
})
|
|
})
|
|
.gap(0.5, em)
|
|
.onNavigate(() => {
|
|
if(window.location.pathname === "/") {
|
|
this.styleMaximized()
|
|
$("app-window").close()
|
|
} else {
|
|
this.styleMinimized()
|
|
$("app-window").open(this.selected)
|
|
}
|
|
})
|
|
.onAppear(() => {
|
|
Array.from(this.querySelectorAll("p")).forEach((el) => {
|
|
el.addEventListener("mousedown", (e) => {
|
|
el.classList.add("touched")
|
|
})
|
|
})
|
|
window.addEventListener("mouseup", (e) => {
|
|
let target = e.target
|
|
if(!target.matches("app-menu p")) {
|
|
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") |