<template>
  <div class="navbar">
    <div>
      <div class="locale-changer">
        <v-select v-model="$i18n.locale" :items="$i18n.availableLocales" dense></v-select>
      </div>
    </div>
    <div>
      <v-tabs>
        <v-tab to="/search">Search</v-tab>
      </v-tabs>
    </div>
  </div>
  <hr/>
  <main>
    <RouterView />
  </main>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  methods: {
    showRouter(){
      console.log(this.$route);
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.navbar {
  display:inline-flex;
  width:100%;
}
.navbar>* {
  margin-left:10px;
  position:relative;
  height:80px;
  width:100px;
}
.navbar>*>.locale-changer {
  position:absolute;
  bottom:0px;
}
.navbar>*>.v-tabs {
  position:absolute;
  bottom:22px;
}
</style>
