adding initial data

src/App.vue

@@ -0,0 +1,79 @@
+<template>
+  <v-app>
+    <v-navigation-drawer
+      v-model="primaryDrawer.model"
+      :clipped="false"
+      :floating="false"
+      :mini-variant="false"
+      app
+      :expand-on-hover="true"
+      overflow
+      color="#070042"
+    >
+      <v-list>
+        <v-list-item
+          v-for="item in primaryDrawer.items"
+          :key="item.title"
+          link
+          :to="item.link"
+        >
+          <v-list-item-icon>
+            <v-icon >{{ item.icon }}</v-icon>
+          </v-list-item-icon>
+
+          <v-list-item-content >
+            <v-list-item-title>{{ item.title }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-app-bar :clipped-left="false" app color="#070042" >
+      <v-app-bar-nav-icon
+        @click.stop="primaryDrawer.model = !primaryDrawer.model"
+      ></v-app-bar-nav-icon>
+      <v-toolbar-title >Onmyoji Deck Builder</v-toolbar-title>
+    </v-app-bar>
+
+    <v-main>
+      <router-view></router-view>
+    </v-main>
+
+    <v-footer :inset="false" color="#04002E" app>
+      <!-- <span class="px-4"
+        >&copy; {{ new Date().getFullYear() }} Daniel Tomlinson</span
+      >
+      <v-spacer /> -->
+      <span class="px-2">
+        <v-icon>{{ icons.mdiGithub }}</v-icon> View on GitHub
+      </span>
+    </v-footer>
+  </v-app>
+</template>
+
+<script>
+import {
+  mdiViewDashboard,
+  mdiCalculator,
+  mdiHelpBox,
+  mdiGithub,
+} from "@mdi/js";
+
+export default {
+  name: "App",
+
+  data: () => ({
+    primaryDrawer: {
+      model: true,
+      items: [
+        { title: "Home", icon: mdiViewDashboard, link: "/" },
+        { title: "Deck Builder", icon: mdiCalculator, link: "deck-builder" },
+        { title: "Help", icon: mdiHelpBox, link: "help" },
+      ],
+    },
+    icons: {
+      mdiGithub: mdiGithub,
+    },
+  }),
+};
+</script>