feat(settings): menu animations

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

@@ -98,13 +98,44 @@ const { selectedButton: selected, selectorPosition } = useButtonNavigation({
     },
   },
 });
+
+const isMenuOpen = (menu: string) => {
+  const regex = new RegExp(`^${menu}[A-Z]`);
+  return regex.test(selected.value);
+};
+
+const isAnyOtherMenuOpen = (excludeMenu: string) => {
+  return ["options", "clock", "user"]
+    .filter((menu) => menu !== excludeMenu)
+    .some((menu) => isMenuOpen(menu));
+};
 </script>
 
 <template>
-  <OptionsMenu :x="33" :y="121" :is-open="/^options[A-Z]/.test(selected)" />
-  <ClockMenu :x="81" :y="121" :is-open="/^clock[A-Z]/.test(selected)" />
-  <UserMenu :x="129" :y="121" :is-open="/^user[A-Z]/.test(selected)" />
-  <TouchScreenMenu :x="177" :y="121" :opacity="1" />
+  <OptionsMenu
+    :x="33"
+    :y="121"
+    :is-open="isMenuOpen('options')"
+    :is-any-other-menu-open="isAnyOtherMenuOpen('options')"
+  />
+  <ClockMenu
+    :x="81"
+    :y="121"
+    :is-open="isMenuOpen('clock')"
+    :is-any-other-menu-open="isAnyOtherMenuOpen('clock')"
+  />
+  <UserMenu
+    :x="129"
+    :y="121"
+    :is-open="isMenuOpen('user')"
+    :is-any-other-menu-open="isAnyOtherMenuOpen('user')"
+  />
+  <TouchScreenMenu
+    :x="177"
+    :y="121"
+    :opacity="1"
+    :is-any-other-menu-open="isAnyOtherMenuOpen('touchScreen')"
+  />
 
   <Selector :rect="selectorPosition" :opacity="1" />
 </template>