From 0297f0e08390b99930051b153a95e5a4100082c8 Mon Sep 17 00:00:00 2001
From: 135e2 <135e2@135e2.tk>
Date: Mon, 8 Aug 2022 14:37:19 +0800
Subject: feat: implement EditPage

---
 src/App.vue | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

(limited to 'src/App.vue')

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>
-- 
cgit v1.2.3