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) => {
        })
    }
}

register(ProfileMenu, "profile-menu")