initial commit

resources/js/Components/AsideMenuItem.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { Link } from '@inertiajs/vue3';
+// import { Link } from '@inertiajs/inertia-vue3';
+
+import { StyleService } from '@/Stores/style.js';
+import { mdiMinus, mdiPlus } from '@mdi/js';
+import { getButtonColor } from '@/colors.js';
+import BaseIcon from '@/Components/BaseIcon.vue';
+import AsideMenuList from '@/Components/AsideMenuList.vue';
+import { stardust } from '@eidellev/adonis-stardust/client';
+
+const props = defineProps({
+	item: {
+		type: Object,
+		required: true,
+	},
+	isDropdownList: Boolean,
+});
+
+const itemRoute = computed(() => (props.item && props.item.route ? stardust.route(props.item.route): ''));
+// const isCurrentRoute = computed(() => (props.item && props.item.route ? stardust.isCurrent(props.item.route): false));
+const itemHref = computed(() => (props.item && props.item.href ? props.item.href : ''));
+
+const emit = defineEmits(['menu-click']);
+
+const styleService = StyleService();
+
+const hasColor = computed(() => props.item && props.item.color);
+
+const isDropdownActive = ref(false);
+
+const componentClass = computed(() => [
+	props.isDropdownList ? 'py-3 px-6 text-sm' : 'py-3 px-6',
+	hasColor.value ? getButtonColor(props.item.color, false, true) : styleService.asideMenuItemStyle,
+]);
+
+const hasDropdown = computed(() => props.item.children);
+
+const menuClick = (event) => {
+	emit('menu-click', event, props.item);
+
+	if (hasDropdown.value) {
+		isDropdownActive.value = !isDropdownActive.value;
+	}
+};
+
+const activeInactiveStyle = computed(() => {
+	if (props.item.route && stardust.isCurrent(props.item.route)) {
+		// console.log(props.item.route);
+		return styleService.asideMenuItemActiveStyle;		
+	}
+	 else {
+		return null;
+	 }		
+});
+
+const is = computed(() => {
+  if (props.item.href) {
+    return 'a'
+  }
+  if (props.item.route) {
+    return Link
+  }
+
+  return 'div'
+})
+
+// props.routeName && stardust.isCurrent(props.routeName) ? props.activeColor : null
+
+</script>
+
+<!-- :target="props.item.target ?? null" -->
+<template>
+	<li>
+		<!-- <component :is="itemHref ? 'div' : Link" :href="itemHref ? itemHref : itemRoute"  -->
+		<component :is="is" :href="itemRoute ? stardust.route(props.item.route) : props.item.href" 
+			class="flex cursor-pointer dark:text-slate-300 dark:hover:text-white" :class="componentClass"
+			@click="menuClick" v-bind:target="props.item.target ?? null">
+			<BaseIcon v-if="item.icon" :path="item.icon" class="flex-none" :class="activeInactiveStyle" w="w-16"
+				:size="18" />
+			<span class="grow text-ellipsis line-clamp-1" :class="activeInactiveStyle">
+				{{ item.label }}
+			</span>
+			<!-- <BaseIcon v-if="hasDropdown" :path="isDropdownActive ? mdiMinus : mdiPlus" class="flex-none"
+				:class="activeInactiveStyle" w="w-12" /> -->
+		</component>
+		<!-- <AsideMenuList v-if="hasDropdown" :menu="item.children" :class="[
+			styleService.asideMenuDropdownStyle,
+			isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden',
+		]" is-dropdown-list /> -->
+	</li>
+</template>