labswp_2019_sose_geocaching/frontend/src/layouts/MyLayout.vue
2019-04-11 12:01:10 +02:00

131 lines
3.0 KiB
Vue

<template>
<q-layout view="hhh Lpr lFf">
<q-header id="qheader" class="bg-white text-grey-14" elevated>
<q-toolbar class="q-pa-md">
<q-img src="statics/buga_logo.svg" style="max-width: 40px;" class="q-mr-sm"/>
<q-toolbar-title>
BuGa Geocaching
</q-toolbar-title>
<q-btn
flat
dense
ripple
@click="leftDrawerOpen = !leftDrawerOpen"
aria-label="Menu"
>
<q-icon name="menu"/>
</q-btn>
<!--<div>Quasar v{{ $q.version }}</div>-->
</q-toolbar>
</q-header>
<q-drawer
side="left"
v-model="leftDrawerOpen"
bordered
show-if-above
content-class="">
<q-list>
<q-item-label header>BuGa Geocaching</q-item-label>
<q-item
clickable
class="text-primary"
v-ripple
tag="a"
to="/"
>
<q-item-section avatar>
<q-icon name="directions"/>
</q-item-section>
<q-item-section>
<q-item-label>Startseite</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
class="text-primary"
v-ripple
tag="a"
to="/Overview"
>
<q-item-section avatar>
<q-icon name="map"/>
</q-item-section>
<q-item-section>
<q-item-label>Caches</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
class="text-primary"
v-ripple
tag="a"
to="/ranking"
>
<q-item-section avatar>
<q-icon name="list"/>
</q-item-section>
<q-item-section>
<q-item-label>Rangliste</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
class="text-primary"
v-ripple
tag="a"
to="/Profile"
>
<q-item-section avatar>
<q-icon name="perm_identity"/>
</q-item-section>
<q-item-section>
<q-item-label>Profil</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
class="text-primary"
v-ripple
tag="a"
to="/Login"
>
<q-item-section avatar>
<q-icon name="logout"/>
</q-item-section>
<q-item-section>
<q-item-label>Login</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-drawer>
<q-page-container>
<router-view/>
</q-page-container>
</q-layout>
</template>
<script>
import {openURL} from "quasar";
export default {
name: "MyLayout",
data() {
return {
leftDrawerOpen: this.$q.platform.is.desktop,
//menuButtonVisible: !this.$q.platform.is.desktop,
//leftDrawerOpen: true,
//miniState: true
};
},
methods: {
openURL
}
};
</script>
<style></style>