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")