Integrated Quill

ui/site/components/AppMenu.js

@@ -0,0 +1,62 @@
+css(`
+    app-menu {
+        color: var(--tan);
+        transform: translateX(-50%);
+        transition: transform .3s;
+        display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2.3em;
+    }
+
+    app-menu.minimized {
+        color: var(--accent);
+        transform: translate(-50%, 65%);
+        border: 1px solid var(--accent);
+        padding-left: 2em; padding-right: 2em;
+        border-radius: 12px;
+    }
+`)
+
+registerShadow(
+    
+class AppMenu extends Shadow {
+
+    render() {
+        p("Messages")
+        p("Market")
+        p("Security")
+        p("Jobs")
+    }
+
+    connectedCallback() {
+        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
+            }
+            $$("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-manu").classList.remove("minimized")
+                $("#divider").classList.remove("minimized")
+                $("app-window").close()
+            } else {
+                target.classList.add("selected")
+                $("app-manu").classList.add("minimized")
+                $("#divider").classList.add("minimized")
+                $("app-window").open(target.innerText)
+            }
+        })
+    }
+}
+
+, "app-menu")

ui/site/components/AppWindow.js

@@ -13,6 +13,7 @@ css(`
 export default class AppWindow extends HTMLElement {
 
     open(app) {
+        console.log("opening", app)
         this.style.display = "block"
     }