50 lines
1.5 KiB
JavaScript
50 lines
1.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()
|
|
})
|
|
.display("block")
|
|
.onHover((hovering) => {
|
|
console.log(hovering)
|
|
if(hovering) {
|
|
this.$("img").backgroundColor("var(--accent)")
|
|
this.$("img").border("1px solid black")
|
|
} else {
|
|
this.$("img").backgroundColor("")
|
|
this.$("img").border("")
|
|
}
|
|
})
|
|
|
|
// 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) |