<template>
  <!-- Don't drop "q-app" class -->
  <div id="q-app">
    <q-layout
      ref="layout"
      view="lHh Lpr fff"
      :left-class="{'bg-grey-2': true}"
    >
      <div slot="header" class="toolbar">
        <button
        class="primary"
        @click="$refs.mmenu.openMenu()"
        >
          <i class="on-left">menu</i>
        </button>

        <q-toolbar-title>
          Quasar App
          <div slot="subtitle">Running on Quasar v{{$q.version}}</div>
        </q-toolbar-title>
      </div>

      <mMenu ref="mmenu"/>

      <div class="layout-padding logo-container non-selectable no-pointer-events">
        <router-view/>
      </div>
    </q-layout>
  </div>
</template>

<script>
import mMenu from './Menu.vue'

export default {
  components: {
    mMenu
  },
  data () {
    return {}
  }
}
</script>

<style>
</style>