layout extended

Index.vue

<template>
  <q-layout ref="layout" v-model="sides" v-bind="{view, leftBreakpoint, reveal}" :class="classNames">
    <q-toolbar slot="header" class="">
      <slot name="header">
        <q-btn flat @click="toggleLeft">
          <q-icon name="menu"></q-icon>
        </q-btn>

        <q-toolbar-title>
          {{ AppName }}
          <div slot="subtitle" class="hidden-medium">
            {{ AppTooltip }} <span v-if="environment !== 'production'">{{ $q.version }}</span>
          </div>
        </q-toolbar-title>

        <slot name="header-content"></slot>

        <q-btn flat @click="">
          <q-icon name="more_vert"></q-icon>
          <q-popover ref="popover" class="q-popover-menu">
            <q-list item-separator highlight link>
              <!--suppress CommaExpressionJS -->
              <q-item v-for="(menu, index) in getDashboardOptions" :key="index" @click="handlerMenu(menu)" separator>
                <q-item-side :icon="menu.icon"></q-item-side>
                <q-item-main>{{ menu.label }}</q-item-main>
              </q-item>
            </q-list>
          </q-popover>
        </q-btn>
      </slot>
    </q-toolbar>

    <q-scroll-area v-if="left" slot="left" class="q-scroll-area">
      <slot name="drawer-left-top">
        <div class="q-drawer-logo">
          <!--suppress HtmlUnknownTarget -->
          <img src="statics/logo/big.png" alt="logo">
        </div>
      </slot>
      <slot name="drawer-left">
        <app-drawer-menu :menus="AppMenu" :shadow="shadow"></app-drawer-menu>
      </slot>
    </q-scroll-area>

    <slot name="breadcrumb">
      <div class="breadcrumb-wrapper">
        <app-breadcrumb v-bind="{icon: home}"></app-breadcrumb>
      </div>
    </slot>

    <slot name="content">
      <div class="transition-wrapper">
        <app-transition-slide v-bind="style"></app-transition-slide>
      </div>
    </slot>
  </q-layout>
</template>

<script type="text/javascript">
  import AppLayout from 'genesis/components/layout/AppLayout.vue'
  import configureDashboard from 'src/bootstrap/configure/dashboard'

  export default {
    name: 'dashboard-index',
    extends: AppLayout,
    data: () => ({
      bind: {
        view: 'lHh Lpr lFf',
        reveal: true,
        leftBreakpoint: 996, // min width to show drawer
        home: 'store', // breadcrumb home icon
        viewport: { // viewport to middle of dashboard
          height: 'calc(100vh - 95px)',
          padding: '10px'
        },
        mobile: { // viewport to middle of dashboard in mobile
          height: 'calc(100vh - 95px)',
          padding: '0'
        },
        shadow: true
      }
    }),
    created () {
      // noinspection JSCheckFunctionSignatures
      configureDashboard(this)
    }
  }
</script>

<style lang="stylus">
</style>