Introducing dark mode, deriving apps in bottom bar from db

src/components/AppMenu.js

@@ -1,53 +1,48 @@
 class AppMenu extends Shadow {
     selected = ""
 
+    images = {
+        "Dashboard": {src: "column-src"},
+        "Messages": {src: "letter-src"},
+        "People": {src: "people-src"},
+    }
+
     onNewSelection() {
         this.$$("img").forEach((image) => {
             image.style.outline = ""
         })
     }
 
+    cssVariable(value) {
+        return getComputedStyle(document.documentElement)
+        .getPropertyValue("--" + value)
+        .trim();
+    }
+
     render() {
         HStack(() => {
-            img("/_/icons/Column.svg", "1.5em", "1.5em")
-                .attr({app: "forum"})
-                .padding(0.5, em)
-                .borderRadius(10, px)
-                .outline(global.currentApp() === "Dashboard" ? "1px solid black" : "none")
-                .onClick((finished, e) => {
-                    if(finished) {
-                        this.onNewSelection()
-                        e.target.style.outline = "1px solid black"
-                        global.openApp("Dashboard")
-                    }
-                })
 
-            img("/_/icons/letter.svg", "1.5em", "1.5em")
-                .attr({app: "messages"})
-                .padding(0.5, em)
-                .borderRadius(10, px)
-                .outline(global.currentApp() === "Messages" ? "1px solid black" : "none")
-                .onClick((finished, e) => {
-                    if(finished) {
-                        this.onNewSelection()
-                        e.target.style.outline = "1px solid black"
-                        global.openApp("Messages")
-                    }
-                })
-            img("/_/icons/people.svg", "1.5em", "1.5em") 
-                .attr({app: "people"})
-                .padding(0.5, em)
-                .borderRadius(10, px)
-                .outline(global.currentApp() === "People" ? "1px solid black" : "none")
-                .onClick((finished, e) => {
-                    if(finished) {
-                        this.onNewSelection()
-                        e.target.style.outline = "1px solid black"
-                        global.openApp("People")
-                    }
-                })
+            let currentNetwork = global.currentNetwork
+            for(let i = 0; i < currentNetwork.apps.length; i++) {
+                let app = currentNetwork.apps[i]
+                console.log(app)
+                img(this.cssVariable(this.images[app].src), this.images[app].size)
+                    .attr({app: app})
+                    .padding(0.5, em)
+                    .borderRadius(10, px)
+                    .outline(global.currentApp() === app ? "1px solid var(--accent)" : "none")
+                    .onClick((done, e) => {
+                        if(done) {
+                            this.onNewSelection()
+                            e.target.style.outline = "1px solid var(--accent)"
+                            global.openApp(app)
+                        }
+                    })
+            }
+
+
         })
-        .borderTop("1px solid black")
+        .borderTop("1px solid var(--accent)")
         .height("auto")
         .background("var(--main)")
         .zIndex(1)