From 6df6c5a7c9e20977afbdd48cc9934dd522f5656e Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Sat, 13 Dec 2025 21:56:52 +0100
Subject: [PATCH] feat: query param based navigation

---
 .../Settings/BottomScreen/Menus/Menus.vue       |  4 +++-
 app/pages/-settings.vue                         | 17 -----------------
 app/pages/contact.vue                           | 17 -----------------
 app/pages/index.vue                             | 13 +++++++++++--
 app/pages/projects.vue                          | 17 -----------------
 app/stores/contact.ts                           |  3 ++-
 app/stores/home.ts                              |  3 ++-
 7 files changed, 18 insertions(+), 56 deletions(-)
 delete mode 100644 app/pages/-settings.vue
 delete mode 100644 app/pages/contact.vue
 delete mode 100644 app/pages/projects.vue

diff --git a/app/components/Settings/BottomScreen/Menus/Menus.vue b/app/components/Settings/BottomScreen/Menus/Menus.vue
index f1f8962..f3c33a6 100644
--- a/app/components/Settings/BottomScreen/Menus/Menus.vue
+++ b/app/components/Settings/BottomScreen/Menus/Menus.vue
@@ -36,6 +36,7 @@ const { selectedButton: selected, selectorPosition } = useButtonNavigation({
     if (isSubmenu(buttonName)) {
       router.push({
         query: {
+          screen: "settings",
           menu: buttonName,
         },
       });
@@ -153,11 +154,12 @@ watch(
       if (isSubmenu(newSelected)) {
         router.push({
           query: {
+            screen: "settings",
             menu: newSelected.split(/[A-Z]/)[0],
           },
         });
       } else {
-        router.push({ query: { menu: undefined } });
+        router.push({ query: { screen: "settings", menu: undefined } });
       }
     }
   },
diff --git a/app/pages/-settings.vue b/app/pages/-settings.vue
deleted file mode 100644
index b05a1f2..0000000
--- a/app/pages/-settings.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-</script>
-
-<template>
-  <NuxtLayout name="default">
-    <template #top>
-      <SettingsTopScreen />
-    </template>
-
-    <template #bottom>
-      <SettingsBottomScreen />
-    </template>
-  </NuxtLayout>
-</template>
diff --git a/app/pages/contact.vue b/app/pages/contact.vue
deleted file mode 100644
index 6a99c5c..0000000
--- a/app/pages/contact.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-</script>
-
-<template>
-  <NuxtLayout name="default">
-    <template #top>
-      <ContactTopScreen />
-    </template>
-
-    <template #bottom>
-      <ContactBottomScreen />
-    </template>
-  </NuxtLayout>
-</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 4b5bee4..07da3ff 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -2,16 +2,25 @@
 definePageMeta({
   layout: false,
 });
+
+const route = useRoute();
+const screen = computed(() => route.query.screen as string | undefined);
 </script>
 
 <template>
   <NuxtLayout name="default">
     <template #top>
-      <HomeTopScreen />
+      <HomeTopScreen v-if="!screen" />
+      <ContactTopScreen v-else-if="screen === 'contact'" />
+      <ProjectsTopScreen v-else-if="screen === 'projects'" />
+      <SettingsTopScreen v-else-if="screen === 'settings'" />
     </template>
 
     <template #bottom>
-      <HomeBottomScreen />
+      <HomeBottomScreen v-if="!screen" />
+      <ContactBottomScreen v-else-if="screen === 'contact'" />
+      <ProjectsBottomScreen v-else-if="screen === 'projects'" />
+      <SettingsBottomScreen v-else-if="screen === 'settings'" />
     </template>
   </NuxtLayout>
 </template>
diff --git a/app/pages/projects.vue b/app/pages/projects.vue
deleted file mode 100644
index ab98a1e..0000000
--- a/app/pages/projects.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-</script>
-
-<template>
-  <NuxtLayout name="default">
-    <template #top>
-      <ProjectsTopScreen />
-    </template>
-
-    <template #bottom>
-      <ProjectsBottomScreen />
-    </template>
-  </NuxtLayout>
-</template>
diff --git a/app/stores/contact.ts b/app/stores/contact.ts
index 9f348a2..f004c9e 100644
--- a/app/stores/contact.ts
+++ b/app/stores/contact.ts
@@ -96,7 +96,8 @@ export const useContactStore = defineStore("contact", {
         onComplete: () => {
           setTimeout(() => {
             this.isOutro = false;
-            navigateTo("/");
+            const router = useRouter();
+            router.push({ query: {} });
           }, 2000);
         },
       });
diff --git a/app/stores/home.ts b/app/stores/home.ts
index a54132d..5fb61b0 100644
--- a/app/stores/home.ts
+++ b/app/stores/home.ts
@@ -61,7 +61,8 @@ export const useHomeStore = defineStore("home", {
       const timeline = gsap.timeline({
         onComplete: () => {
           this.isOutro = true;
-          navigateTo(`/${to}`);
+          const router = useRouter();
+          router.push({ query: { screen: to } });
         },
       });