remove folder pages

components/section/CategoryTree.vue

@@ -0,0 +1,46 @@
+<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>