class Sidebar extends Shadow {

    SidebarItem(text) {
        return p(text)
            .fontSize(1.5, em)
            .fontWeight("bold")
            .fontFamily("Sedan SC")
            .marginLeft(2, em)
            .fontStyle("italic")
            .onClick(function () {
                if(this.innerText === "Home") {
                    window.navigateTo("/")
                    return
                }
                window.navigateTo(this.innerText.toLowerCase().replace(/\s+/g, ""))
            })
    }

    render() {
        VStack(() => {
            this.SidebarItem("Home")
            this.SidebarItem("Map")
            this.SidebarItem("Logout")
        })
        .gap(2, em)
        .paddingTop(30, vh)
        .height(100, vh)
        .width(70, vw)
        .borderLeft("1px solid black")
        .position("fixed")
        .background("var(--main)")
        .xRight(-70, vw)
        .transition("right .3s")
        .zIndex(1)
    }

    toggle() {
        if(this.style.right === "-70vw") {
            this.style.right = "0vw"
        } else {
            this.style.right = "-70vw"
        }
    }
}

register(Sidebar)