65 lines
1.4 KiB
JavaScript
65 lines
1.4 KiB
JavaScript
css(`
|
|
profile-menu {
|
|
position: absolute;
|
|
right: -.5em;
|
|
top: -.3em;
|
|
width: 0;
|
|
height: 0;
|
|
background-color: var(--orange);
|
|
opacity: 30%;
|
|
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%;
|
|
}
|
|
`)
|
|
|
|
export default class ProfileMenu extends HTMLElement {
|
|
|
|
connectedCallback() {
|
|
this.render()
|
|
|
|
util.observeClassChange(this, (cl) => {
|
|
this.render()
|
|
})
|
|
|
|
}
|
|
|
|
render() {
|
|
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>
|
|
`
|
|
}, 200)
|
|
} else {
|
|
this.innerHTML === ""
|
|
}
|
|
}
|
|
|
|
logout() {
|
|
fetch('/signout', { method: 'GET', credentials: 'include' })
|
|
.then(() => {
|
|
// Force a clean full-page reload of "/"
|
|
window.location.href = '/?loggedout';
|
|
});
|
|
}
|
|
}
|
|
|
|
customElements.define("profile-menu", ProfileMenu) |