79 lines
2.5 KiB
JavaScript
79 lines
2.5 KiB
JavaScript
import "./ProfileMenu.js"
|
|
|
|
class ProfileButton extends Shadow {
|
|
|
|
render() {
|
|
ZStack(() => {
|
|
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);
|
|
}
|
|
})
|
|
.onHover((hovering, e) => {
|
|
console.log(hovering)
|
|
console.log(e.target)
|
|
if(hovering && !e.target.matches("profile-menu")) {
|
|
this.$("img").backgroundColor("var(--accent)")
|
|
this.$("img").style.outline = "1px solid black"
|
|
} else if(!e.target.matches("profile-menu")) {
|
|
this.$("img").backgroundColor("")
|
|
this.$("img").style.outline = ""
|
|
}
|
|
})
|
|
.onClick((done) => {
|
|
console.log(done)
|
|
if(done) {
|
|
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)
|
|
// }
|
|
// }
|
|
// })
|
|
}
|
|
}
|
|
|
|
register(ProfileButton) |