<template>
  <v-app  style="background-color:#ffffff">
      <div v-if="$store.getters.getAllDataLoaded">
          <Menu></Menu>
          <!--<MenuMobile></MenuMobile>!-->



        <v-content style="background-color: #fff;">
          <router-view></router-view>
        </v-content>
      </div>
      <div v-if="!$store.getters.getAllDataLoaded">
        Loading ...
      </div>
  </v-app>
</template>

<script>
import Menu from "./components/Menu2";
import MenuMobile from "./components/MenuMobile"

export default {
  name: 'App',
  components: {
    'Menu': Menu,
     'MenuMobile': MenuMobile
  },
  data () {
    return {
      big: true,
      bgcolor: "transparent",
      flat: true,
      nameBig: '',
      nameSmall: '',
      menu: [
        { icon: 'home', title: 'Login' },
        { icon: 'info', title: 'Invited' },
        { icon: 'warning', title: 'Register' }
      ],
      menu2: [
        { icon: 'home', title: 'Apps' },
        { icon: 'info', title: 'Admin' },
        { icon: 'warning', title: 'Account' }
      ]
    }
  },
  computed: {
    setting: (name) => {
      //this.$store.getters.getSettingValue(this.$store.state, name);
    }
  },
  methods: {
    /*handleScroll: function (evt, el) {
      if(evt.pageY > 100) {
        this.big = false;
        this.bgcolor = "#fff";
        this.flat = false;
      } else {
        this.big = true;
        this.bgcolor = "transparent";
        this.flat = true;
      }
    }*/
  },
  mounted: function () {
    this.$store.dispatch('checkAccount');
    console.log("MOUNTED");
    this.$store.dispatch('getSettings').then(() => {
      this.nameBig = this.$store.getters.getSettingValue("name_big");
      this.nameSmall = this.$store.getters.getSettingValue("name_small");
    });

  }
}
</script>
