feat(settings): intro and outro animation

app/components/Settings/BottomScreen/BottomScreen.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import Background from "./Background.vue";
 import Menus from "./Menus/Menus.vue";
+
+const store = useSettingsStore();
 </script>
 
 <template>
   <Background />
-  <CommonBars />
+  <CommonBars :y-offset="store.barOffsetY" />
   <Menus />
   <CommonConfirmationModal />
   <AchievementsFadeToBlack />

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

@@ -21,6 +21,10 @@ import Selector from "~/components/Common/ButtonSelector.vue";
 const app = useAppStore();
 const settingsStore = useSettingsStore();
 
+if (app.previousScreen === "home") {
+  settingsStore.selectedButton = "options";
+}
+
 const isMainMenu = (button: string): button is SettingsMenu =>
   SETTINGS_MENUS.includes(button as SettingsMenu);
 
@@ -195,30 +199,78 @@ const viewComponents: Record<string, Component> = {
 
   touchScreenTapTap: TouchScreenTapTap,
 };
+
+const selectorXOffset = computed(() => {
+  const menu = isMainMenu(selected.value)
+    ? selected.value
+    : getParentMenu(selected.value);
+
+  switch (menu) {
+    case "clock":
+      return Math.min(0, settingsStore.menuOffsets[1]);
+    case "user":
+      return Math.min(
+        0,
+        settingsStore.menuOffsets[1] + settingsStore.menuOffsets[2],
+      );
+    case "touchScreen":
+      return Math.min(
+        0,
+        settingsStore.menuOffsets[1] +
+          settingsStore.menuOffsets[2] +
+          settingsStore.menuOffsets[3],
+      );
+    default:
+      return 0;
+  }
+});
 </script>
 
 <template>
   <template v-if="!settingsStore.currentSubMenu">
-    <OptionsMenu :x="33" :y="121" />
-    <ClockMenu :x="81" :y="121" />
-    <UserMenu :x="129" :y="121" />
-    <TouchScreenMenu :x="177" :y="121" :opacity="1" />
+    <TouchScreenMenu
+      :x="
+        177 +
+        settingsStore.menuOffsets[1] +
+        settingsStore.menuOffsets[2] +
+        settingsStore.menuOffsets[3]
+      "
+      :y="121 + settingsStore.menuYOffset"
+      :opacity="1"
+    />
+    <UserMenu
+      :x="129 + settingsStore.menuOffsets[1] + settingsStore.menuOffsets[2]"
+      :y="121 + settingsStore.menuYOffset"
+    />
+    <ClockMenu
+      :x="81 + settingsStore.menuOffsets[1]"
+      :y="121 + settingsStore.menuYOffset"
+    />
+    <OptionsMenu :x="33" :y="121 + settingsStore.menuYOffset" />
 
-    <Selector :rect="selectorPosition" :opacity="1" />
+    <Selector
+      :rect="[
+        selectorPosition[0] + selectorXOffset,
+        selectorPosition[1] + settingsStore.menuYOffset,
+        selectorPosition[2],
+        selectorPosition[3],
+      ]"
+      :opacity="1"
+    />
 
     <CommonButtons
       v-if="isSubmenuSelected"
-      :y-offset="0"
+      :y-offset="settingsStore.barOffsetY"
       :b-label="$t('common.goBack')"
       :a-label="$t('common.select')"
       @activate-b="select(getParentMenu(selected))"
     />
     <CommonButtons
       v-else
-      :y-offset="0"
+      :y-offset="settingsStore.barOffsetY"
       :b-label="$t('common.quit')"
       :a-label="$t('common.select')"
-      @activate-b="app.navigateTo('home')"
+      @activate-b="settingsStore.animateOutro()"
     />
   </template>
   <component :is="viewComponents[settingsStore.currentSubMenu]" v-else />