class Sidebar extends Shadow {
    currentNetwork = null

    render() {
        VStack(() => {
            img(document.documentElement.classList.contains("red") ? "/_/icons/quillblack.svg" : "/_/icons/quill.svg", "2.5em", "2.5em")
                .marginTop(6, vh)
                .marginBottom(2, vh)

            let networks = window.profile.networks
            for(let i=0; i<networks.length; i++) {
                let selected = window.location.pathname.startsWith("/" + networks[i].abbreviation)

                img(`/db/images/${networks[i].logo}`, "2.25em", "2.25em")
                    .marginTop(3, vh)
                    .paddingRight(0.5, em)
                    .paddingLeft(selected ? 9 : 10, px)
                    .borderLeft(selected ? "1px solid var(--accent)" : "0")
                    .onHover(function (hovering) {
                        if(hovering) {
                            this.style.opacity = 0.8
                        } else {
                            this.style.opacity = ""
                        }
                    })
                    .onClick(function (finished) {
                        if(finished) {
                            this.setAttribute("selected", "")
                            this.style.borderLeft = "1px solid var(--accent)"
                            this.style.paddingLeft = "9px"
                        }
                    })
                    .cursor("default")
            }
        })
        .paddingLeft(1.5, em)
        .paddingRight(1, em)
        .position("fixed")
        .x(0).y(0)
        .height(100, vh)
        .borderRight("1px solid var(--accent)")
        .zIndex(3)
        .onEvent("themechange", () => {
            console.log("change")
            this.rerender()
        })
    }
}

register(Sidebar)