aboutsummaryrefslogtreecommitdiff
path: root/src/layouts/MainLayout.vue
diff options
context:
space:
mode:
authorMark Powers <mark@marks.kitchen>2024-07-14 16:17:59 -0500
committerMark Powers <mark@marks.kitchen>2024-07-14 16:17:59 -0500
commit0e742a485f3fa7d35d26b05980a293b5760e8418 (patch)
tree97510b5e1979f7e02dbcb17ccbc699c4f97e63f2 /src/layouts/MainLayout.vue
Initial commitHEADmaster
Diffstat (limited to 'src/layouts/MainLayout.vue')
-rw-r--r--src/layouts/MainLayout.vue92
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>