✌️

src/web/app/animation.styl

@@ -0,0 +1,12 @@
+.zoom-in-top-enter-active,
+.zoom-in-top-leave-active {
+	opacity: 1;
+	transform: scaleY(1);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+	transform-origin: center top;
+}
+.zoom-in-top-enter,
+.zoom-in-top-leave-active {
+	opacity: 0;
+	transform: scaleY(0);
+}

src/web/app/app.styl

@@ -1,4 +1,5 @@
 @import "../style"
+@import "../animation"
 
 html
 	&.progress

src/web/app/desktop/views/components/ui.header.account.vue

@@ -4,6 +4,7 @@
 		<span class="username">{{ os.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
 		<img class="avatar" :src="`${ os.i.avatar_url }?thumbnail&size=64`" alt="avatar"/>
 	</button>
+	<transition name="zoom-in-top">
 		<div class="menu" v-if="isOpen">
 			<ul>
 				<li>
@@ -27,6 +28,7 @@
 				</li>
 			</ul>
 		</div>
+	</transition>
 </div>
 </template>
 
@@ -209,4 +211,12 @@ export default Vue.extend({
 						background $theme-color
 						color $theme-color-foreground
 
+					&:active
+						background darken($theme-color, 10%)
+
+.zoom-in-top-enter-active,
+.zoom-in-top-leave-active {
+	transform-origin: center -16px;
+}
+
 </style>