feat(settings): render top and bottom bar, implement notifications stack and submenu navigation

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+useRender((ctx) => {
+  ctx.font = "10px NDS10";
+  ctx.fillStyle = "#000000";
+  ctx.fillText("GBA Mode", 10, 20);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+useRender((ctx) => {
+  ctx.font = "10px NDS10";
+  ctx.fillStyle = "#000000";
+  ctx.fillText("Language", 10, 20);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import MENU_IMAGE from "/assets/images/settings/top-screen/options/options.webp";
+import MENU_ACTIVE_IMAGE from "/assets/images/settings/top-screen/options/options-active.png";
+import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/options/options-disabled.png";
+import GBA_MODE_IMAGE from "/assets/images/settings/top-screen/options/gba-mode.webp";
+import LANGUAGE_IMAGE from "/assets/images/settings/top-screen/options/language.webp";
+import START_UP_IMAGE from "/assets/images/settings/top-screen/options/start-up.webp";
+
+const props = defineProps<{
+  x: number;
+  y: number;
+}>();
+
+const settingsStore = useSettingsStore();
+
+const [
+  menuImage,
+  menuActiveImage,
+  menuDisabledImage,
+  gbaModeImage,
+  languageImage,
+  startUpImage,
+] = useImages(
+  MENU_IMAGE,
+  MENU_ACTIVE_IMAGE,
+  MENU_DISABLED_IMAGE,
+  GBA_MODE_IMAGE,
+  LANGUAGE_IMAGE,
+  START_UP_IMAGE,
+);
+
+const isOpen = computed(() => settingsStore.isMenuOpen("options"));
+const isAnyOtherMenuOpen = computed(() =>
+  settingsStore.isAnyOtherMenuOpen("options"),
+);
+
+const animation = useMenuAnimation(isOpen);
+
+useRender((ctx) => {
+  ctx.translate(props.x, props.y);
+
+  if (isOpen.value || animation.playing) {
+    ctx.drawImage(languageImage!, 0, -48 + animation.stage1Offset);
+    ctx.drawImage(
+      gbaModeImage!,
+      48 - animation.stage2Offset,
+      -48 + animation.stage1Offset,
+    );
+    ctx.drawImage(
+      startUpImage!,
+      0,
+      -96 + animation.stage2Offset + animation.stage1Offset,
+    );
+
+    ctx.drawImage(menuActiveImage!, 0, 0);
+  } else if (isAnyOtherMenuOpen.value) {
+    ctx.drawImage(menuDisabledImage!, 0, 0);
+  } else {
+    ctx.drawImage(menuImage!, 0, 0);
+  }
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+useRender((ctx) => {
+  ctx.font = "10px NDS10";
+  ctx.fillStyle = "#000000";
+  ctx.fillText("Startup", 10, 20);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>