46 lines
1.7 KiB
Vue
46 lines
1.7 KiB
Vue
<template>
|
|
<div v-if="hasMainCategory" :class="['flex flex-col gap-[25px]', isOpen && 'border-b border-block pb-[10px]']">
|
|
<div @click="toggle" class="flex items-center justify-between rounded-lg cursor-pointer">
|
|
<div class="flex items-center justify-between w-full">
|
|
<p class="text-lg xl:text-2xl font-extrabold text-black dark:text-white">
|
|
{{ mainCategoryName }}
|
|
</p>
|
|
<span :class="['flex items-center justify-center',isOpen && 'rotate-180', 'transition-all']"><i
|
|
class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto"></i></span>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="flex flex-col gap-[25px]" v-show="isOpen">
|
|
<li @click="$emit('change-category', child)" v-for="child in subcategories" :key="child.id"
|
|
class="text-base xl:text-lg cursor-pointer flex justify-between items-center"
|
|
:class="child.id === props.active ? 'text-yellow' : ''">
|
|
<span>{{ child.langs[0].Name }}</span>
|
|
<span>12</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div v-else>
|
|
<!-- Optional: Placeholder or message when main category is not available -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
|
|
// Define the props
|
|
const props = defineProps({
|
|
data: Array,
|
|
active: Number
|
|
});
|
|
|
|
const isOpen = ref(false);
|
|
|
|
const toggle = () => {
|
|
isOpen.value = !isOpen.value;
|
|
};
|
|
|
|
// Computed properties
|
|
const hasMainCategory = computed(() => props.data.length > 0 && props.data[0].langs && props.data[0].langs.length > 0);
|
|
const mainCategoryName = computed(() => hasMainCategory.value ? props.data[0].langs[0].Name : '');
|
|
const subcategories = computed(() => hasMainCategory.value && props.data[0].children ? props.data[0].children : []);
|
|
</script> |