diff options
| author | Mark Powers <mark@marks.kitchen> | 2024-07-14 16:17:59 -0500 |
|---|---|---|
| committer | Mark Powers <mark@marks.kitchen> | 2024-07-14 16:17:59 -0500 |
| commit | 0e742a485f3fa7d35d26b05980a293b5760e8418 (patch) | |
| tree | 97510b5e1979f7e02dbcb17ccbc699c4f97e63f2 /src/layouts | |
Diffstat (limited to 'src/layouts')
| -rw-r--r-- | src/layouts/MainLayout.vue | 92 |
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> |