feat(settings): menu animations

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import MENU_IMAGE from "/assets/images/settings/top-screen/clock/clock.webp";
+import MENU_ACTIVE_IMAGE from "/assets/images/settings/top-screen/clock/clock-active.webp";
+import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/clock/clock-disabled.png";
 import ALARM_IMAGE from "/assets/images/settings/top-screen/clock/alarm.webp";
 import TIME_IMAGE from "/assets/images/settings/top-screen/clock/time.webp";
 import DATE_IMAGE from "/assets/images/settings/top-screen/clock/date.webp";
@@ -8,24 +10,48 @@ const props = defineProps<{
   x: number;
   y: number;
   isOpen: boolean;
+  isAnyOtherMenuOpen: boolean;
 }>();
 
-const [menuImage, alarmImage, timeImage, dateImage] = useImages(
+const [
+  menuImage,
+  menuActiveImage,
+  menuDisabledImage,
+  alarmImage,
+  timeImage,
+  dateImage,
+] = useImages(
   MENU_IMAGE,
+  MENU_ACTIVE_IMAGE,
+  MENU_DISABLED_IMAGE,
   ALARM_IMAGE,
   TIME_IMAGE,
   DATE_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(
+      timeImage!,
+      48 - animation.stage2Offset,
+      -48 + animation.stage1Offset,
+    );
+    ctx.drawImage(
+      dateImage!,
+      0,
+      -96 + animation.stage2Offset + animation.stage1Offset,
+    );
+    ctx.drawImage(alarmImage!, 0, -48 + animation.stage1Offset);
 
-  if (props.isOpen) {
-    ctx.drawImage(alarmImage!, 0, -48);
-    ctx.drawImage(timeImage!, 48, -48);
-    ctx.drawImage(dateImage!, 0, -96);
+    ctx.drawImage(menuActiveImage!, 0, 0);
+  } else if (props.isAnyOtherMenuOpen) {
+    ctx.drawImage(menuDisabledImage!, 0, 0);
+  } else {
+    ctx.drawImage(menuImage!, 0, 0);
   }
 });