class Sidebar extends Shadow {
    render() {
        VStack(() => {
            HStack(() => {
                img("./_/icons/runner.svg", "40px", "40px")
                p("Blockcatcher")
                    .fontSize(1.2, em)
                    .fontFamily("Inknut Antiqua")
                    .marginTop(0.5, em)
            })
            .marginTop(2, em)
            .paddingLeft(6, em)
            .width(100, "%")
            .borderBottom("2px solid rgb(100 115 177)")

            button("Walkers")
                .background("rgb(100 115 177)")
                .paddingVertical(0.5, em)
                .border("none")
                .borderRadius(6, px)
                .marginTop(3, em)
                .width(80, "%")

            button("Voters")
                .background("transparent")
                .paddingVertical(0.5, em)
                .border("none")
                .borderRadius(6, px)
                .marginTop(1, em)
                .width(80, "%")
                .onHover(function (hovering) {
                    if(hovering) {
                        this.style.outline = "1px solid rgb(100 115 177)"
                    } else {
                        this.style.outline = ""
                    }
                })

            button("Data")
                .background("transparent")
                .paddingVertical(0.5, em)
                .border("none")
                .borderRadius(6, px)
                .marginTop(1, em)
                .width(80, "%")
                .onHover(function (hovering) {
                    if(hovering) {
                        this.style.outline = "1px solid rgb(100 115 177)"
                    } else {
                        this.style.outline = ""
                    }
                })
        })
        .width(20, vw)
        .height(100, vh)
        .borderRight("2px solid rgb(100 115 177)")
        .alignItems("center")
    }
}

register(Sidebar)