<template>
  <li
    class="child-link"
    :class="[
      activeLink(childLink) ? 'child-link--active' : '', 
      childLinkHovered ? 'child-link--hover' : ''
    ]"
    @mouseenter="childLinkHovered = true"
    @mouseleave="childLinkHovered = false"
  >
    <component
      :is="childLink.to ? 'n-link' : 'div'"
      :to="childLink.to"
    >
      <div
        :class="[
          childLinkHovered ? 'child-link-bullet--hover' : '', 
          activeLink(childLink) ? 'child-link-bullet--active' : ''
        ]"
        class="child-link-bullet"
      />
      <div>{{ childLink.title }}</div>
    </component>
  </li>
</template>

<script>
  export default {
    props: {
      childLink: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        childLinkHovered: false
      }
    },
    methods: {
      activeLink(link) {
        // On a refresh Nuxt sometimes adds a forward slash at the end of the URL, thus we need to check for both cases below
        return link.to === this.$route.path || link.to === this.$route.matched[0].path  ? true : false;
      }
    }
  }
</script>

<style>
.child-link {
  position: relative;
  padding: var(--spacing-2) var(--spacing-3);
  margin: var(--spacing-neg-1);
  border-radius: var(--radius-md);
  transition: all var(--duration-150);
}
.child-link--active {
  color: var(--l-nav-side-highlight); 
  font-weight: 500;
}
.child-link--hover {
  font-weight: 500;
}
.child-link-bullet {
  position: absolute;
  width: calc(var(--spacing-1) - 1px);
  height: calc(var(--spacing-1) - 1px);
  background-color: var(--l-sidebar-text);
  border-radius: var(--radius-sm);
  top: var(--spacing-4);
  left: var(--spacing-neg-1);
}
.child-link-bullet--hover {
  width: var(--spacing-1-5);
  height: var(--spacing-1-5);
  top: var(--spacing-3-5);
  left: var(--spacing-neg-1-5);
}
.child-link-bullet--active {
  width: var(--spacing-1-5);
  height: var(--spacing-1-5);
  top: var(--spacing-3-5);
  left: var(--spacing-neg-1-5);
  background-color: var(--l-nav-side-highlight);
}
</style>
