feat(settings): menu navigation (unanimated)

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import MENU_IMAGE from "/assets/images/settings/top-screen/user/user.webp";
+import BIRTHDAY_IMAGE from "/assets/images/settings/top-screen/user/birthday.webp";
+import COLOR_IMAGE from "/assets/images/settings/top-screen/user/color.webp";
+import MESSAGE_IMAGE from "/assets/images/settings/top-screen/user/message.webp";
+import USER_NAME_IMAGE from "/assets/images/settings/top-screen/user/user_name.webp";
+
+const props = defineProps<{
+  x: number;
+  y: number;
+  isOpen: boolean;
+}>();
+
+const [menuImage, birthdayImage, colorImage, messageImage, userNameImage] =
+  useImages(
+    MENU_IMAGE,
+    BIRTHDAY_IMAGE,
+    COLOR_IMAGE,
+    MESSAGE_IMAGE,
+    USER_NAME_IMAGE,
+  );
+
+useRender((ctx) => {
+  ctx.translate(props.x, props.y);
+
+  ctx.drawImage(menuImage!, 0, 0);
+
+  if (props.isOpen) {
+    ctx.drawImage(birthdayImage!, -48, -48);
+    ctx.drawImage(userNameImage!, 0, -48);
+    ctx.drawImage(messageImage!, 48, -48);
+    ctx.drawImage(colorImage!, 0, -96);
+  }
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>