<template>
  <v-app-bar
    app
    color="primary"
    dark
  >
    <div class="d-flex align-center font-weight-black">
      <v-img
        :alt="title"
        class="shrink mr-2"
        contain
        :src="logoSrc"
        transition="scale-transition"
        width="40"
      />
      <strong>{{ title }}</strong>
    </div>
        <!-- <img :src="logoSrc" :alt="title"> -->
    <v-spacer></v-spacer>

    <v-btn
      href="https://github.com/vuetifyjs/vuetify/releases/latest"
      target="_blank"
      text
    >
      <span class="mr-2">Latest Release</span>
      <v-icon>mdi-open-in-new</v-icon>
    </v-btn>
  </v-app-bar>
</template>

<script>
export default {
  name: 'header-index',
  data () {
    return {
      logoSrc: '',
      title: this.$DEFAULT_TITLE
    }
  }
}
</script>

<style>

</style>
