class NavMenu extends Shadow {

    NavButton(text) {
        return p(text)
            .cursor("default")
            .onAppear(function () {
                console.log(window.location.pathname, "/" + this.innerText.toLowerCase())
                if(window.location.pathname === ("/" + this.innerText.toLowerCase())) {
                    this.style.textDecoration = "underline"
                }
            })
            .onHover(function (hovering) {
                if(hovering) {
                    this.style.textDecoration = "underline"
                } else {
                    this.style.textDecoration = ""
                }
            })
            .onClick(function (done) {
                if(done) {
                    window.navigateTo(this.innerText === "Home" ? "/" : this.innerText.toLowerCase())
                }
            })
    }

    render() {
        HStack(() => {
            this.NavButton("Home")
            this.NavButton("Downloads")
        })
        .gap(2, em)
        .x(50, vw).y(5, vh)
        .center()
    }
}

register(NavMenu)