Add one layer of categories

frontend/components/global/Header.vue

@@ -28,6 +28,9 @@ const megaMenuCategories = computed(() => {
     if (categories.value) {
         return categories.value.map((item) => {
             return {
+                title: item.name,
+                subitems: item.subcategorys.map((item) => {
+                    return {
                         title: item.name,
                         subitems: item.subcategorys.map((item) => {
                             return {
@@ -36,6 +39,8 @@ const megaMenuCategories = computed(() => {
                             };
                         }),
                     };
+                }),
+            };
         });
     }
 

frontend/components/global/MegaMenu.vue

@@ -4,12 +4,15 @@
 type Props = {
     isOpen: boolean;
     items: {
+        title: string;
+        subitems: {
             title: string;
             subitems: {
                 title: string;
                 link: string;
             }[];
         }[];
+    }[];
 };
 
 // props
@@ -157,14 +160,12 @@ onMounted(() => {
             />
 
             <div class="container relative z-10">
-                <div
-                    class="flex h-200 bg-white rounded-b-2xl border-t border-slate-200"
-                >
+                <div class="flex h-200 bg-white rounded-b-2xl border-t border-slate-200">
                     <div class="bg-slate-100 p-4 flex flex-col overflow-y-auto mask-b-from-90% pb-8">
                         <button
                             v-for="(item, index) in items"
                             :key="item.title"
-                            class="text-black transition-all p-4 rounded-xl cursor-default text-start max-lg:text-sm"
+                            class="text-black transition-all p-4 rounded-xl cursor-default text-start text-sm max-lg:text-xs"
                             :class="index === selectedItem ? 'bg-blue-100 text-blue-500' : 'bg-slate-100'"
                             :id="`mega-menu-tab-${index}`"
                             @mouseenter="menuTabMouseEnter(index)"
@@ -188,17 +189,26 @@ onMounted(() => {
                                     // justifyContent: 'center',
                                 }"
                             >
+                                <template
+                                    v-for="mainItem in selectedItemSubItems"
+                                    :key="mainItem.title"
+                                >
+                                
+                                    <span class="text-primary px-4 py-2 flex items-center gap-2 text-sm max-lg:text-xs font-semibold">
+                                        <span class="w-2 h-[3px] rounded-full bg-blue-400"> </span>
+                                        {{ mainItem.title }}
+                                    </span>
                                     <NuxtLink
-                                    v-for="item in selectedItemSubItems"
+                                        v-for="item in mainItem.subitems"
                                         :to="{ name: 'products-slug', params: { slug: ['category', item.link] } }"
                                         @click="closeAfterNavigate"
-                                    class="p-4 whitespace-nowrap h-fit text-slate-500 flex items-center justify-between hover:text-blue-500 hover:-translate-x-1.5 transition-all max-lg:text-sm"
+                                        class="px-4 py-2 whitespace-nowrap h-fit text-slate-500/85 flex items-center justify-between hover:text-blue-500 hover:-translate-x-1.5 transition-all text-sm max-lg:text-xs"
                                     >
-                                    <span class="truncate w-[90%] flex items-center gap-2">
-                                        <span class="w-2 h-[3px] rounded-full bg-blue-400"> </span>
+                                        <span class="truncate w-[90%]">
                                             {{ item.title }}
                                         </span>
                                     </NuxtLink>
+                                </template>
                             </div>
                         </Transition>
                     </div>

frontend/components/global/ProductsGrid.vue

@@ -45,7 +45,7 @@ withDefaults(defineProps<Props>(), {
                     :id="product.id"
                     :slug="product.slug"
                     :title="product.name"
-                    :picture="product.variants[0].images[0].image"
+                    :picture="product.image ?? product.variants[0].images[0].image"
                     :colors="product.colors"
                     :price="product.variants[0].price"
                     :rate="product.rating"

frontend/constants/index.ts

@@ -37,7 +37,7 @@ export const API_ENDPOINTS = {
     },
     products: {
         get_all: "/products",
-        categories: "/products/categories",
+        categories: "/products/categories/v2",
         saved: "/accounts/favorites",
     },
     resellers_products: {

frontend/types/global.d.ts

@@ -105,9 +105,13 @@ declare global {
         category: SubCategory;
         colors: string[];
         added_to_favorites: boolean;
+        image: string | null;
     };
 
-    type ProductListItem = Pick<Product, "id" | "variants" | "name" | "rating" | "slug" | "category" | "colors">;
+    type ProductListItem = Pick<
+        Product,
+        "id" | "variants" | "name" | "rating" | "slug" | "category" | "colors" | "image"
+    >;
 
     type Article = {
         id: number;
@@ -156,6 +160,7 @@ declare global {
         image: string;
         product_count: number;
         parent: string;
+        subcategorys: SubCategory[];
     };
 
     type Address = {