beginning of mobile site

ui/desktop/components/ProfileButton.js

@@ -0,0 +1,43 @@
+import "./ProfileMenu.js"
+
+class ProfileButton extends Shadow {
+
+    async render() {
+        ZStack(async () => {
+            img("/_/icons/profile.svg", "1.5em", "1.5em")
+                .backgroundColor("var(--accent)")
+                .padding(0.2, em)
+                .borderRadius(5, px)
+
+            ProfileMenu()
+
+        })
+        .display("block")
+        .onAppear(() => {
+            window.addEventListener("mousedown", (e) => { // bad - adding every time it renders
+                if(!e.target.closest("profilebutton-")) {
+                    this.$("profile-menu").style.display = "none"
+                }
+            })
+        })
+        .onHover((hovering, e) => {
+            console.log(hovering)
+            console.log(e.target)
+            if(hovering && !e.target.closest("profile-menu")) {
+                this.$("img").backgroundColor("var(--accent)")
+                this.$("img").style.outline = "1px solid black"
+            } else if(!e.target.closest("profile-menu")) {
+                this.$("img").backgroundColor("")
+                this.$("img").style.outline = ""
+            }
+        })
+        .onClick((done) => {
+            console.log(done)
+            if(done) {
+                this.$("profile-menu").style.display = ""
+            }
+        })
+    }
+}
+
+register(ProfileButton)