feat: implement EditPage

1 files changed, 20 insertions, 3 deletions

diff --git a/src/App.vue b/src/App.vue
index 80e462e..ddccf26 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,11 +6,13 @@
           prepend-icon="mdi-home"
           title="Home"
           value="home"
+          @click="atHome = true"
         ></v-list-item>
         <v-list-item
           prepend-icon="mdi-pencil"
           title="Edit"
           value="edit"
+          @click="atHome = false"
         ></v-list-item>
         <v-list-item
           prepend-icon="mdi-theme-light-dark"
@@ -19,9 +21,17 @@
           @click="toggleTheme"
         ></v-list-item> </v-list
     ></v-navigation-drawer>
+    <v-snackbar color="grey" v-model="snackbar">
+      {{ snackbarText }}
+
+      <template v-slot:actions>
+        <v-btn variant="snackbarText" @click="snackbar = false"> Close </v-btn>
+      </template>
+    </v-snackbar>
     <v-main>
-      <v-container>
-        <HomePage class="float-end w-50" />
+      <v-container class="float-end w-50">
+        <HomePage v-if="atHome == true" />
+        <EditPage v-else @snackbar-notification="setSnackbarText" />
       </v-container>
     </v-main>
   </v-app>
@@ -30,18 +40,21 @@
 <script>
 import { useTheme } from "vuetify";
 import HomePage from "./components/HomePage.vue";
+import EditPage from "./components/EditPage.vue";
 
 export default {
   name: "App",
 
   components: {
     HomePage,
+    EditPage,
   },
 
   data: () => ({
     drawer: null,
+    atHome: true,
     snackbar: false,
-    snackbarColor: "black",
+    snackbarText: "Default snackbar text (End-user shouldn't see this)",
     bg: {
       backgroundColor: "grey",
       // backgroundImage: "url(https://wallpapercave.com/wp/wp9649930.jpg)",
@@ -65,6 +78,10 @@ export default {
     toggleDrawer() {
       this.drawer = !this.drawer;
     },
+    setSnackbarText(text) {
+      this.snackbarText = text;
+      this.snackbar = true;
+    },
   },
 };
 </script>