feat: query param based navigation

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 } });
       }
     }
   },

app/pages/-settings.vue

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

app/pages/contact.vue

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

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>

app/pages/projects.vue

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

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);
         },
       });

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 } });
         },
       });