<template>
  <div
    v-if="link"
    class="cursor-pointer w-full px-2 py-3"
    :class="
      activeLink?.key == link.key
        ? 'rounded-r-lg bg-red-200 border-l-4 border-l-primary'
        : 'pl-3 hover:bg-red-200 rounded-lg'
    "
    @click="setLink(link.key)"
  >
    {{ link.title }}
  </div>
</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";
export default defineComponent({
  props: {
    link: {
      type: Object as PropType<navigationLinkModel>,
      default: null,
    },
  },
  computed: {
    ...mapState(useNavigationStore, ["activeLink"]),
  },
  methods: {
    ...mapActions(useNavigationStore, ["setLink"]),
  },
});
</script>
@/stores/contest/viewManager
