class AppMenu extends Shadow {
    selected = ""

    onNewSelection() {
        this.$$("img").forEach((image) => {
            image.style.background = ""
        })
    }

    render() {
        HStack(() => {
            img("/_/icons/House.svg", "1.5em", "1.5em")
                .attr({app: "forum"})
                .padding(0.5, em)
                .borderRadius(10, px)
                .onAppear(function () {
                    this.style.border = "1px solid black"
                })
                .onClick((finished, e) => {
                    if(finished) {
                        this.onNewSelection()
                    }
                    e.target.style.background = "var(--bone)"
                    if(finished) {
                        window.navigateTo("/")
                    }
                })
            img("/_/icons/people.svg", "1.5em", "1.5em")
                .attr({app: "messages"})
                .padding(0.5, em)
                .borderRadius(10, px)
                .onAppear(function () {
                    this.style.border = "1px solid black"
                })
                .onClick((finished, e) => {
                    if(finished) {
                        this.onNewSelection()
                    }
                    e.target.style.background = "rgb(112 150 114)"
                    if(finished) {
                        window.navigateTo("/messages")
                    }
                })
        })
        .borderTop("1px solid black")
        .height("auto")
        .position('fixed')
        .background("var(--main)")
        .zIndex(1)
        .x(0).yBottom(0)
        .justifyContent("space-between")
        .paddingHorizontal(7, em)
        .paddingVertical(1, em)
        .width(100, vw)
        .boxSizing("border-box")
    }
}

register(AppMenu)