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

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

@@ -20,6 +20,16 @@ import Selector from "~/components/Common/ButtonSelector.vue";
 
 const app = useAppStore();
 const settingsStore = useSettingsStore();
+const { assets } = useAssets();
+const { onRender } = useScreen();
+
+onRender((ctx) => {
+  if (settingsStore.submenuBackground.opacity > 0) {
+    ctx.globalAlpha = settingsStore.submenuBackground.opacity;
+    ctx.translate(0, settingsStore.submenuBackground.offsetY);
+    assets.images.home.topScreen.background.draw(ctx, 0, 0);
+  }
+});
 
 if (app.previousScreen === "home") {
   settingsStore.selectedButton = "options";
@@ -150,6 +160,7 @@ const { select, selected, selectorPosition } = useButtonNavigation({
   disabled: computed(
     () =>
       settingsStore.currentSubMenu !== null ||
+      settingsStore.submenuTransition.opacity < 1 ||
       settingsStore.isIntro ||
       settingsStore.isOutro ||
       settingsStore.animatingNotification,
@@ -165,9 +176,16 @@ const selectedSubmenuParent = computed(() =>
   isSubmenuSelected.value ? getParentMenu(selected.value) : null,
 );
 
+const selectedSubmenuExtraOffsetY = computed(
+  () =>
+    settingsStore.submenuTransition.selectorOffsetY -
+    settingsStore.submenuTransition.offsetY,
+);
+
 provide("menusContext", {
   isSubmenuSelected,
   selectedSubmenuParent,
+  selectedSubmenuExtraOffsetY,
 });
 
 watch(
@@ -231,8 +249,20 @@ const selectorXOffset = computed(() => {
   }
 });
 
+const selectorTransitionOffsetY = computed(() => {
+  if (isSubmenuSelected.value || selected.value === "touchScreen") {
+    return settingsStore.submenuTransition.selectorOffsetY;
+  }
+  return settingsStore.submenuTransition.offsetY;
+});
+
 const handleActivateB = () => {
-  if (settingsStore.isIntro || settingsStore.isOutro) return;
+  if (
+    settingsStore.isIntro ||
+    settingsStore.isOutro ||
+    settingsStore.submenuTransition.opacity < 1
+  )
+    return;
 
   if (isSubmenuSelected.value) {
     select(getParentMenu(selected.value));
@@ -251,27 +281,53 @@ const handleActivateB = () => {
         settingsStore.menuOffsets[2] +
         settingsStore.menuOffsets[3]
       "
-      :y="121 + settingsStore.menuYOffset"
-      :opacity="1"
+      :y="
+        121 +
+        settingsStore.menuYOffset +
+        (selected === 'touchScreen'
+          ? settingsStore.submenuTransition.selectorOffsetY
+          : settingsStore.submenuTransition.offsetY)
+      "
+      :opacity="settingsStore.submenuTransition.opacity"
     />
     <UserMenu
       :x="129 + settingsStore.menuOffsets[1] + settingsStore.menuOffsets[2]"
-      :y="121 + settingsStore.menuYOffset"
+      :y="
+        121 +
+        settingsStore.menuYOffset +
+        settingsStore.submenuTransition.offsetY
+      "
+      :opacity="settingsStore.submenuTransition.opacity"
     />
     <ClockMenu
       :x="81 + settingsStore.menuOffsets[1]"
-      :y="121 + settingsStore.menuYOffset"
+      :y="
+        121 +
+        settingsStore.menuYOffset +
+        settingsStore.submenuTransition.offsetY
+      "
+      :opacity="settingsStore.submenuTransition.opacity"
+    />
+    <OptionsMenu
+      :x="33"
+      :y="
+        121 +
+        settingsStore.menuYOffset +
+        settingsStore.submenuTransition.offsetY
+      "
+      :opacity="settingsStore.submenuTransition.opacity"
     />
-    <OptionsMenu :x="33" :y="121 + settingsStore.menuYOffset" />
 
     <Selector
       :rect="[
         selectorPosition[0] + selectorXOffset,
-        selectorPosition[1] + settingsStore.menuYOffset,
+        selectorPosition[1] +
+          settingsStore.menuYOffset +
+          selectorTransitionOffsetY,
         selectorPosition[2],
         selectorPosition[3],
       ]"
-      :opacity="1"
+      :opacity="settingsStore.submenuTransition.opacity"
     />
 
     <CommonButtons