43 lines
1.3 KiB
JavaScript
43 lines
1.3 KiB
JavaScript
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) |