feat(home): navigation and outro animation to settings

app/components/Home/TopScreen/Calendar.vue

@@ -32,7 +32,7 @@ useRender((ctx) => {
 
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
-    : store.isOutro
+    : store.isOutro && store.outro.animateTop
       ? store.outro.stage1Opacity
       : 1;
   ctx.drawImage(calendarImage!, CALENDAR_LEFT - 3, CALENDAR_TOP - 33);
@@ -44,7 +44,7 @@ useRender((ctx) => {
 
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
-    : store.isOutro
+    : store.isOutro && store.outro.animateTop
       ? store.outro.stage2Opacity
       : 1;
   for (let col = 0; col < CALENDAR_ROWS + (extraRow ? 1 : 0); col += 1) {

app/components/Home/TopScreen/Clock.vue

@@ -56,14 +56,14 @@ function drawLine(
 useRender((ctx) => {
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
-    : store.isOutro
+    : store.isOutro && store.outro.animateTop
       ? store.outro.stage1Opacity
       : 1;
   ctx.drawImage(clockImage!, 13, 45);
 
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
-    : store.isOutro
+    : store.isOutro && store.outro.animateTop
       ? store.outro.stage2Opacity
       : 1;
   const now = new Date();

app/components/Home/TopScreen/StatusBar.vue

@@ -19,7 +19,8 @@ useRender((ctx) => {
 
   ctx.translate(0, store.isIntro ? store.intro.statusBarY : 0);
 
-  ctx.globalAlpha = store.isOutro ? store.outro.stage2Opacity : 1;
+  ctx.globalAlpha =
+    store.isOutro && store.outro.animateTop ? store.outro.stage2Opacity : 1;
   ctx.drawImage(statusBarImage!, 0, 0);
 
   ctx.fillStyle = "#ffffff";