85 lines
1.6 KiB
Vue
85 lines
1.6 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>
|
|
Quasar App
|
|
</q-toolbar-title>
|
|
<q-btn to="/" flat icon="home" label="Home" />
|
|
<q-btn to="/about" flat icon="info" label="About" />
|
|
<LogoutButton/>
|
|
|
|
</q-toolbar>
|
|
</q-header>
|
|
|
|
<!-- <q-drawer
|
|
v-model="leftDrawerOpen"
|
|
show-if-above
|
|
bordered
|
|
>
|
|
<q-list>
|
|
<q-item-label
|
|
header
|
|
>
|
|
Essential Links
|
|
</q-item-label>
|
|
|
|
<EssentialLink
|
|
v-for="link in linksList"
|
|
:key="link.title"
|
|
v-bind="link"
|
|
/>
|
|
</q-list>
|
|
</q-drawer> -->
|
|
|
|
<q-page-container>
|
|
<router-view />
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import EssentialLink from 'components/EssentialLink.vue'
|
|
import LogoutButton from 'components/LogoutButton.vue'
|
|
|
|
defineOptions({
|
|
name: 'MainLayout'
|
|
})
|
|
|
|
const linksList = [
|
|
{
|
|
title: '1',
|
|
caption: 'quasar.dev',
|
|
icon: 'school',
|
|
link: '/login'
|
|
},
|
|
{
|
|
title: '2',
|
|
caption: 'github.com/quasarframework',
|
|
icon: 'code',
|
|
link: '/'
|
|
},
|
|
{
|
|
title: '3',
|
|
caption: 'chat.quasar.dev',
|
|
icon: 'chat',
|
|
link: '/chat'
|
|
}
|
|
]
|
|
|
|
const leftDrawerOpen = ref(false)
|
|
|
|
function toggleLeftDrawer () {
|
|
leftDrawerOpen.value = !leftDrawerOpen.value
|
|
}
|
|
</script>
|