url scheme done, switch between apps and orgs mostly done

ui/desktop/components/AppMenu.js

@@ -1,17 +1,8 @@
-css(`    
-    app-menu img:hover {
-        opacity: 0.8;
-    }
-`)
-
-register(
-    
 class AppMenu extends Shadow {
-    selected;
 
-    constructor(selected) {
-        super()
-        this.selected = selected
+    images = {
+        "Dashboard": {src: "house-src", size: "1.5em"},
+        "People": {src: "people-src", size: "1.7em"}
     }
 
     render() {
@@ -22,76 +13,49 @@ class AppMenu extends Shadow {
                 .getPropertyValue("--" + value)
                 .trim();
             }
+
             HStack(() => {
-                img(cssVariable("house-src"), "1.5em")
-                img(cssVariable("people-src"), "1.7em")
+                let currentNetwork = window.currentNetwork
+                if(!currentNetwork) return
+                let currentApp = window.currentApp
+
+                for(let i = 0; i < currentNetwork.apps.length; i++) {
+                    let app = currentNetwork.apps[i]
+                    img(cssVariable(this.images[app].src), this.images[app].size)
+                        .attr({app: app})
+                        .padding(0.3, em)
+                        .paddingBottom(currentApp === app ? 4 : 5, px)
+                        .borderBottom(currentApp === app ? "1px solid var(--accent)" : "")
+                        .onClick((done) => {
+                            if(done) window.openApp(app)
+                        })
+                        .onHover(function (hovering) {
+                            if(hovering) {
+                                this.style.opacity = 0.8
+                            } else {
+                                this.style.opacity = ""
+                            }
+                        })
+                }
             })
             .justifyContent("center")
             .gap(3.5, em)
             .paddingRight(2, em)
         })
+        .onEvent("themechange", () => {
+            this.rerender()
+        })
+        .onEvent("appchanged", () => {
+            console.log("event firing successfully")
+            this.rerender()
+        })
         .position("fixed")
         .x(0).yBottom(0)
         .width(100, vw)
-        .paddingVertical(1, em)
-        .borderTop("0.5px solid var(--accent)")
-        .onNavigate(() => {
-            if(window.location.pathname === "/") {
-                this.styleMaximized()
-                $("app-window").close()
-            } else {
-                this.styleMinimized()
-                $("app-window").open(this.selected)
-            }
-        })
-        .onAppear(() => {
-            Array.from(this.querySelectorAll("img")).forEach((el) => {
-                el.addEventListener("mousedown", (e) => {
-                    el.classList.add("touched")
-                })
-            })
-            window.addEventListener("mouseup", (e) => {
-                let target = e.target
-                if(!target.matches("app-menu img")) {
-                    return
-                }
-
-                target.classList.remove("touched")
-
-                if(target.classList.contains("selected")) {
-                    this.selected = ""
-                    window.navigateTo("/")
-                } else {
-                    this.selected = target.innerText
-                    window.navigateTo("/app/" + target.innerText.toLowerCase())
-                }
-            })
-        })
-
-        if(this.selected) {
-            this.styleMinimized()
-        }
-    }
-
-    styleMaximized() {
-        $$("app-menu p").forEach((el) => {
-            el.classList.remove("selected")
-        })
-        this.classList.remove("minimized")
-        $("#divider").style.display = ""
-    }
-
-    styleMinimized() {
-        $$("app-menu p").forEach((el) => {
-            if(el.innerText !== this.selected) {
-                el.classList.remove("selected")
-            } else {
-                el.classList.add("selected")
-            }
-        })
-        this.classList.add("minimized")
-        $("#divider").style.display = "none"
+        .height(2.5, em)
+        .paddingVertical(0.7, em)
+        .borderTop("1px solid var(--accent)")
     }
 }
 
-, "app-menu")
+register(AppMenu, "app-menu")