responsive app menu

ui/site/components/AppMenu.js

@@ -3,7 +3,7 @@ css(`
         color: var(--tan);
         transform: translateX(-50%);
         transition: transform .3s;
-        display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 3em;
+        display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2em;
     }
 
     app-menu.minimized {
@@ -37,18 +37,65 @@ css(`
         text-decoration: underline;
         transform: translateY(-10%)
     }
+
+    #divider.minimized {
+        display: none;
+    }
 `)
 
 registerShadow(
     
 class AppMenu extends Shadow {
+    selected;
+
+    constructor(selected) {
+        super()
+        this.selected = selected
+    }
 
     render() {
-        p("Forum")
-        p("Messages")
-        p("Market")
+        VStack(() => {
+            HStack(() => {
+                p("Forum")
+                p("Messages")
+                p("Market")
+            })
+            .justifyContent("center")
+            .gap("1.5em")
+    
+            img("_/images/divider.svg", "40vw")
+                .attr({
+                    "id": "divider",
+                })
+        })
+        .gap("0.5em")
+
+        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"
+    }
+
+
     connectedCallback() {
         Array.from(this.querySelectorAll("p")).forEach((el) => {
             el.addEventListener("mousedown", (e) => {
@@ -60,22 +107,18 @@ class AppMenu extends Shadow {
             if(!target.matches("app-menu p")) {
                 return
             }
-            $$("app-menu p").forEach((el) => {
-                if(el.innerText !== target.innerText) {
-                    el.classList.remove("selected")
-                }
-            })
 
             target.classList.remove("touched")
+
             if(target.classList.contains("selected")) {
-                target.classList.remove("selected")
-                $("app-menu").classList.remove("minimized")
-                $("#divider").classList.remove("minimized")
+                this.selected = ""
+                this.styleMaximized(target)
+                window.navigateTo("/")
                 $("app-window").close()
             } else {
-                target.classList.add("selected")
-                $("app-menu").classList.add("minimized")
-                $("#divider").classList.add("minimized")
+                this.selected = target.innerText
+                this.styleMinimized(target)
+                window.navigateTo("/app/" + target.innerText.toLowerCase())
                 $("app-window").open(target.innerText)
             }
         })