74 lines
1.4 KiB
Vue
74 lines
1.4 KiB
Vue
<template>
|
|
<q-layout view="hHh lpr lFf">
|
|
|
|
<q-header
|
|
elevated
|
|
class="bg-primary text-white"
|
|
>
|
|
<q-toolbar>
|
|
<q-btn
|
|
dense
|
|
flat
|
|
round
|
|
icon="menu"
|
|
@click="leftDrawerOpen = !leftDrawerOpen"
|
|
/>
|
|
|
|
<q-toolbar-title>
|
|
<q-avatar>
|
|
<img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
|
|
</q-avatar>
|
|
<span class="gt-xs">
|
|
Flaschengeist
|
|
</span>
|
|
</q-toolbar-title>
|
|
</q-toolbar>
|
|
</q-header>
|
|
|
|
<q-drawer
|
|
show-if-above
|
|
v-model="leftDrawerOpen"
|
|
side="left"
|
|
bordered
|
|
>
|
|
<essential-link
|
|
v-for="(link, index) in links"
|
|
:key="index"
|
|
:title="link.title"
|
|
:link="link.link"
|
|
:icon="link.icon"
|
|
>
|
|
|
|
</essential-link>
|
|
|
|
<!-- drawer content -->
|
|
</q-drawer>
|
|
|
|
<q-page-container>
|
|
<router-view />
|
|
</q-page-container>
|
|
|
|
</q-layout>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import EssentialLink from 'components/EssentialLink.vue';
|
|
|
|
import { defineComponent, ref } from '@vue/composition-api';
|
|
|
|
const links = [
|
|
{ title: 'home', icon: 'mdi-home' },
|
|
{ title: 'about', link: 'about', icon: 'mdi-information' },
|
|
];
|
|
|
|
export default defineComponent({
|
|
name: 'MainLayout',
|
|
components: { EssentialLink },
|
|
setup() {
|
|
const leftDrawerOpen = ref(true);
|
|
|
|
return { leftDrawerOpen, links };
|
|
},
|
|
});
|
|
</script>
|