1 files changed, 92 insertions, 0 deletions
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
new file mode 100644
index 0000000..86c7276
--- /dev/null
+++ b/src/layouts/MainLayout.vue
@@ -0,0 +1,92 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn
+          flat
+          dense
+          round
+          icon="menu"
+          aria-label="Menu"
+          @click="toggleLeftDrawer"
+        />
+
+        <q-toolbar-title>
+          Mark's Tracker
+        </q-toolbar-title>
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer
+      v-model="leftDrawerOpen"
+      show-if-above
+      bordered
+    >
+      <q-list>
+        <router-link to="/">
+          <q-item clickable>
+            <q-item-section avatar>
+              <q-icon name="list" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Main</q-item-label>
+            </q-item-section>
+          </q-item>
+        </router-link>
+        <router-link to="/books">
+          <q-item clickable>
+            <q-item-section avatar>
+              <q-icon name="menu_book" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Books</q-item-label>
+            </q-item-section>
+          </q-item>
+        </router-link>
+        <router-link to="/forms">
+          <q-item clickable>
+            <q-item-section avatar>
+              <q-icon name="edit" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Forms</q-item-label>
+            </q-item-section>
+          </q-item>
+        </router-link>
+        <router-link to="/workouts">
+          <q-item clickable>
+            <q-item-section avatar>
+              <q-icon name="directions_bike" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Workouts</q-item-label>
+            </q-item-section>
+          </q-item>
+        </router-link>
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'MainLayout',
+
+  setup () {
+    const leftDrawerOpen = ref(false)
+
+    return {
+      leftDrawerOpen,
+      toggleLeftDrawer () {
+        leftDrawerOpen.value = !leftDrawerOpen.value
+      }
+    }
+  }
+})
+</script>