60 lines
1.1 KiB
Vue
60 lines
1.1 KiB
Vue
<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>
|
|
<router-link to="/" style="text-decoration: none; color: inherit;">Gymboard</router-link>
|
|
</q-toolbar-title>
|
|
</q-toolbar>
|
|
</q-header>
|
|
|
|
<q-drawer
|
|
v-model="leftDrawerOpen"
|
|
show-if-above
|
|
bordered
|
|
>
|
|
<q-list>
|
|
<q-item-label
|
|
header
|
|
>
|
|
Pages
|
|
</q-item-label>
|
|
<q-item clickable>First Page</q-item>
|
|
<q-item clickable>Second Page</q-item>
|
|
</q-list>
|
|
</q-drawer>
|
|
|
|
<q-page-container>
|
|
<router-view />
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from 'vue';
|
|
|
|
export default defineComponent({
|
|
name: 'MainLayout',
|
|
|
|
setup () {
|
|
const leftDrawerOpen = ref(false)
|
|
|
|
return {
|
|
leftDrawerOpen,
|
|
toggleLeftDrawer () {
|
|
leftDrawerOpen.value = !leftDrawerOpen.value
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|