127 lines
3.4 KiB
Vue
127 lines
3.4 KiB
Vue
<template>
|
|
<q-layout view="hhh Lpr lFf">
|
|
<q-header elevated class="bg-white text-green-8 shadow-2">
|
|
<q-toolbar class="">
|
|
<div class="q-pa-md q-gutter-sm">
|
|
<q-avatar size="60px">
|
|
<img src="https://www.designtagebuch.de/wp-content/uploads/mediathek//2015/01/buga2019_designtagebuch1-700x500.png">
|
|
</q-avatar>
|
|
</div>
|
|
<q-toolbar-title>GeoCaching
|
|
</q-toolbar-title>
|
|
<q-fab color="green-3" text-color="black" icon="menu" direction="down">
|
|
<q-fab-action color="green-3" text-color="black" to="/" icon="directions" />
|
|
<q-fab-action color="green-3" text-color="black" to="/CacheView" icon="map" />
|
|
<q-fab-action color="green-3" text-color="black" to="/" icon="list" />
|
|
<q-fab-action color="green-3" text-color="black" to="/Login" icon="perm_identity" />
|
|
<q-fab-action color="green-3" text-color="black" to="/" icon="logout" />
|
|
</q-fab>
|
|
<!--<div>Quasar v{{ $q.version }}</div>-->
|
|
</q-toolbar>
|
|
</q-header>
|
|
|
|
<q-drawer
|
|
side="right"
|
|
v-model="rightDrawerOpen"
|
|
bordered
|
|
show-if-above
|
|
:mini="miniState"
|
|
@mouseover="miniState = false"
|
|
@mouseout="miniState = true"
|
|
content-class="bg-green-1">
|
|
<q-list>
|
|
<q-item-label header>Essential Links</q-item-label>
|
|
<q-item
|
|
clickable
|
|
tag="a"
|
|
target="_blank"
|
|
to="/CacheView"
|
|
>
|
|
<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
|
|
tag="a"
|
|
target="_blank"
|
|
href=""
|
|
>
|
|
<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
|
|
tag="a"
|
|
target="_blank"
|
|
href=""
|
|
>
|
|
<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
|
|
tag="a"
|
|
target="_blank"
|
|
to="/Login"
|
|
>
|
|
<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
|
|
tag="a"
|
|
target="_blank"
|
|
href=""
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="logout" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>Abmelden</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,
|
|
RightDrawerOpen: true,
|
|
miniState: true
|
|
};
|
|
},
|
|
methods: {
|
|
openURL
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|