83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
Vue
<template>
|
|
<div
|
|
v-if="hasMainCategory"
|
|
:class="[
|
|
'flex flex-col gap-[25px]',
|
|
isOpen && 'border-b border-block pb-[10px]',
|
|
]"
|
|
>
|
|
<div
|
|
class="flex items-center justify-between rounded-lg cursor-pointer"
|
|
@click="toggle"
|
|
>
|
|
<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"
|
|
/></span>
|
|
</div>
|
|
</div>
|
|
|
|
<ul v-show="isOpen"
|
|
class="flex flex-col gap-[25px]"
|
|
>
|
|
<li
|
|
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' : ''"
|
|
@click="$emit('change-category', child)"
|
|
>
|
|
<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,
|
|
})
|
|
|
|
defineEmits(['change-category'])
|
|
|
|
const isOpen = ref(false)
|
|
|
|
const toggle = () => {
|
|
isOpen.value = !isOpen.value
|
|
}
|
|
|
|
// Computed properties
|
|
const hasMainCategory = computed(
|
|
() =>
|
|
props.data
|
|
&& 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>
|