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: 0.2px 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%)
    }

    #divider.minimized {
        display: none;
    }
`)

register(
    
class AppMenu extends Shadow {
    selected;

    constructor(selected) {
        super()
        this.selected = selected
    }

    render() {
        VStack(() => {
            HStack(() => {
                p("Forum")
                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")