adding stripe section, parts of dashboard

ui/desktop/components/AppMenu.js

@@ -25,9 +25,8 @@ css(`
         border-radius: 5px;
         text-underline-offset: 5px;
     }
-    app-menu p:hover {
-        text-decoration: underline;
-        transform: translateY(-5%)
+    app-menu img:hover {
+        border: "1px solid black";
     }
     app-menu p.touched {
         text-decoration: underline;
@@ -56,19 +55,14 @@ class AppMenu extends Shadow {
     render() {
         VStack(() => {
             HStack(() => {
-                p("Forum")
-                p("Messages")
-                p("Market")
-                p("Jobs")
+                img("/_/icons/house.svg", "1.5em")
+                img("/_/icons/nodes.svg", "1.5em")
+                img("/_/icons/forum.svg", "1.5em")
+                img("/_/icons/people.svg", "1.5em")
             })
             .justifyContent("center")
-            .gap(1.5, em)
+            .gap(3, em)
             .paddingRight(2, em)
-    
-            img("/_/images/divider.svg", "40vw")
-                .attr({
-                    "id": "divider",
-                })
         })
         .gap(0.5, em)
         .onNavigate(() => {
@@ -81,14 +75,14 @@ class AppMenu extends Shadow {
             }
         })
         .onAppear(() => {
-            Array.from(this.querySelectorAll("p")).forEach((el) => {
+            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 p")) {
+                if(!target.matches("app-menu img")) {
                     return
                 }