feat(settings): menu navigation (unanimated)

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import MENU_IMAGE from "/assets/images/settings/top-screen/clock/clock.webp";
+import ALARM_IMAGE from "/assets/images/settings/top-screen/clock/alarm.webp";
+import TIME_IMAGE from "/assets/images/settings/top-screen/clock/time.webp";
+import DATE_IMAGE from "/assets/images/settings/top-screen/clock/date.webp";
+
+const props = defineProps<{
+  x: number;
+  y: number;
+  isOpen: boolean;
+}>();
+
+const [menuImage, alarmImage, timeImage, dateImage] = useImages(
+  MENU_IMAGE,
+  ALARM_IMAGE,
+  TIME_IMAGE,
+  DATE_IMAGE,
+);
+
+useRender((ctx) => {
+  ctx.translate(props.x, props.y);
+
+  ctx.drawImage(menuImage!, 0, 0);
+
+  if (props.isOpen) {
+    ctx.drawImage(alarmImage!, 0, -48);
+    ctx.drawImage(timeImage!, 48, -48);
+    ctx.drawImage(dateImage!, 0, -96);
+  }
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>