css(`
    app-menu {
        color: var(--tan);
        transform: translateX(-50%);
        transition: transform .3s;
        display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2.3em;
    }

    app-menu.minimized {
        color: var(--accent);
        transform: translate(-50%, 65%);
        border: 1px solid var(--accent);
        padding-left: 2em; padding-right: 2em;
        border-radius: 12px;
    }
`)

registerShadow(
    
class AppMenu extends Shadow {

    render() {
        p("Messages")
        p("Market")
        p("Security")
        p("Jobs")
    }

    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-manu").classList.remove("minimized")
                $("#divider").classList.remove("minimized")
                $("app-window").close()
            } else {
                target.classList.add("selected")
                $("app-manu").classList.add("minimized")
                $("#divider").classList.add("minimized")
                $("app-window").open(target.innerText)
            }
        })
    }
}

, "app-menu")