feat(settings): animate transition to submenu (background and sliding)

app/components/Settings/BottomScreen/Menus/Clock/Menu.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{
-  x: number;
-  y: number;
-}>();
+const props = withDefaults(
+  defineProps<{
+    x: number;
+    y: number;
+    opacity?: number;
+  }>(),
+  {
+    opacity: 1,
+  },
+);
 
 const { onRender } = useScreen();
 
@@ -10,6 +16,7 @@ const settingsStore = useSettingsStore();
 const menusContext = inject<{
   isSubmenuSelected: ComputedRef<boolean>;
   selectedSubmenuParent: ComputedRef<string | null>;
+  selectedSubmenuExtraOffsetY: ComputedRef<number>;
 }>("menusContext")!;
 
 const { assets } = useAssets();
@@ -29,24 +36,33 @@ const isAnyOtherMenuOpen = computed(() => {
 
 const animation = useMenuAnimation("clock", isOpen);
 
+const submenuExtraOffset = (submenu: string) =>
+  settingsStore.selectedButton === submenu
+    ? menusContext.selectedSubmenuExtraOffsetY.value
+    : 0;
+
 onRender((ctx) => {
+  ctx.globalAlpha = props.opacity;
   ctx.translate(props.x, props.y);
 
   if (isOpen.value || animation.playing) {
     assets.images.settings.topScreen.clock.time.draw(
       ctx,
       48 - animation.stage2Offset,
-      -48 + animation.stage1Offset,
+      -48 + animation.stage1Offset + submenuExtraOffset("clockTime"),
     );
     assets.images.settings.topScreen.clock.date.draw(
       ctx,
       0,
-      -96 + animation.stage2Offset + animation.stage1Offset,
+      -96 +
+        animation.stage2Offset +
+        animation.stage1Offset +
+        submenuExtraOffset("clockDate"),
     );
     assets.images.settings.topScreen.clock.achievements.draw(
       ctx,
       0,
-      -48 + animation.stage1Offset,
+      -48 + animation.stage1Offset + submenuExtraOffset("clockAchievements"),
     );
 
     assets.images.settings.topScreen.clock.clockActive.draw(ctx, 0, 0);