ff-admin/src/components/admin/RoutingLink.vue

<template>
  <RouterLink v-if="link" v-slot="{ isExactActive }" :to="{ name: `admin-${activeNavigation}-${link.key}` }">
    <p
      class="cursor-pointer w-full px-2 py-3"
      :class="
        isExactActive ? 'rounded-r-lg bg-red-200 border-l-4 border-l-primary' : 'pl-3 hover:bg-red-200 rounded-lg'
      "
    >
      {{ link.title }}
    </p>
  </RouterLink>
</template>

<script setup lang="ts">
import { mapState, mapActions } from "pinia";
import { useNavigationStore, type navigationLinkModel } from "@/stores/admin/navigation";
</script>

<script lang="ts">
import { defineComponent, type PropType } from "vue";
import { RouterLink } from "vue-router";
export default defineComponent({
  props: {
    link: {
      type: Object as PropType<navigationLinkModel>,
      default: null,
    },
  },
  computed: {
    ...mapState(useNavigationStore, ["activeNavigation"]),
  },
});
</script>