<script lang="ts" setup>
import type { NavLink } from '@layouts/types'

defineProps<{
  item: NavLink
}>()
</script>

<template>
  <li class="nav-link" :class="{ disabled: item.disable }">
    <Component :is="item.to ? 'RouterLink' : 'a'" :to="item.to" :href="item.href">
      <VIcon :icon="item.icon as string" class="nav-item-icon" />
      <!-- 👉 Title -->
      <span class="nav-item-title">
        {{ item.title }}
      </span>
    </Component>
  </li>
</template>

<style lang="scss">
.layout-vertical-nav {
  .nav-link a {
    display: flex;
    align-items: center;
    border-radius: 0 3.125rem 3.125rem 0 !important;
    cursor: pointer;
    margin-inline-end: 1.125em;
    padding-inline: 1.375rem 1rem;
  }
}
</style>
