85 lines
2.3 KiB
JavaScript
85 lines
2.3 KiB
JavaScript
css(`
|
|
app-menu {
|
|
color: var(--tan);
|
|
transform: translateX(-50%);
|
|
transition: transform .3s;
|
|
display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 3em;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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%)
|
|
}
|
|
`)
|
|
|
|
registerShadow(
|
|
|
|
class AppMenu extends Shadow {
|
|
|
|
render() {
|
|
p("Forum")
|
|
p("Messages")
|
|
p("Market")
|
|
}
|
|
|
|
connectedCallback() {
|
|
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
|
|
}
|
|
$$("app-menu p").forEach((el) => {
|
|
if(el.innerText !== target.innerText) {
|
|
el.classList.remove("selected")
|
|
}
|
|
})
|
|
|
|
target.classList.remove("touched")
|
|
if(target.classList.contains("selected")) {
|
|
target.classList.remove("selected")
|
|
$("app-menu").classList.remove("minimized")
|
|
$("#divider").classList.remove("minimized")
|
|
$("app-window").close()
|
|
} else {
|
|
target.classList.add("selected")
|
|
$("app-menu").classList.add("minimized")
|
|
$("#divider").classList.add("minimized")
|
|
$("app-window").open(target.innerText)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
, "app-menu") |