<template>
  <div id="app" class="w-100vw p-r" style="font-family: 'SF Pro Display">
    
    <ic-header :site="getSite" :menus="getMenus" :colors="this.colors">
      <div :is="this.$route.meta.right_div_component" v-if="this.$store.state.auth.id !== null"></div>
    </ic-header>
    <!-- {{$store.state.header.searchResult}} -->
    <router-view></router-view>
    <!-- Sign-in/Sign-up -->
    <ic-sign :site="getSite.en"></ic-sign> 
    <!-- loader -->
    <ic-loader v-if="loader" :site="getSite.en" :colors="this.colors" ></ic-loader>
  </div>
</template>

<script>
// store
import {mapStateVModel} from 'map-state-vmodel';
// Mixins
import header from './mixins/HeaderC_Mixins';
import keepLogin from './mixins/keepLogin'
import account_id from './mixins/getAccount_Id'
import colors from './mixins/site_dependent/colors'
import errorHandling from './mixins/errorHandling'

// Css
import './css/fontello/css/fontello.css';
import './App.css';
import "vue-essential-transitions"; // https://www.npmjs.com/package/vue-essential-transitions

import rightDivC from './components/header/right-div/right-div-templateC.vue'
import anotherDivC from './components/header/right-div/another-templateC.vue'

export default {
  name: "App",
  data () {
    return {
      siteID: 2,
      toolsAPI: [],
    }
  },
  components: {
    'right-div-template-c': rightDivC,
    'another-templateC' : anotherDivC,
  },
  watch: {},
  computed: {
    ...mapStateVModel('ic_loader', ['loader']),
    ...mapStateVModel('myPageAndProfile', ['currentComponent']),
    ...mapStateVModel('site', ['site_name']),
  },
  methods: {},
  created () {
    this.site_name = this.getSite.en
  },
  mixins: [header, keepLogin, account_id, errorHandling, colors],
};
</script>