switching networks works, established server functions

ui/desktop/components/AppMenu.js

@@ -15,9 +15,9 @@ class AppMenu extends Shadow {
             }
 
             HStack(() => {
-                let currentNetwork = window.currentNetwork
+                let currentNetwork = global.currentNetwork
                 if(!currentNetwork) return
-                let currentApp = window.currentApp
+                let currentApp = global.currentApp
 
                 for(let i = 0; i < currentNetwork.apps.length; i++) {
                     let app = currentNetwork.apps[i]
@@ -27,7 +27,7 @@ class AppMenu extends Shadow {
                         .paddingBottom(currentApp === app ? 4 : 5, px)
                         .borderBottom(currentApp === app ? "1px solid var(--accent)" : "")
                         .onClick((done) => {
-                            if(done) window.openApp(app)
+                            if(done) global.openApp(app)
                         })
                         .onHover(function (hovering) {
                             if(hovering) {
@@ -49,6 +49,10 @@ class AppMenu extends Shadow {
             // console.log("app hello?") // BUG: Quill is not acknowledging this event unless there is something else in the function body
             this.rerender()
         })
+        .onEvent("networkchange", () => {
+            // console.log(global.currentApp)
+            this.rerender()
+        })
         .position("fixed")
         .x(0).yBottom(0)
         .width(100, vw)

ui/desktop/components/AppWindow.js

@@ -22,7 +22,7 @@ class AppWindow extends Shadow {
 
     render() {
         ZStack(() => {
-            switch(window.currentApp) {
+            switch(global.currentApp) {
                 case "Dashboard":
                     Dashboard()
                     break;
@@ -33,17 +33,20 @@ class AppWindow extends Shadow {
         })
         .overflow("scroll")
         .position("absolute")
-        .onEvent("resize", () => {
-            this.rerender()
-        })
         .width(window.innerWidth - this.calculateWidth(), px)
         .height(window.innerHeight - this.calculateHeight(), px)
         .background("var(--app)")
         .x(this.calculateWidth(), px)
         .yBottom(this.calculateHeight(), px)
+        .onEvent("resize", () => {
+            this.rerender()
+        })
         .onEvent("appchange", () => {
             this.rerender()
         })
+        .onEvent("networkchange", () => {
+            this.rerender()
+        })
     }
 }
 

ui/desktop/components/ProfileMenu.js

@@ -8,7 +8,7 @@ class ProfileMenu extends Shadow {
                 p("Email: ")
                 .fontWeight("bold")
 
-                p(window.profile?.email)
+                p(global.profile?.email)
             })
             .gap(1, em)
             
@@ -16,7 +16,7 @@ class ProfileMenu extends Shadow {
                 p("Name: ")
                 .fontWeight("bold")
 
-                p(window.profile?.name)
+                p(global.profile?.name)
             })
             .gap(1, em)
 
@@ -37,8 +37,8 @@ class ProfileMenu extends Shadow {
         .center()
         .display("none")
         .onAppear(async () => {
-            if(!window.profile) {
-                window.profile = await this.fetchProfile()
+            if(!global.profile) {
+                global.profile = await this.fetchProfile()
                 this.rerender()
             }
         })

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()
         })
     }