Basic layout and navigation

src/views/HomePage.vue

@@ -13,27 +13,45 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-card>
-        <ion-card-header class="two-column">
-          <div class="header-column">
-            <ion-card-title>Board</ion-card-title>
-            <ion-card-subtitle>v1.1.1</ion-card-subtitle>
-          </div>
-          <div>
-            <ion-button>Scan</ion-button>
-          </div>
-        </ion-card-header>
-
-        <ion-card-content>
-          blah blah blah
-        </ion-card-content>
-      </ion-card>
+      <home-card v-if="shownCard == 1" @archive="showArchive" @disconnect="showScan" @update="showDetails"></home-card>
+      <scan-card v-else-if="shownCard == 0" @connect="showHome"></scan-card>
+      <details-card v-else-if="shownCard == 2" @back="showHome" @choose="showFlash"></details-card>
+      <archive-card v-else-if="shownCard == 3" @back="showHome" @details="showDetails"></archive-card>
+      <flash-card v-else-if="shownCard == 4" @back="showHome"></flash-card>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonButton } from '@ionic/vue';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import HomeCard from "@/components/HomeCard.vue";
+import ScanCard from "@/components/ScanCard.vue";
+import DetailsCard from "@/components/DetailsCard.vue";
+import ArchiveCard from "@/components/ArchiveCard.vue";
+import FlashCard from "@/components/FlashCard.vue";
+import {ref} from "vue";
+
+const shownCard = ref<number>(0);
+
+const showArchive = () => {
+  shownCard.value = 3;
+}
+
+const showHome = () => {
+  shownCard.value = 1;
+}
+
+const showDetails = () => {
+  shownCard.value = 2;
+}
+
+const showFlash = () => {
+  shownCard.value = 4;
+}
+
+const showScan = () => {
+  shownCard.value = 0;
+}
 </script>
 
 <style scoped>
@@ -65,14 +83,4 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCard, IonCardC
   text-decoration: none;
 }
 
-.two-column {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-content: flex-start;
-}
-
-.header-column {
-  width: 75%;
-}
 </style>