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)
             }
         })

ui/site/components/AppWindow.js

@@ -5,6 +5,11 @@ import "../apps/Market.js"
 class AppWindow extends Shadow {
     app;
 
+    constructor(app) {
+        super()
+        this.app = app
+    }
+
     render() {
         ZStack(() => {
             console.log("happening")

ui/site/components/Home.js

@@ -3,12 +3,6 @@ import "./AppMenu.js"
 import "./ProfileButton.js"
 import "./InputBox.js"
 import "./Sidebar.js"
-
-css(`
-    #divider.minimized {
-        display: none;
-    }
-`)
     
 class Home extends Shadow {
 
@@ -23,7 +17,24 @@ class Home extends Shadow {
                 .backgroundPosition("48% 65%")
                 .backgroundRepeat("no-repeat")
 
-                AppWindow()
+                switch(window.location.pathname) {
+                    case "/":
+                        AppWindow()
+                        AppMenu()
+                        break
+                    case "/app/forum":
+                        AppWindow("Forum")
+                        AppMenu("Forum")
+                        break;
+                    case "/app/messages":
+                        AppWindow("Messages")
+                        AppMenu("Messages")
+                        break;
+                    case "/app/market":
+                        AppWindow("Market")
+                        AppMenu("Market")
+                        break;
+                }
 
                 ProfileButton()
                     .zIndex(1)
@@ -44,15 +55,6 @@ class Home extends Shadow {
                     .background("var(--tan)")
                     .color("var(--red)")
                     .borderRadius(5, px)
-
-                AppMenu()
-
-                img("_/images/divider.svg", "40vw")
-                    .attr({"id": "divider"})
-                    .position("fixed")
-                    .bottom("2em")
-                    .left("50vw")
-                    .transform("translateX(-50%)")
         })
 
     }