<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>
