beginning of mobile site

2025-12-01 03:07:55 -06:00
parent fcf0b4b08a
commit daa4182778
50 changed files with 1377 additions and 43 deletions
--- a/ui/desktop/components/AppMenu.js
+++ b/ui/desktop/components/AppMenu.js
@@ -0,0 +1,133 @@
+css(`
+    app-menu {
+        color: var(--tan);
+        transform: translateX(-50%);
+        transition: transform .3s;
+        display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2em;
+    }
+
+    app-menu.minimized {
+        color: var(--accent);
+        transform: translate(-50%, 65%);
+        border: 0.2px solid var(--accent);
+        padding-top: 0.5em;
+        padding-left: 2em; 
+        padding-right: 2em;
+        padding-bottom: 4em;
+        bottom: 1em;
+        border-radius: 12px;
+    }
+    
+    app-menu p {
+        cursor: default;
+        transition: transform .3s, text-decoration .3s;
+        padding: 0.5em;
+        border-radius: 5px;
+        text-underline-offset: 5px;
+    }
+    app-menu p:hover {
+        text-decoration: underline;
+        transform: translateY(-5%)
+    }
+    app-menu p.touched {
+        text-decoration: underline;
+        transform: translateY(0%)
+    }
+    app-menu p.selected {
+        text-decoration: underline;
+        transform: translateY(-10%)
+    }
+
+    #divider.minimized {
+        display: none;
+    }
+`)
+
+register(
+    
+class AppMenu extends Shadow {
+    selected;
+
+    constructor(selected) {
+        super()
+        this.selected = selected
+    }
+
+    render() {
+        VStack(() => {
+            HStack(() => {
+                p("Forum")
+                p("Messages")
+                p("Market")
+                p("Jobs")
+            })
+            .justifyContent("center")
+            .gap(1.5, em)
+            .paddingRight(2, em)
+    
+            img("/_/images/divider.svg", "40vw")
+                .attr({
+                    "id": "divider",
+                })
+        })
+        .gap(0.5, em)
+        .onNavigate(() => {
+            if(window.location.pathname === "/") {
+                this.styleMaximized()
+                $("app-window").close()
+            } else {
+                this.styleMinimized()
+                $("app-window").open(this.selected)
+            }
+        })
+        .onAppear(() => {
+            Array.from(this.querySelectorAll("p")).forEach((el) => {
+                el.addEventListener("mousedown", (e) => {
+                    el.classList.add("touched")
+                })
+            })
+            window.addEventListener("mouseup", (e) => {
+                let target = e.target
+                if(!target.matches("app-menu p")) {
+                    return
+                }
+
+                target.classList.remove("touched")
+
+                if(target.classList.contains("selected")) {
+                    this.selected = ""
+                    window.navigateTo("/")
+                } else {
+                    this.selected = target.innerText
+                    window.navigateTo("/app/" + target.innerText.toLowerCase())
+                }
+            })
+        })
+
+        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"
+    }
+}
+
+, "app-menu")