Ability to post in Forum

ui/site/components/AppMenu.js

@@ -9,14 +9,13 @@ css(`
     app-menu.minimized {
         color: var(--accent);
         transform: translate(-50%, 65%);
-        border: 1px solid var(--accent);
+        border: 0.2px solid var(--accent);
         padding-top: 0.5em;
         padding-left: 2em; 
         padding-right: 2em;
         padding-bottom: 4em;
         bottom: 1em;
         border-radius: 12px;
-        background-color: var(--green);
     }
     
     app-menu p {

ui/site/components/ProfileButton.js

@@ -10,16 +10,45 @@ class ProfileButton extends Shadow {
                 .borderRadius(5, px)
 
             ProfileMenu()
+                .x(0, vw).y(4, em)
+                .center()
         })
         .display("block")
-        .onHover((hovering) => {
+        .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);
+            }
+        })
+        .onHover((hovering, e) => {
             console.log(hovering)
-            if(hovering) {
+            console.log(e.target)
+            if(hovering && !e.target.matches("profile-menu")) {
                 this.$("img").backgroundColor("var(--accent)")
-                this.$("img").border("1px solid black")
-            } else {
+                this.$("img").style.outline = "1px solid black"
+            } else if(!e.target.matches("profile-menu")) {
                 this.$("img").backgroundColor("")
-                this.$("img").border("")
+                this.$("img").style.outline = ""
+            }
+        })
+        .onClick((done) => {
+            console.log(done)
+            if(done) {
+                this.$("profile-menu").style.display = ""
             }
         })
 

ui/site/components/ProfileMenu.js

@@ -1,51 +1,11 @@
-css(`
-    profile-menu {
-        position: absolute;
-        right: -.5em;
-        top: -.3em;
-        width: 0;
-        height: 0;
-        background-color: rgba(255, 223, 180, 0.56);
-        color: black;
-        transition: width 0.2s, height 0.2s;
-        border-radius: 12px;
-    }
-
-    profile-menu * {
-        transition: opacity 0.3s;
-    }
-
-    profile-menu.closed * {
-        opacity: 0;
-    }
-
-    profile-menu.open {
-        width: 10em;
-        height: 15em;
-        display: block;
-    }
-
-    profile-menu.open * {
-        opacity: 100%;
-    }
-`)
-
 class ProfileMenu extends Shadow {
 
     render() {
         ZStack(() => {
-            if(this.classList.contains("open")) {
-                setTimeout(() => {
-                    // this.innerHTML = /* html */`
-                    //     <a href="signout" style="position: absolute; left: 0px; color: white; z-index: 2">sign out</a>
-                    //     <p>Profile</p>
-                    // `
-                }, 200)
-            }
-        })
-
-        util.observeClassChange(this, (cl) => {
+            p("profile")
         })
+        .backgroundColor("var(--accent)")
+        .display("none")
     }
 }