From 7ef7490538dd580ddab7734ae6609203391180e6 Mon Sep 17 00:00:00 2001
From: 135e2 <135e2@135e2.tk>
Date: Sun, 7 Aug 2022 22:41:49 +0800
Subject: feat: implement nav-drawer & markdown parser

---
 src/App.vue | 49 +++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 45 insertions(+), 4 deletions(-)

(limited to 'src/App.vue')

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