4 files changed, 80 insertions, 29 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>
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
new file mode 100644
index 0000000..9aaf6c4
--- /dev/null
+++ b/src/components/HomePage.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="d-flex align-end justify-start flex-row-reverse flex-wrap">
+    <SubCard
+      class="ma-2 pa-2"
+      v-for="n in 6"
+      :key="n"
+      :content="markdownToHtml"
+    />
+  </div>
+</template>
+
+<script>
+import SubCard from "./SubCard.vue";
+import { marked } from "marked";
+
+export default {
+  name: "HomePage",
+
+  components: {
+    SubCard,
+  },
+
+  computed: {
+    markdownToHtml() {
+      return marked(this.content);
+    },
+  },
+
+  data: () => ({
+    content: `~~Default content :D~~`,
+  }),
+};
+</script>
diff --git a/src/components/MainPage.vue b/src/components/MainPage.vue
deleted file mode 100644
index 97dad53..0000000
--- a/src/components/MainPage.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div class="d-flex align-end justify-start flex-row-reverse flex-wrap">
-    <SubCard class="ma-2 pa-2" v-for="n in 6" :key="n" />
-  </div>
-</template>
-
-<script>
-import SubCard from "./SubCard.vue";
-
-export default {
-  name: "MainPage",
-
-  components: {
-    SubCard,
-  },
-
-  data: () => ({
-    //
-  }),
-};
-</script>
diff --git a/src/components/SubCard.vue b/src/components/SubCard.vue
index 5b611f6..ab03ac3 100644
--- a/src/components/SubCard.vue
+++ b/src/components/SubCard.vue
@@ -2,9 +2,7 @@
   <v-card variant="outlined">
     <v-card-item>
       <v-card-title>{{ title }}</v-card-title>
-      <div class="text-caption">
-        {{ content }}
-      </div>
+      <div v-html="content"></div>
     </v-card-item>
   </v-card>
 </template>
@@ -14,7 +12,7 @@ export default {
   name: "SubCard",
   data: () => ({
     title: "Default Title",
-    content: "Bruh",
   }),
+  props: ["content"],
 };
 </script>