Mobile improvements

ui/mobile/components/AppMenu.js

@@ -1,19 +1,74 @@
 class AppMenu extends Shadow {
+    selected = ""
+
+    onNewSelection() {
+        this.$$("img").forEach((image) => {
+            image.style.background = ""
+        })
+    }
+
     render() {
+        console.log("rendering")
         HStack(() => {
-            img("/_/icons/mail.png", "2em", "2em")
-            img("/_/icons/Column.svg", "2em", "2em")
-            p("S")
-            p("S")
-            p("S")
+            img("/_/icons/Column.svg", "1.5em", "1.5em")
+                .attr({app: "forum"})
+                .padding(0.5, em)
+                .borderRadius(10, px)
+                .onAppear(function () {
+                    this.style.border = "1px solid black"
+                })
+                .onClick((finished, e) => {
+                    if(finished) {
+                        this.onNewSelection()
+                    }
+                    e.target.style.background = "var(--accent)"
+                    console.log(e.target, e.target.style.background)
+                    if(finished) {
+                        window.navigateTo("/")
+                    }
+                })
+            img("/_/icons/letter.svg", "1.5em", "1.5em")
+                .attr({app: "messages"})
+                .padding(0.5, em)
+                .borderRadius(10, px)
+                .onAppear(function () {
+                    this.style.border = "1px solid black"
+                })
+                .onClick((finished, e) => {
+                    if(finished) {
+                        this.onNewSelection()
+                    }
+                    e.target.style.background = "rgb(112 150 114)"
+                    if(finished) {
+                        window.navigateTo("/messages")
+                    }
+                })
+            img("/_/icons/jobs.svg", "1.5em", "1.5em") 
+                .attr({app: "jobs"})
+                .padding(0.5, em)
+                .borderRadius(10, px)
+                .onAppear(function () {
+                    this.style.border = "1px solid black"
+                })
+                .onClick((finished, e) => {
+                    if(finished) {
+                        this.onNewSelection()
+                    }
+                    e.target.style.background = "#9392bb"
+                    if(finished) {
+                        window.navigateTo("/jobs")
+                    }
+                })
         })
         .borderTop("1px solid black")
-        .height(3, em)
+        .height("auto")
+        .position('fixed')
+        .background("var(--main)")
+        .zIndex(1)
         .x(0).yBottom(0)
         .justifyContent("space-between")
-        .paddingHorizontal(2, em)
+        .paddingHorizontal(4, em)
         .paddingVertical(1, em)
-        .transform("translateY(-50%)")
         .width(100, vw)
         .boxSizing("border-box")
     }