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

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import OptionsMenu from "./OptionsMenu.vue";
-import ClockMenu from "./ClockMenu.vue";
-import UserMenu from "./UserMenu.vue";
-import TouchScreenMenu from "./TouchScreenMenu.vue";
+import OptionsMenu from "./Options/Menu.vue";
+import ClockMenu from "./Clock/Menu.vue";
+import UserMenu from "./User/Menu.vue";
+import TouchScreenMenu from "./TouchScreen/Menu.vue";
 import Selector from "~/components/Common/ButtonSelector.vue";
 
 const { selectedButton: selected, selectorPosition } = useButtonNavigation({
@@ -26,6 +26,11 @@ const { selectedButton: selected, selectorPosition } = useButtonNavigation({
     touchScreen: [175, 119, 49, 49],
   },
   initialButton: "options",
+  onButtonClick: (buttonName: string) => {
+    if (isSubmenu(buttonName)) {
+      settingsStore.pushNavigation(buttonName);
+    }
+  },
   navigation: {
     options: {
       right: "clock",
@@ -101,6 +106,13 @@ const { selectedButton: selected, selectorPosition } = useButtonNavigation({
 
 const settingsStore = useSettingsStore();
 
+const isSubmenu = (buttonName: string) => {
+  return (
+    /^(options|clock|user|touchScreen)[A-Z]/.test(buttonName) &&
+    !["options", "clock", "user", "touchScreen"].includes(buttonName)
+  );
+};
+
 watch(
   selected,
   (newSelected) => {

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/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>