initial commit

resources/js/Components/NavBarItem.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { StyleService } from '@/Stores/style.js'
+// 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>