<template>
  <v-app>
    <v-content>
      <transition name="fade" mode="out-in">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </v-content>
  </v-app>
</template>

<script>
import i18n from "./plugins/i18n";
import { mapGetters } from "vuex";

export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["lang"])
  },
  methods: {
    changeLocale(locale) {
      i18n.locale = locale;
    }
  },
  watch: {
    lang: function(newLang, oldLang) {
      if (newLang == "en") {
        this.$vuetify.rtl = false;
        this.$vuetify.lang.current = "en";
      }
      if (newLang == "fa") {
        this.$vuetify.rtl = true;
        this.$vuetify.lang.current = "fa";
      }
      this.changeLocale(newLang);
    }
  }
};
</script>

<style>
#app {
  font-family: "Vazir";
}
html {
  overflow-y: auto !important;
}
</style>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition-duration: 0.3s;
  transition-property: opacity;
  transition-timing-function: ease;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>