<template>
    <div id="appRoot">
      <template v-if="!$route.meta.public">

          <!-- Go to top -->

        <v-app id="inspire" class="app">
          <app-drawer class="app--drawer"></app-drawer>

          <v-content>

            <div class="page-wrapper">
              <router-view></router-view>
            </div>   
             <!-- App Footer -->

            <v-footer height="auto" class="grey darken-2 pa-3 app--footer"> 

            </v-footer>
          </v-content>

        </v-app>
      </template>
      <template v-else>
        <transition>
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </transition>
      </template>
      <v-snackbar
        :timeout="3000"
        bottom
        right
        :color="snackbar.color"
        v-model="snackbar.show"
      >
        {{ snackbar.text }}
        <v-btn dark flat @click.native="snackbar.show = false" icon> 
          <v-icon>close</v-icon>
        </v-btn>
      </v-snackbar>    
    </div>
  </template>
  <script>

  import AppDrawer from '@/components/pageHeader/AppDrawer';
  import AppToolbar from '@/components/pageHeader/AppToolbar';

  import menu from '@/api/menu';

  import AppEvents from  './event';
  export default {
    components: {
      AppDrawer,
      AppToolbar,

    },
    data: () => ({
      expanded: true,
      rightDrawer: false,
      snackbar: {
        show: false,
        text: '',
        color: '',
      }
    }),
  
    computed: {
  
    },
  
    created () {
      AppEvents.forEach(item => {
        this.$on(item.name, item.callback);
      });
      window.getApp = this;
    },

  };
  </script>
  
  
  <style lang="stylus" scoped>
    .setting-fab 
      top:50%!important; 
      right:0;
      border-radius:0  

  .page-wrapper
      min-height:calc(1200px - 64px - 50px - 81px ) 

  
  </style>