tethys.backend/resources/js/Components/NavBarItem.vue

<script setup>
import { StyleService } from '@/Stores/style'
// import { Link } from '@inertiajs/vue3'
import { Link } from '@inertiajs/vue3'
import { computed } from 'vue'
import { stardust } from '@eidellev/adonis-stardust/client';

const props = defineProps({
  href: {
    type: String,
    default: null
  },
  routeName: {
    type: String,
    default: null
  },
  param:{
    type:Number
  },
  type: {
    type: String,
    default: 'flex'
  },
  activeColor: {
    type: String,
    default: null
  },
  isDesktopIconOnly: Boolean,
  dropdown: Boolean,
  active: Boolean
})

const is = computed(() => {
  if (props.href) {
    return 'a'
  }

  if (props.routeName) {
    return Link
  }

  return 'div'
})

const styleStore = StyleService()

const activeColor = props.activeColor ?? `${styleStore.navBarItemLabelActiveColorStyle} dark:text-slate-400`

const activeClass = computed(
//  () => props.routeName && route().current(props.routeName) == true ? props.activeColor : null
() => props.routeName && stardust.isCurrent(props.routeName) ? props.activeColor : null
)
// const itemRoute = computed(() => (props.routeName ? stardust.route(props.routeName): ''));

const componentClass = computed(() => {
  const base = [
    props.type,
    props.active
      ? activeColor
      : `${styleStore.navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${styleStore.navBarItemLabelHoverStyle}`
  ]

  if (props.type === 'block') {
    base.push('lg:flex')
  }

  if (!props.dropdown) {
    base.push('py-2', 'px-3')
  } else {
    base.push('p-0', 'lg:py-2', 'lg:px-3')
  }

  if (props.isDesktopIconOnly) {
    base.push('lg:w-16', 'lg:justify-center')
  }

  return base
})
</script>

<template>
  <component
    :is="is"
    class="items-center grow-0 shrink-0 relative cursor-pointer"
    :class="[componentClass, activeClass]"
    :href="routeName ? stardust.route(props.routeName, [props.param]) : href"
  > 
    <slot />
  </component>
</template>