<template>
  <component :is="tag" :class="{active: isNavActive}">
    <eb-link :class="{'nav-link': true, active: isNavActive}" v-on="$listeners" v-bind="$attrs">
      <slot></slot>
    </eb-link>
  </component>
</template>

<script>
export default {
  name: 'EbNavLink',

  inheritAttrs: false,

  props: {
    tag: {
      type: String,
      default: 'li'
    }
  },

  computed: {
    isNavActive() {
      return this.$attrs.to
        ? window.location.href.endsWith(this.$attrs.to)
        : window.location.href.endsWith(this.$attrs.href);
    }
  }
};
</script>
