1 files changed, 45 insertions, 4 deletions

diff --git a/src/App.vue b/src/App.vue
index 8c80550..80e462e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,29 +1,70 @@
 <template>
-  <v-app :style="bg">
+  <v-app @keyup.shift.tab="toggleDrawer" :style="bg">
+    <v-navigation-drawer temporary v-model="drawer" location="right"
+      ><v-list density="compact" nav>
+        <v-list-item
+          prepend-icon="mdi-home"
+          title="Home"
+          value="home"
+        ></v-list-item>
+        <v-list-item
+          prepend-icon="mdi-pencil"
+          title="Edit"
+          value="edit"
+        ></v-list-item>
+        <v-list-item
+          prepend-icon="mdi-theme-light-dark"
+          title="Theme"
+          value="theme"
+          @click="toggleTheme"
+        ></v-list-item> </v-list
+    ></v-navigation-drawer>
     <v-main>
       <v-container>
-        <MainPage class="float-end w-50" />
+        <HomePage class="float-end w-50" />
       </v-container>
     </v-main>
   </v-app>
 </template>
 
 <script>
-import MainPage from "./components/MainPage.vue";
+import { useTheme } from "vuetify";
+import HomePage from "./components/HomePage.vue";
 
 export default {
   name: "App",
 
   components: {
-    MainPage,
+    HomePage,
   },
 
   data: () => ({
+    drawer: null,
+    snackbar: false,
+    snackbarColor: "black",
     bg: {
       backgroundColor: "grey",
       // backgroundImage: "url(https://wallpapercave.com/wp/wp9649930.jpg)",
       backgroundPosition: "center",
     },
   }),
+
+  setup() {
+    const theme = useTheme();
+
+    return {
+      theme,
+      toggleTheme: () =>
+        (theme.global.name.value = theme.global.current.value.dark
+          ? "light"
+          : "dark"),
+    };
+  },
+
+  methods: {
+    toggleDrawer() {
+      this.drawer = !this.drawer;
+    },
+  },
 };
 </script>