Rendering profile menu

ui/site/components/ProfileButton.js

@@ -2,45 +2,31 @@ import "./ProfileMenu.js"
 
 class ProfileButton extends Shadow {
 
-    render() {
+    async render() {
-        ZStack(() => {
+        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 () => {
+        .onAppear(() => {
-            try {
+            window.addEventListener("mousedown", (e) => { // bad - adding every time it renders
-                const res = await fetch("/profile", {
+                if(!e.target.closest("profilebutton-")) {
-                    method: "GET",
+                    this.$("profile-menu").style.display = "none"
-                    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);
-            }
         })
         .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)
-        //         }
-        //     }
-        // })
     }
 }
 

ui/site/components/ProfileMenu.js

@@ -1,11 +1,69 @@
 class ProfileMenu extends Shadow {
+    profile;
 
     render() {
         ZStack(() => {
-            p("profile")
+            h2("Profile")
+
+            HStack(() => {
+                p("Email: ")
+                .fontWeight("bold")
+
+                p(this.profile?.email)
+            })
+            .gap(1, em)
+            
+            HStack(() => {
+                p("Name: ")
+                .fontWeight("bold")
+
+                p(this.profile?.name)
+            })
+            .gap(1, em)
+
+            p("X")
+                .onClick(() => {
+                    this.style.display = "none"
+                })
+                .xRight(2, em).y(1, em)
         })
+        .paddingLeft(1, em)
+        .color("var(--main)")
+        .position("fixed")
+        .border("1px solid var(--main)")
+        .x(50, vw).y(47, vh)
+        .width(70, vw)
+        .height(70, vh)
         .backgroundColor("var(--accent)")
+        .center()
         .display("none")
+        .onAppear(async () => {
+            if(!this.profile) {
+                this.profile = await this.fetchProfile()
+                this.rerender()
+            }
+        })
+    }
+
+    async fetchProfile() {
+        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);
+        }
     }
 }