Fix

components/dynamic-page/page-component/AssignComponent.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   type?: any; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
 }>();
 
+const contentParse = computed(() => (currentPage.value.content ? JSON.parse(currentPage.value.content) : {}));
 const defineTypeRecusive = {
   TOP_NAVIGATION: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]['NAVIGATION_TOP_DEFAULT'],
   BOTTOM_NAVIGATION: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]['NAVIGATION_BOTTOM_DEFAULT'],
@@ -16,14 +17,22 @@ const findDataPosition = computed<any>(() => {
   let result = {};
   switch (props.type) {
     case defineTypeRecusive.TOP_NAVIGATION:
-      result = currentPage.value.components && currentPage.value.components.find((component: any) => {
+    if (contentParse.value.navigationTop) {
-        return component.taxonomy === enumPageComponentKey.NAVIGATION && component.settings?.layout === defineTypeRecusive.TOP_NAVIGATION
+        result =
-      });
+          currentPage.value.components &&
+          currentPage.value.components.find((component: any) => {
+            return component.id === contentParse.value.navigationTop;
+          });
+      }
       break;
     case defineTypeRecusive.BOTTOM_NAVIGATION:
-      result = currentPage.value.components && currentPage.value.components.find((component: any) => {
+    if (contentParse.value.navigationBottom) {
-        return component.taxonomy === enumPageComponentKey.NAVIGATION && component.settings?.layout === defineTypeRecusive.BOTTOM_NAVIGATION
+        result =
-      });
+          currentPage.value.components &&
+          currentPage.value.components.find((component: any) => {
+            return component.id === contentParse.value.navigationBottom;
+          });
+      }
       break;
     default:
       result = {};

components/dynamic-page/page-section/layouts/articles/details/Default.vue

@@ -83,7 +83,10 @@ const mapActivesToItems = (index: number) => {
   return {};
 };
 
-const currentCategoryTree = findElementPathById(categoryTree.value, currentArticle.value.categoryId);
+const currentCategoryTree = ref<any []>([]);
+if(currentArticle.value?.categoryId) {
+  currentCategoryTree.value = findElementPathById(categoryTree.value, currentArticle.value.categoryId)
+}
 function findElementPathById(categories: any[], targetId: number, path: any[] = []) {
   for (const category of categories) {
     const currentPath = [...path, { title: category.title, code: category.code }];
@@ -99,8 +102,6 @@ function findElementPathById(categories: any[], targetId: number, path: any[] =
   }
   return null;
 }
-
-console.log(currentArticle.value ,'currentArticle')
 </script>
 
 <template>
@@ -220,7 +221,7 @@ console.log(currentArticle.value ,'currentArticle')
     <div class="content detail-default">
       <div class="content__top">
         <div class="flex justify-between flex-wrap items-center mb-10px">
-          <ul class="flex gap-32px">
+          <ul class="flex gap-32px" v-if="currentCategoryTree.length">
             <li v-for="( category, index ) in currentCategoryTree" :key="index" class="first:text-#000 text-#929292 last:after:content-[''] relative after:absolute after:content-['/'] after:text-20px after:right--20px" >
               <nuxt-link class=" font-raleway text-18px font-500 leading-180% uppercase" :to="`/${category.code}`">{{ category.title }}</nuxt-link>
             </li>