feat(settings): menu animations

app/components/Settings/BottomScreen/Menus/UserMenu.vue

@@ -1,35 +1,65 @@
 <script setup lang="ts">
 import MENU_IMAGE from "/assets/images/settings/top-screen/user/user.webp";
+import MENU_ACTIVE_IMAGE from "/assets/images/settings/top-screen/user/user-active.webp";
+import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/user/user-disabled.png";
 import BIRTHDAY_IMAGE from "/assets/images/settings/top-screen/user/birthday.webp";
 import COLOR_IMAGE from "/assets/images/settings/top-screen/user/color.webp";
 import MESSAGE_IMAGE from "/assets/images/settings/top-screen/user/message.webp";
-import USER_NAME_IMAGE from "/assets/images/settings/top-screen/user/user_name.webp";
+import USER_NAME_IMAGE from "/assets/images/settings/top-screen/user/user-name.webp";
 
 const props = defineProps<{
   x: number;
   y: number;
   isOpen: boolean;
+  isAnyOtherMenuOpen: boolean;
 }>();
 
-const [menuImage, birthdayImage, colorImage, messageImage, userNameImage] =
-  useImages(
-    MENU_IMAGE,
-    BIRTHDAY_IMAGE,
-    COLOR_IMAGE,
-    MESSAGE_IMAGE,
-    USER_NAME_IMAGE,
-  );
+const [
+  menuImage,
+  menuActiveImage,
+  menuDisabledImage,
+  birthdayImage,
+  colorImage,
+  messageImage,
+  userNameImage,
+] = useImages(
+  MENU_IMAGE,
+  MENU_ACTIVE_IMAGE,
+  MENU_DISABLED_IMAGE,
+  BIRTHDAY_IMAGE,
+  COLOR_IMAGE,
+  MESSAGE_IMAGE,
+  USER_NAME_IMAGE,
+);
+
+const animation = useMenuAnimation(toRef(() => props.isOpen));
 
 useRender((ctx) => {
   ctx.translate(props.x, props.y);
 
-  ctx.drawImage(menuImage!, 0, 0);
+  if (props.isOpen || animation.playing) {
+    ctx.drawImage(
+      birthdayImage!,
+      -48 + animation.stage2Offset,
+      -48 + animation.stage1Offset,
+    );
+    ctx.drawImage(userNameImage!, 0, -48 + animation.stage1Offset);
+    ctx.drawImage(
+      messageImage!,
+      48 - animation.stage2Offset,
+      -48 + animation.stage1Offset,
+    );
+    ctx.drawImage(
+      colorImage!,
+      0,
+      -96 + animation.stage2Offset + animation.stage1Offset,
+    );
 
-  if (props.isOpen) {
-    ctx.drawImage(birthdayImage!, -48, -48);
-    ctx.drawImage(userNameImage!, 0, -48);
-    ctx.drawImage(messageImage!, 48, -48);
-    ctx.drawImage(colorImage!, 0, -96);
+    ctx.drawImage(menuActiveImage!, 0, 0);
+  } else if (props.isAnyOtherMenuOpen) {
+    ctx.drawImage(menuDisabledImage!, 0, 0);
+  } else {
+    ctx.drawImage(menuImage!, 0, 0);
   }
 });