<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const props = defineProps<{
  path: string
}>()

const active = computed(() => {
  return (props.path !== '/' && route.path.startsWith(props.path)) || props.path === route.path
})
</script>

<template>
  <div class="nav-link">
    <RouterLink :to="path" v-bind:class="active ? 'nav-link-active' : ''">
      <slot></slot>
    </RouterLink>
  </div>
</template>
<style>
.nav-link {
  text-align: right;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.nav-link > a {
  font-family: BaskervvilleSC;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: inherit;
  transition: color 0.25s ease-in-out;
}

.nav-link-active {
  color: var(--success-color) !important;
  text-decoration: underline !important;
}

.nav-link > a:hover {
  color: var(--success-color);
  text-decoration: underline;
}

/*
Activates once the left and right half of the page stack due to width constraints.
We remove a lot of the vertical spacing to make things fit better.
*/
@media (width < calc(100ch - 2.5rem)) {
  .nav-link {
    margin-top: 0;
    margin-bottom: 0;
  }
}
</style>
