<template>
  <!-- <v-app-bar app elevation="24" color="teal lighten-3"> -->

  <v-app-bar fixed app elevation="24" color="#c0d7d6">
    <v-toolbar-title class="red--text">{{$t('AppHeader.appName')}}</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn text color="red red--text" :to="btnTo">
      <v-icon left>{{ btnIconName }}</v-icon>
      <strong>{{$t(btnLabel)}}</strong>
    </v-btn>
  </v-app-bar>

  <!-- <v-toolbar absolute fixed app elevation="24" color="#0065613b" style="width:100%">
    <v-toolbar-title class="red--text">{{$t('AppHeader.appName')}}</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn text color="red red--text" :to="btnTo">
      <v-icon left>{{ btnIconName }}</v-icon>
      <strong>{{$t(btnLabel)}}</strong>
    </v-btn>
  </v-toolbar> -->
</template>

<script>
export default {
  name: "app-header",
  data() {
    return {
      btnTo: null
    };
  },
  props: ["btnToProp", "btnLabel", "btnIconName"],
  created() {
    this.btnTo = "/" + this.btnToProp;
  }
};
</script>