<template>
  <div class="navbar-logo-container">
    <transition name="navbarLogoFade">
      <router-link to="/">
        <h1 class="navbar-title">
          {{ title }}
        </h1>
      </router-link>
    </transition>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue-demi'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  name: 'NavbarLogo',
  setup () {
    const { t } = useI18n({
      messages: {
        'zh-CN': {
          'bank-name': '企业网上银行'
        },
        'zh-TW': {
          'bank-name': '企業網上銀行'
        }
      }
    })

    const title = computed(() => t('bank-name'))
    return {
      title
    }
  }
})
</script>

<style lang="scss" scoped>
.navbarLogoFade-enter-active {
  transition: opacity 1.5s;
}

.navbarLogoFade-enter,
.navbarLogoFade-leave-to {
  opacity: 0;
}

.navbar-logo-container {
  & > a{
    display: flex;
    align-items: center;
    line-height: 40px;
    img {
      height: 40px;
    }
    .navbar-title {
      margin-left:-55px;
      // color: $blue;
      font-size: 18px;
      font-weight: bold;
    }
  }
}
</style>
