class Sidebar extends Shadow {

    toggleSelectedStyles(el) {
        let currentlySelected = $("img[selected]")
        if(currentlySelected) {
            currentlySelected.removeAttribute("selected")
            currentlySelected.style.borderLeft = ""
            currentlySelected.style.paddingLeft = "10px"
        }

        el.setAttribute("selected", "")
        el.style.borderLeft = "1px solid var(--accent)"
        el.style.paddingLeft = "9px"
    }

    render() {
        VStack(() => {
            let selected = window.location.pathname.startsWith("/my")

            img(document.documentElement.classList.contains("red") ? "/_/icons/column.svg" : "/_/icons/columnred.svg", "2.5em", "2.5em")
                .marginTop(6, vh)
                .marginBottom(2, vh)
                .attr({selected: selected ? "" : null})
                .paddingLeft(selected ? 9 : 10, px)
                .borderLeft(selected ? "1px solid var(--accent)" : "0")
                .cursor("pointer")
                .transition("transform .1s")
                .onClick(function (done, e) {
                    if(!done) {
                        this.style.transform = "translateX(-10%)"
                    } else {
                        this.style.transform = ""
                        this.parentShadow().toggleSelectedStyles(e.target)
                        window.navigateTo("/my")
                    }
                })

            let networks = global.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)
                    .attr({selected: selected ? "" : null})
                    .paddingLeft(selected ? 9 : 10, px)
                    .borderLeft(selected ? "1px solid var(--accent)" : "0")
                    .cursor("pointer")
                    .transition("transform .1s")
                    .onClick(function (done, e) {
                        if(!done) {
                            this.style.transform = "translateX(-10%)"
                        } else {
                            this.style.transform = ""
                            this.parentShadow().toggleSelectedStyles(e.target)
                            window.navigateTo(`/${networks[i].abbreviation}`)
                        }
                    })
            }
        })
        .paddingLeft(1.5, em)
        .paddingRight(1, em)
        .position("fixed")
        .x(0).y(0)
        .height(100, vh)
        .zIndex(3)
        .onEvent("themechange", () => {
            console.log("why is this needed smg")
            this.rerender()
        })
    }
}

register(Sidebar)