Jobs + Events Pages

- Added Jobs/Events pages, need to set up with backend once complete
- Added missing icons and fixed incorrect icons
- Made AppMenu icons highlight when selected
- Removed Settings from AppMenu
- Fixed undefined data in People

src/components/AppMenu.js

@@ -5,14 +5,22 @@ class AppMenu extends Shadow {
     selected = ""
 
     images = {
-        "Dashboard": {src: "home-src"},
-        "Messages": {src: "letter-src"},
-        "People": {src: "people-src"}
+        "Dashboard": {src: ["home-src", "home-selected-src"]},
+        "People": {src: ["people-src", "people-selected-src"]},
+        "Settings": {src: ["settings-src", "settings-selected-src"]},
+        "Events": {src: ["events-src", "events-selected-src"]},
+        "Jobs": {src: ["jobs-src", "jobs-selected-src"]}
     }
 
     onNewSelection() {
         this.$$("img").forEach((image) => {
             image.style.borderBottom = "1px solid transparent"
+            const app = image.attributes.app.value
+            if (app === global.currentApp()) {
+                image.src = util.cssVariable(this.images[app].src[1])
+            } else {
+                image.src = util.cssVariable(this.images[app].src[0])
+            }
         })
     }
 
@@ -22,16 +30,16 @@ class AppMenu extends Shadow {
             let currentNetwork = global.currentNetwork
             for(let i = 0; i < currentNetwork.apps.length; i++) {
                 let app = currentNetwork.apps[i]
-                console.log(app)
-                img(util.cssVariable(this.images[app].src), "1.3em")
+                if (app === "Settings") continue;
+                img(util.cssVariable(global.currentApp() === app ? this.images[app].src[1] : this.images[app].src[0]), "1.3em")
                     .attr({app: app})
                     .padding(0.5, em)
                     .borderBottom(global.currentApp() === app ? "1px solid var(--text)" : "1px solid transparent")
                     .onTouch(async (done, e) => {
                         if(done) {
-                            this.onNewSelection()
                             e.target.style.borderBottom = "1px solid var(--text)"
                             global.openApp(app)
+                            this.onNewSelection()
                             await Haptics.impact({ style: ImpactStyle.Light });
                         }
                     })

src/components/AppWindow.js

@@ -2,6 +2,7 @@ import "../apps/Forum/Forum.js"
 import "../apps/Messages/Messages.js"
 import "../apps/Jobs/Jobs.js"
 import "../apps/People/People.js"
+import "../apps/Events/Events.js"
 
 class AppWindow extends Shadow {
     render() {
@@ -19,6 +20,14 @@ class AppWindow extends Shadow {
                 case "People":
                     People()
                     break;
+
+                case "Jobs":
+                    Jobs()
+                    break;
+
+                case "Events":
+                    Events()
+                    break;
             }
         })
         .height(100, pct)