Rendering profile menu

ui/site/components/ProfileButton.js

@@ -2,45 +2,31 @@ import "./ProfileMenu.js"
 
 class ProfileButton extends Shadow {
 
-    render() {
-        ZStack(() => {
+    async render() {
+        ZStack(async () => {
             img("/_/icons/profile.svg", "1.5em", "1.5em")
                 .backgroundColor("var(--accent)")
                 .padding(0.2, em)
                 .borderRadius(5, px)
 
             ProfileMenu()
-                .x(0, vw).y(4, em)
-                .center()
+
         })
         .display("block")
-        .onAppear(async () => {
-            try {
-                const res = await fetch("/profile", {
-                    method: "GET",
-                    credentials: "include",
-                    headers: {
-                        "Content-Type": "application/json"
-                    }
-                });
-
-                if (!res.ok) throw new Error("Failed to fetch profile");
-
-                const profile = await res.json();
-                console.log(profile);
-                return profile;
-
-            } catch (err) {
-                console.error(err);
-            }
+        .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.matches("profile-menu")) {
+            if(hovering && !e.target.closest("profile-menu")) {
                 this.$("img").backgroundColor("var(--accent)")
                 this.$("img").style.outline = "1px solid black"
-            } else if(!e.target.matches("profile-menu")) {
+            } else if(!e.target.closest("profile-menu")) {
                 this.$("img").backgroundColor("")
                 this.$("img").style.outline = ""
             }
@@ -51,28 +37,6 @@ class ProfileButton extends Shadow {
                 this.$("profile-menu").style.display = ""
             }
         })
-
-        // document.addEventListener("mousemove", (e) => {
-        //     this.previousHovered = this.hovered
-        //     if(e.target.closest("profile-button")) {
-        //         this.hovered = true
-        //     } else {
-        //         this.hovered = false
-        //     }
-        //     if(this.hovered !== this.previousHovered) {
-        //         if(this.hovered === true) {
-        //             this.rerender()
-        //             setTimeout(() => {
-        //                 this.querySelector("profile-menu").className = "open"
-        //             })
-        //         } else {
-        //             this.querySelector("profile-menu").className = "closed"
-        //             setTimeout(() => {
-        //                 this.rerender()
-        //             }, 140)
-        //         }
-        //     }
-        // })
     }
 }