52 lines
1.1 KiB
JavaScript
52 lines
1.1 KiB
JavaScript
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) => {
|
|
})
|
|
}
|
|
}
|
|
|
|
registerShadow(ProfileMenu, "profile-menu") |