switching networks works, established server functions

ui/desktop/components/Sidebar.js

@@ -1,18 +1,43 @@
 class Sidebar extends Shadow {
-    currentNetwork = null
+
+    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/quillblack.svg" : "/_/icons/quill.svg", "2.5em", "2.5em")
                 .marginTop(6, vh)
                 .marginBottom(2, vh)
+                .attr({selected: selected ? "" : null})
+                .paddingRight(0.5, em)
+                .paddingLeft(selected ? 9 : 10, px)
+                .borderLeft(selected ? "1px solid var(--accent)" : "0")
+                .onClick((done, e) => {
+                    if(done) {
+                        this.toggleSelectedStyles(e.target)
+                        window.navigateTo("/my")
+                    }
+                })
 
-            let networks = window.profile.networks
+            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})
                     .paddingRight(0.5, em)
                     .paddingLeft(selected ? 9 : 10, px)
                     .borderLeft(selected ? "1px solid var(--accent)" : "0")
@@ -23,11 +48,10 @@ class Sidebar extends Shadow {
                             this.style.opacity = ""
                         }
                     })
-                    .onClick(function (finished) {
-                        if(finished) {
-                            this.setAttribute("selected", "")
-                            this.style.borderLeft = "1px solid var(--accent)"
-                            this.style.paddingLeft = "9px"
+                    .onClick((done, e) => {
+                        if(done) {
+                            this.toggleSelectedStyles(e.target)
+                            window.navigateTo(`/${networks[i].abbreviation}`)
                         }
                     })
                     .cursor("default")
@@ -41,7 +65,7 @@ class Sidebar extends Shadow {
         .borderRight("1px solid var(--accent)")
         .zIndex(3)
         .onEvent("themechange", () => {
-            console.log("change")
+            console.log("why is this needed smg")
             this.rerender()
         })
     }