From 3c75c89a8b259aece948a24685c4d54b75b7e317 Mon Sep 17 00:00:00 2001
From: nguyen van thai <nguyenvanthailtv@gmail.com>
Date: Mon, 17 Jun 2024 11:48:00 +0700
Subject: [PATCH] =?UTF-8?q?thainv:=20gh=C3=A9p=20navigation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/styles/style.scss                      |  30 +++-
 components/article/immerse/Poll.vue           |  56 +++---
 .../page-component/AssignComponent.vue        |  66 ++++++++
 .../templates/articles/layouts/Card.vue       |  32 +++-
 .../templates/categories/layouts/Default.vue  | 113 +++++++++++--
 .../page-component/templates/index.ts         |   3 +-
 .../page-component/templates/index.vue        |  11 +-
 .../components/RecusiveNavItem.vue            | 138 +++++++++++++++
 .../components/RecusiveTopChild.vue           | 160 ++++++++++++++++++
 .../templates/navigations/index.ts            |   4 +
 .../templates/navigations/index.vue           |  36 ++++
 .../templates/navigations/layouts/Bottom.vue  |  35 ++++
 .../navigations/layouts/Direction.vue         |  35 ++++
 .../templates/navigations/layouts/Top.vue     |  86 ++++++++++
 .../templates/sections/layouts/Article.vue    |  26 ++-
 .../page-section/layouts/Default.vue          |  14 +-
 .../page-section/layouts/index.vue            |   1 +
 .../page-section/templates/index.ts           |   1 +
 .../page-section/templates/index.vue          |  21 ++-
 .../page-section/templates/none/Default.vue   |  28 +++
 .../components/headers/HeaderHomeTemplate.vue |   7 +-
 .../page/templates/homes/Basic.vue            |  26 +--
 .../dynamic-page/page/templates/index.vue     |   2 +
 definitions/cms/page.type.ts                  |   5 +
 definitions/enum/index.ts                     |   2 +-
 definitions/enum/page.enum.ts                 |  14 +-
 pages/index.vue                               |   2 -
 server/models/dynamic-page/index.ts           |   2 +-
 server/models/poll-option.ts                  |   2 +-
 stores/dynamic-page.ts                        |   6 +-
 30 files changed, 856 insertions(+), 108 deletions(-)
 create mode 100644 components/dynamic-page/page-component/AssignComponent.vue
 create mode 100644 components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue
 create mode 100644 components/dynamic-page/page-component/templates/navigations/components/RecusiveTopChild.vue
 create mode 100644 components/dynamic-page/page-component/templates/navigations/index.ts
 create mode 100644 components/dynamic-page/page-component/templates/navigations/index.vue
 create mode 100644 components/dynamic-page/page-component/templates/navigations/layouts/Bottom.vue
 create mode 100644 components/dynamic-page/page-component/templates/navigations/layouts/Direction.vue
 create mode 100644 components/dynamic-page/page-component/templates/navigations/layouts/Top.vue
 create mode 100644 components/dynamic-page/page-section/templates/none/Default.vue

diff --git a/assets/styles/style.scss b/assets/styles/style.scss
index baa2c50..c286170 100644
--- a/assets/styles/style.scss
+++ b/assets/styles/style.scss
@@ -1,16 +1,21 @@
-.style_layout {
-    > .section-container {
-        > .layout_define {
-            > .section_layout {
-                @apply gap-x-10 #{!important};
-            }
-        }
-    }
-}
+// .style_layout {
+//     > .section-container {
+//         > .layout_define {
+//             > .section_layout {
+//                 @apply gap-x-10 #{!important};
+//             }
+//         }
+//     }
+// }
 
 figure {
     margin: auto !important;
 }
+
+img {
+    object-fit: cover!important;
+}
+
 .content {
     & p {
         @apply mb-2;
@@ -37,3 +42,10 @@ div[layout="ARTICLE_PAGE"] {
     }
 }
 
+// .layout_define {
+//     & .section_layout.three_col_layout {
+//         @media (max-width: 768px) {
+//             grid-template-columns: repeat(1, minmax(0, 1fr));
+//           }
+//     }
+// }
diff --git a/components/article/immerse/Poll.vue b/components/article/immerse/Poll.vue
index 4bb8043..f013212 100644
--- a/components/article/immerse/Poll.vue
+++ b/components/article/immerse/Poll.vue
@@ -1,3 +1,4 @@
+span
 <script setup lang="ts">
 import { usePollStore } from "~/stores/poll";
 import { usePollOptionStore } from "~/stores/poll-option";
@@ -16,7 +17,7 @@ const { currentPoll } = storeToRefs(store.poll);
 const { currentPollOptions } = storeToRefs(store.pollOptions);
 const { currentPollResponses } = storeToRefs(store.pollResponse);
 const poll = reactive<Poll | any>({});
-const options = ref<PollOption[]>();
+const options = ref<PollOption[] | any[]>([]);
 async function loadData() {
   await store.poll.fetchById(String(props.dataId));
   await store.pollOptions.fetchByPollId(String(props.dataId));
@@ -33,7 +34,7 @@ onBeforeMount(async () => {
   await loadData();
 });
 
-const selectedOption = ref<any>(null);
+const selectedOption = ref<any>(-1);
 const showResult = ref(false);
 const alreadyVoted = ref(false);
 const canShowResult = computed(() => {
@@ -48,26 +49,20 @@ const canShowResult = computed(() => {
       return alreadyVoted.value && (!poll.endTime || new Date() > new Date(poll.endTime));
   }
 });
-
+const totalResponses = ref(0);
 async function submitVote() {
-  if (selectedOption.value) {
-    let option = options.value?.find((option: PollOption) => option.id === selectedOption.value);
-    if(option) {
-      option.responsesCount = Number(option.responsesCount) + 1
-
+  if (selectedOption.value >= 0 && !alreadyVoted.value) {
+    const result = await store.pollResponse.create({ optionId: selectedOption.value });
+    if (result?.id) {
+      totalResponses.value = options.value?.reduce((sum, option) => sum + Number(option.responseCount ?? 0), 1);
+      options?.value?.forEach((option: PollOption | any) => {
+        if (option.id === selectedOption.value) {
+          option.responseCount = (option.responseCount ?? 0) + 1;
+        }
+        option.percentage = Number(((option.responseCount / totalResponses.value) * 100).toFixed(1));
+      });
+      alreadyVoted.value = true;
     }
-  const totalResponses = options.value?.reduce((sum, option) => sum + Number(option.responsesCount ?? 0), 0);
-    // const result = await store.pollResponse.create({ optionId: selectedOption.value });
-    // if (result) {
-    //   alreadyVoted.value = true;
-    //   if (options.value) {
-    //     let option = options.value.find((option: PollOption) => option.id === selectedOption.value);
-    //     // if (option) option?.responsesCount += 1;
-    //     // options.value.filter((option) => {
-    //     //   option.votePercentage = (option.responsesCount / currentPollResponses.value.length) * 100;
-    //     // });
-    //   }
-    // }
   }
 }
 
@@ -88,23 +83,22 @@ const toggleResults = () => {
     <span v-if="!showResult" class="p-1 block">
       <span v-for="(option, index) in options" :key="index" class="block">
         <label class="flex gap-2 m-2">
-          <input type="radio" :value="option.id" v-model="selectedOption" />
+          <input type="radio" :value="option.id" v-model="selectedOption" :disabled="selectedOption >= 0 && alreadyVoted ? true : false" />
           <span class="font-semibold">{{ option?.title }}</span>
         </label>
       </span>
       <button @click="submitVote" class="bg-primary-500 text-white py-1 px-3 rounded-4px cursor-pointer hover:bg-primary-600 float-right">Bình chọn</button>
     </span>
 
-    <span v-else class="block">
-      hoàn thành
-      <!-- <span v-for="(answer, index) in options" :key="index" class="block poll-result relative rounded-3xl overflow-hidden my-3">
-          <span class="absolute top-0 start-0 bottom-0 bg-gradient-to-r from-sky-500 to-indigo-500"
-            :style="{ width: `${calculatePercentage(answer?.voteCount)}%` }"></span>
-          <span class="block relative z-0 ps-1">
-            <span>{{ calculatePercentage(answer?.voteCount).toFixed(2) }}%</span>
-            <span class="">({{ answer?.voteCount }})</span>
-          </span>
-        </span> -->
+    <span v-else class="flex flex-col my-5 gap-4">
+      <span v-for="(answer, index) in options" :key="index" class="flex gap-2">
+        <span class="w-50px">{{ answer.percentage }}%</span>
+        <div class="w-full">
+          <b class="mb-0.5 block">{{ answer.title }}</b>
+          <div :style="{ width: `${answer.percentage}%` }" :class="answer.id === selectedOption ? 'bg-green-600' : 'bg-primary-500'" class="h-1.5 rounded-full"></div>
+        </div>
+      </span>
+      <b>Tổng số lượt binh chọn: {{ totalResponses }}</b>
     </span>
   </span>
 </template>
diff --git a/components/dynamic-page/page-component/AssignComponent.vue b/components/dynamic-page/page-component/AssignComponent.vue
new file mode 100644
index 0000000..8fef91a
--- /dev/null
+++ b/components/dynamic-page/page-component/AssignComponent.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { enumPageComponentTemplates, enumPageComponentLayouts } from "@/definitions/enum";
+import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
+import { useDynamicPageStore } from '~/stores/dynamic-page';
+const { currentPage } = storeToRefs(useDynamicPageStore());
+const props = defineProps<{
+  type: string; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
+}>();
+
+// const store = reactive({
+//   page: useCmsPageStore(),
+//   section: usePageSectionStore(),
+//   component: usePageComponentStore(),
+// });
+
+// const { currentPage } = storeToRefs(useCmsPageStore());
+
+const defineTypeRecusive = {
+  TOP_NAVIGATION: enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-TOP'],
+  BOTTOM_NAVIGATION: enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-BOTTOM'],
+};
+
+const findDataPosition = computed(() => {
+  let result = {};
+  switch (props.type) {
+    case defineTypeRecusive.TOP_NAVIGATION:
+      result = currentPage.value.components && currentPage.value.components.find((component: any) => {
+        return component.settings?.template === enumPageComponentTemplates.NAVIGATION && component.settings?.layout === defineTypeRecusive.TOP_NAVIGATION
+      });
+      break;
+    case defineTypeRecusive.BOTTOM_NAVIGATION:
+      result = currentPage.value.components && currentPage.value.components.find((component: any) => {
+        return component.settings && component.settings?.template === enumPageComponentTemplates.NAVIGATION && component.settings?.layout === defineTypeRecusive.BOTTOM_NAVIGATION
+      });
+      break;
+    default:
+      result = {};
+      break;
+  }
+  console.log(result)
+  return result;
+});
+
+// const selectComponent = (data: any) => {
+//   store.page.selectComponent(data)
+// }
+console.log(findDataPosition, 'findDataPosition')
+</script>
+
+<template>
+  <div>
+      <DynamicComponent 
+        v-if="findDataPosition && findDataPosition?.id" 
+        :settings="findDataPosition?.settings" 
+        :component="findDataPosition"
+        :content="findDataPosition?.content"
+      />
+      <div v-else class="text-center">
+        <span>Hãy tạo thành phần "Thanh điều hướng ở đầu trang" để hiển thị thành điều hướng tại đây</span>
+      </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/components/dynamic-page/page-component/templates/articles/layouts/Card.vue b/components/dynamic-page/page-component/templates/articles/layouts/Card.vue
index e112438..bde771c 100644
--- a/components/dynamic-page/page-component/templates/articles/layouts/Card.vue
+++ b/components/dynamic-page/page-component/templates/articles/layouts/Card.vue
@@ -89,7 +89,7 @@ const drop = (e: any) => {
 <style lang="scss" scoped>
 .basic-article {
   display: flex;
-  gap: 10px;
+  gap: 12px;
   height: 100%;
 
   &.no-data {
@@ -104,6 +104,11 @@ const drop = (e: any) => {
     &.reverse {
       flex-direction: column-reverse;
       height: 100%;
+
+      @media (max-width: 640px) {
+        flex-direction:column;
+      }
+      
     }
   }
   &.border-custom {
@@ -111,24 +116,39 @@ const drop = (e: any) => {
   }
   &.borderLeft {
     border-left: 1px solid;
-    padding-left: 10px;
+    padding-left: 16px;
+    
   }
   &.borderRight {
     border-right: 1px solid;
-    padding-right: 10px;
+    padding-right: 16px;
   }
   &.borderTop {
     border-top: 1px solid;
-    padding-top: 10px;
+    padding-top: 16px;
   }
   &.borderBottom {
     border-bottom: 1px solid;
-    padding-bottom: 10px;
+    padding-bottom: 16px;
   }
+  &.borderRight ,
+  &.borderLeft, 
+  &.borderTop, 
+  &.borderBottom {
+
+    @media (max-width: 640px) {
+        border: 0;
+        padding: 0;
+      }
+  }
+
   &.horizontal {
-    flex-direction: row;
+    @apply sm:flex-row flex-col;
     .basic-article_thumbnail {
       width: 40%;
+      @media (max-width: 640px) {
+        width: 100% !important;
+      }
     }
     &.reverse {
       flex-direction: row-reverse;
diff --git a/components/dynamic-page/page-component/templates/categories/layouts/Default.vue b/components/dynamic-page/page-component/templates/categories/layouts/Default.vue
index 8f4ca8d..c7a49cf 100644
--- a/components/dynamic-page/page-component/templates/categories/layouts/Default.vue
+++ b/components/dynamic-page/page-component/templates/categories/layouts/Default.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { isEmpty } from "lodash";
+import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
 
-import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from '@/utils/parseSQL';
+const emit = defineEmits(["dropData", "selectComponent"]);
 
 const _props = defineProps<{
   dataResult?: any[];
   dataQuery?: string;
+  label?: string;
 }>();
 
 const SETTING_OPTIONS = {
@@ -12,27 +15,111 @@ const SETTING_OPTIONS = {
 };
 
 const _dataResult = computed(() => {
-  let _components = Array(SETTING_OPTIONS.MAX_ELEMENT).fill(null);
-  const result = getInputValue(_props.dataResult, 'ARRAY');
-  result && result.length > 0 && _components.map((_ : any, index : any) => {
-    _components[index] = result[index] || null;
-  })
-  return _components;
+  const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
+  let _components = Array(Number(designObject.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
+  const result = getInputValue(_props.dataResult, "ARRAY");
+  result &&
+    result.length > 0 &&
+    _components.map((_: any, index: any) => {
+      _components[index] = result[index] || null;
+    });
+  return Object.assign({}, _components);
 });
+
+const designObject = computed(() => {
+  return _props.label ? getInputValue(_props.label, "OBJECT") : {};
+});
+
+async function dropData(event: any) {
+  const { dataResult, dataType } = JSON.parse(event.dataTransfer.getData("category"));
+  const checkDataResult = getInputValue(_props.dataResult, "ARRAY");
+  const result = _props.dataResult ? [...checkDataResult, { ...dataResult }] : [{ ...dataResult }];
+  const getDataQuery = _props.dataQuery ? COLLECTION_QUERY_DROP(dataType, getValueStringWithKeyAndColon(_props.dataQuery) + "," + dataResult.id) : COLLECTION_QUERY_DROP(dataType, dataResult.id);
+
+  emit("dropData", {
+    dataResult: result,
+    dataType,
+    dataQuery: getDataQuery,
+  });
+}
+
+const selectComponent = () => {
+  emit("selectComponent");
+};
+
 </script>
 
 <template>
   <div>
-    <div class="flex gap-4 items-end">
-      <template v-for="(component, index) in _dataResult">
-        <nuxt-link v-if="component" :key="index" :to="`/${component.code}`" class=" py-1 font-400 text-[16px] first:font-600 first:text-[22px] first:border-b first:border-primary-600 sm:block hidden first:block">
-          <h3 class="m-0 leading-none hover:text-primary-600 transition-all duration-300">{{ component.title }}</h3>
-        </nuxt-link>
-      </template>
+    <div
+      class="categories-container p-2 border-custom"
+      @click="selectComponent"
+      :class="[designObject['LAYOUT_WRAP'] || 'horizontal', ...(designObject['borderWrap']?.length > 0 ? designObject['borderWrap'] : [])]"
+      :style="[designObject['background'] && `background: ${designObject['background']}`]"
+    >
+      <div v-for="(component, index) in _dataResult" :key="index" :class="[...(designObject['border']?.length > 0 ? designObject['border'] : []), 'border-custom', isEmpty(component) ? 'empty' : 'category']">
+        <template v-if="!isEmpty(component)">
+          <nuxt-link :to="`/${component.code}`"
+            :class="index != 0? 'sm:block hidden' : 'font-bold text-20px border-b-2px border-primary-600'"
+            class="hover:text-primary-600"
+          >
+            {{ component.title }}
+          </nuxt-link>
+        </template>
+
+        <div v-else @dragover.prevent @drop.stop.prevent="dropData($event)"></div>
+      </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.categories-container {
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+  width: fit-content;
+  overflow: hidden;
+  &.vertical {
+    flex-direction: column;
+  }
+  &.horizontal {
+    flex-direction: row;
+  }
+  .category {
+    height: 100%;
 
+    h3 {
+      font-weight: 500;
+      font-size: 14px;
+      margin: 0px !important;
+    }
+
+    &:first-child {
+      h3 {
+        font-weight: 600;
+        font-size: 17px;
+      }
+    }
+  }
+}
+.border-custom {
+  border-color: #e5e5e5 !important;
+}
+.borderLeft {
+  border-left: 1px solid;
+  padding-left: 16px;
+}
+.borderRight {
+  border-right: 1px solid;
+  padding-right: 16px;
+}
+.borderTop {
+  border-top: 1px solid;
+  padding-top: 16px;
+}
+.borderBottom {
+  border-bottom: 1px solid;
+  padding-bottom: 16px;
+}
 </style>
diff --git a/components/dynamic-page/page-component/templates/index.ts b/components/dynamic-page/page-component/templates/index.ts
index 15fe183..522f80b 100644
--- a/components/dynamic-page/page-component/templates/index.ts
+++ b/components/dynamic-page/page-component/templates/index.ts
@@ -9,4 +9,5 @@ export { default as Dynamic_Section } from './sections/index.vue';
 export { default as Dynamic_Advertising } from './advertising/index.vue'
 export { default as Dynamic_Category } from './categories/index.vue'
 export { default as Dynamic_Article } from './articles/index.vue'
-export { default as Dynamic_Collection } from './collections/index.vue'
\ No newline at end of file
+export { default as Dynamic_Collection } from './collections/index.vue'
+export { default as Dynamic_Navigation } from './navigations/index.vue'
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/index.vue b/components/dynamic-page/page-component/templates/index.vue
index 5e91b73..af352d3 100644
--- a/components/dynamic-page/page-component/templates/index.vue
+++ b/components/dynamic-page/page-component/templates/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplates } from "@/definitions/enum";
-import { Dynamic_Section, Dynamic_Category, Dynamic_Collection, CollectionPaging, Dynamic_Other, Dynamic_Advertising, Dynamic_Article } from "./index";
+import { Dynamic_Section, Dynamic_Category, Dynamic_Collection, Dynamic_Navigation, Dynamic_Other, Dynamic_Advertising, Dynamic_Article } from "./index";
 const _props = defineProps<{
   settings: any;
   component?: any;
@@ -12,12 +12,11 @@ const definedDynamicComponent: Record<string, any> = {
   [enumPageComponentTemplates.COLLECTION]: Dynamic_Collection,
   [enumPageComponentTemplates.SECTION]: Dynamic_Section,
   [enumPageComponentTemplates.OTHER]: Dynamic_Other,
-  [enumPageComponentTemplates.ADVERTISING]: Dynamic_Advertising
+  [enumPageComponentTemplates.ADVERTISING]: Dynamic_Advertising,
+  [enumPageComponentTemplates.NONE]: Dynamic_Navigation,
 };
-
+// console.log(_props.settings.template, 'template')
 const getCurrentComponent = computed(() => `${_props.settings.template}`);
-
-
 const GET_PROPS = computed(() => {
   return () => {
     let props: any = {};
@@ -36,5 +35,5 @@ const GET_PROPS = computed(() => {
 
 <template>
   <!-- <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...(GET_PROPS()), component: _props.component, settings: _props.settings }" /> -->
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...(GET_PROPS()), component: _props.component, settings: _props.settings }" />
+  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
 </template>
diff --git a/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue b/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue
new file mode 100644
index 0000000..e854f9f
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+// import RecusiveNavItem from "@/components/cms/page-component/templates/navigations/components/RecusiveNavItem.vue";
+// import RecusiveSection from "@/components/cms/page-section/RecusiveSection.vue";
+// import { enumPageComponentTemplates, enumPageComponentStaticChild } from "@/definitions/enum";
+
+// const props = defineProps<{
+//     records?: any[]
+//     component: any;
+// }>();
+
+// const store = reactive({
+//   page: useCmsPageStore(),
+//   section: usePageSectionStore(),
+//   component: usePageComponentStore(),
+// });
+
+// const globalState = ref({})
+// const setGlobalState = (id: any) => {
+//     globalState.value[id] = !globalState.value[id];
+// }
+
+// const selectNavigationComponent = () => {
+//   store.page.selectComponentNavigation(props.component);
+// }
+
+// const dropSection = (event: any, child: any) => {
+//   if (event.dataTransfer.getData("section")) {
+//     const section = JSON.parse(event.dataTransfer.getData("section"));
+//     store.component.updateNavigationItemInfor(props.component, child, { data: section.id });
+//     store.section.updatePublishedSectionInGeneralPage(section.id, 9999999999);
+//   }
+// };
+</script>
+
+<template>
+    ábsabda
+    <!-- <div class="navigation-container d-flex gap-4 justify-content-center align-items-center">
+        <div v-for="(record) in props.records" :key="record.id" class="navigation-branch cursor-pointer">
+            <template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
+                <div class="navigation-submenu">
+                    <div class="" @click="selectNavigationComponent">{{ record?.title }}</div>
+                    <div class="navigation-item submenu-container dropdown-container">
+                        <RecusiveNavItem :records="record.childs" />
+                    </div>
+                </div>
+            </template>
+            <template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
+                <div class="navigation-submenu">
+                    <div class="position-relative ps-3">
+                        <span class="position-absolute " style="left: -10px; top: -7px" @click="() => setGlobalState(record.id)">
+                            <i v-if="!globalState[record.id]" class="ri-eye-2-line fs-3"></i>
+                            <i v-else class="ri-eye-close-line fs-3"></i>
+                        </span>
+                        <span @click="selectNavigationComponent">{{ record?.title }}</span>
+                    </div>
+                    <div class="full-layout dropdown-container" :class="[!globalState[record.id] && 'show-menu']">
+                        <template v-if="record.data">
+                            <div class="p-2">
+                                <RecusiveSection type="section" :id="record.data" />
+                            </div>
+                        </template>
+                        <template v-else>
+                            <el-empty description="Kéo Section vào đây" @dragover.prevent @drop.stop.prevent="dropSection($event, record)" />
+                        </template>
+                    </div>
+                </div>
+            </template>
+            <template v-else>
+                <div class="navigation-item" @click="selectNavigationComponent">{{ record?.title }}</div>
+            </template>
+        </div>
+    </div> -->
+</template>
+
+<style lang="scss" scoped>
+    .navigation-branch {
+        .navigation-submenu {
+            position: relative;
+            padding: 15px 5px;
+            &:hover {
+                > .dropdown-container {
+                    opacity: 1;
+                    transform: translate(-50%, 0%);
+                    visibility: visible;
+                }
+            }
+        }
+        .submenu-container {
+            width: 200px;
+            display: flex;
+            > div {
+                justify-content: start !important;
+                align-items: flex-start !important;
+                flex-direction: column;
+                width: 100%;
+                gap: 0px !important;
+            }
+            div {
+                width: 100% !important;
+            }
+            .navigation-item {
+                width: 100% !important;
+                padding: 10px 20px;
+                &:hover {
+                    background: #409eff;
+                    color: #fff;
+                }
+            }
+            .navigation-branch {
+                padding: 0px !important;
+            }
+        }
+        .dropdown-container {
+            opacity: 0;
+            transform: translate(-50%, 10%);
+            left: 50%;
+            visibility: hidden;
+            transition: all .3s;
+            position: absolute;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background: #fff;
+            top: 100%;
+        }
+        .full-layout {
+            width: 800px;
+            z-index: 100;
+            // height: 400px;
+
+        }
+
+        .show-menu {
+            opacity: 1;
+            transform: translate(-50%, 0%);
+            visibility: visible;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/navigations/components/RecusiveTopChild.vue b/components/dynamic-page/page-component/templates/navigations/components/RecusiveTopChild.vue
new file mode 100644
index 0000000..9937cdd
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/navigations/components/RecusiveTopChild.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+// import { nanoid } from "nanoid"
+// import RecusiveTopChild from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveTopChild.vue";
+// import { enumPageComponentTemplates, enumPageComponentStaticChild } from "@/definitions/enum";
+
+// const props = defineProps<{
+//     records?: any[]
+//     currentComponent?: any
+// }>()
+
+// const store = reactive({
+//   page: useCmsPageStore(),
+//   section: usePageSectionStore(),
+//   component: usePageComponentStore(),
+// });
+
+// const showChildItem = ref<boolean>(false)
+
+// const toggleStatusBar = (type: "section", id?: any) => {
+//   // if (type === "section") {
+//   //   store.section.setCurrentSection(id);
+//   // } else {
+//   //   store.section.setCurrentSection(null);
+//   // }
+//   // store.section.toggleStatusSectionBar(true);
+// };
+
+// const removeStaticRecord = (currentChild: any) => {
+//   store.component.removeChildtNavigation(props.currentComponent, currentChild);
+// };
+
+// const addChildRecord = (currentChild: any) => {
+//   const newChildItem = {
+//       id: nanoid(10),
+//       title: 'Mới mới',
+//       slug: '',
+//       childs: [],
+//       parentId: currentChild.id,
+//       data: null,
+//       typeChild: enumPageComponentStaticChild.DEFAULT,
+//   }
+//   store.component.setChildForComponentNavigation(props.currentComponent, newChildItem);
+// }
+
+// const setNavigationItem = (currentChild: any) => {
+//   console.log(currentChild)
+//   store.component.setNavigationItem(currentChild);
+// }
+</script>
+
+<template>
+  ádasd
+    <!-- <div class="lists-record">
+        <div v-for="(record) in props.records" :key="record.id">
+            <template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
+                <div class="record-item child">
+                    <div class="record-infor d-flex align-items-center gap-2">
+                        <span @click="() => showChildItem = !showChildItem" class="cursor-pointer">
+                          <i :class="[showChildItem ? 'ri-arrow-down-s-line' : 'ri-arrow-right-s-line']"></i>
+                        </span>
+                        <h6>{{ record.title || '' }}</h6>
+                    </div>
+                    <div class="record-action">
+                        <span @click="addChildRecord(record)"><i class="ri-add-line"></i></span>
+                        <span @click="setNavigationItem(record)"><i class="ri-eye-line"></i></span>
+                        <span @click="removeStaticRecord(record)"><i class="ri-delete-bin-7-line"></i></span>
+                    </div>
+                </div>
+                <div class="ps-4 mt-2" :class="[showChildItem ? 'is-show-item' : 'is-hidden-item']">
+                    <RecusiveTopChild :records="record.childs" :currentComponent="props.currentComponent" />
+                </div>
+            </template>
+            <template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
+                <div class="record-item child">
+                    <div class="record-infor d-flex align-items-center gap-2">
+                        <h6>{{ record.title || '' }}</h6>
+                    </div>
+                    <div class="record-action">
+                        <span @click="setNavigationItem(record)"><i class="ri-eye-line"></i></span>
+                        <span @click="removeStaticRecord(record)"><i class="ri-delete-bin-7-line"></i></span>
+                    </div>
+                </div>
+            </template>
+            <template v-else>
+                <div class="record-item">
+                    <div class="record-infor d-flex align-items-center gap-2">
+                        <h6>{{ record.title || '' }}</h6>
+                    </div>
+                    <div class="record-action">
+                        <span @click="addChildRecord(record)"><i class="ri-add-line"></i></span>
+                        <span @click="setNavigationItem(record)"><i class="ri-eye-line"></i></span>
+                        <span @click="removeStaticRecord(record)"><i class="ri-delete-bin-7-line"></i></span>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div> -->
+</template>
+
+<style lang="scss" scoped>
+.lists-record {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 14px;
+
+  .record-item {
+    padding: 3px 15px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    cursor: move;
+    position: relative;
+    z-index: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &.child {
+        padding: 3px 15px 3px 10px;
+    }
+    &:hover {
+      > .record-action {
+        opacity: 1;
+      }
+    }
+    > .record-action {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      cursor: pointer;
+      gap: 10px;
+      font-size: 18px;
+      opacity: 0;
+      transition: 0.3s;
+      color: #7e7e7e;
+
+      > span:hover {
+        color: #409eff;
+        transition: 0.3s all;
+      }
+    }
+    > .record-infor {
+        span i {
+            font-size: 18px;
+            cursor: point;
+        }
+      h6 {
+        font-size: 13px;
+        font-weight: 600;
+        margin-bottom: 0px;
+      }
+    }
+  }
+  .is-show-item {
+    height: auto;
+  }
+  .is-hidden-item {
+    height: 0px;
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/components/dynamic-page/page-component/templates/navigations/index.ts b/components/dynamic-page/page-component/templates/navigations/index.ts
new file mode 100644
index 0000000..1bb3b65
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/navigations/index.ts
@@ -0,0 +1,4 @@
+// Navigation
+export { default as Top_Navigation } from './layouts/Top.vue'
+export { default as Bottom_Navigation } from './layouts/Bottom.vue'
+export { default as Direction_Navigation } from './layouts/Direction.vue'
diff --git a/components/dynamic-page/page-component/templates/navigations/index.vue b/components/dynamic-page/page-component/templates/navigations/index.vue
new file mode 100644
index 0000000..db827ac
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/navigations/index.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplates, enumPageComponentLayouts } from "@/definitions/enum";
+import { Direction_Navigation, Bottom_Navigation, Top_Navigation } from "./index";
+
+const _props = defineProps<{
+  settings: any;
+  component?: any;
+  content?: any
+}>();
+
+const definedDynamicComponent: Record<string, any> = {
+  [enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-DIRECTION']]: Direction_Navigation,
+  [enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-BOTTOM']]: Bottom_Navigation,
+  [enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-TOP']]: Top_Navigation,
+};
+const getCurrentComponent = computed(() => `${_props.settings.layout}`);
+
+const GET_PROPS = computed(() => {
+  return () => {
+    let props: any = {};
+    if (_props.settings) {
+      for (const [key, value] of Object.entries(_props.settings)) {
+        props = {
+          ...props,
+          [key]: value,
+        };
+      }
+      return props;
+    }
+  };
+});
+</script>
+
+<template>
+  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" />
+</template>
diff --git a/components/dynamic-page/page-component/templates/navigations/layouts/Bottom.vue b/components/dynamic-page/page-component/templates/navigations/layouts/Bottom.vue
new file mode 100644
index 0000000..cbc8c18
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/navigations/layouts/Bottom.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// import { isEmpty } from "lodash";
+// import DynamicComponent from "~/components/cms/page-component/templates/index.vue";
+// import { getInputValue } from "@/utils/cms/page/parseSQL";
+
+// const emit = defineEmits(["selectComponent"]);
+
+// const _props = defineProps<{
+//   dataResult?: any[];
+//   dataQuery?: string;
+//   component?: any;
+// }>();
+
+// const SETTING_OPTIONS = {
+//   MAX_ELEMENT: 10,
+// };
+</script>
+
+<template>
+  lay outa
+  <!-- <section>
+    <div v-for="navItem, index in Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})" :key="index">
+      <div class="empty"></div>
+    </div>
+  </section> -->
+</template>
+
+<style lang="scss" scoped>
+.empty {
+  width: 120px;
+  min-height: 100px;
+  border-radius: 6px;
+  background: #409eff;
+}
+</style>
diff --git a/components/dynamic-page/page-component/templates/navigations/layouts/Direction.vue b/components/dynamic-page/page-component/templates/navigations/layouts/Direction.vue
new file mode 100644
index 0000000..c655711
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/navigations/layouts/Direction.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { isEmpty } from "lodash";
+// import DynamicComponent from "~/components/cms/page-component/templates/index.vue";
+// import { getInputValue } from "@/utils/cms/page/parseSQL";
+
+// const emit = defineEmits(["selectComponent"]);
+
+// const _props = defineProps<{
+//   dataResult?: any[];
+//   dataQuery?: string;
+//   component?: any;
+// }>();
+
+// const SETTING_OPTIONS = {
+//   MAX_ELEMENT: 10,
+// };
+</script>
+
+<template>
+  ád
+  <!-- <section>
+    <div v-for="navItem, index in Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})" :key="index">
+      <div class="empty"></div>
+    </div>
+  </section> -->
+</template>
+
+<style lang="scss" scoped>
+.empty {
+  width: 120px;
+  min-height: 100px;
+  border-radius: 6px;
+  background: #409eff;
+}
+</style>
diff --git a/components/dynamic-page/page-component/templates/navigations/layouts/Top.vue b/components/dynamic-page/page-component/templates/navigations/layouts/Top.vue
new file mode 100644
index 0000000..c72a954
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/navigations/layouts/Top.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+// import { isEmpty } from "lodash";
+// import { nanoid } from "nanoid"
+// import { enumPageComponentTemplates, enumPageComponentStaticChild } from "@/definitions/enum";
+// import DynamicComponent from "~/components/cms/page-component/templates/index.vue";
+// import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/cms/page/parseSQL";
+// import { buildTree } from "@/utils/cms/page/recusive";
+// import RecusiveNavItem from "@/components/cms/page-component/templates/navigations/components/RecusiveNavItem.vue";
+
+// const emit = defineEmits(["selectComponent"]);
+
+// const _props = defineProps<{
+//   content?: any[];
+//   component?: any;
+// }>();
+
+// const store = reactive({
+//   page: useCmsPageStore(),
+//   section: usePageSectionStore(),
+//   component: usePageComponentStore(),
+// });
+
+// const SETTING_OPTIONS = {
+//   MAX_ELEMENT: 10,
+// };
+
+// const _dataResult = computed(() => {
+//   let _components = Array(SETTING_OPTIONS.MAX_ELEMENT).fill({});
+//   const result = getInputValue(_props.content, "ARRAY");
+//   result &&
+//     result.length > 0 &&
+//     _components.map((_: any, index: any) => {
+//       _components[index] = result[index] || null;
+//     });
+//   return _components;
+// });
+
+// async function dropData(event: any, data: any) {
+//   if (event.dataTransfer.getData(`${enumPageComponentTemplates.CATEGORY}`)) {
+//     const data = event.dataTransfer.getData(`${enumPageComponentTemplates.CATEGORY}`);
+//     const { dataResult } = JSON.parse(data);
+//     const dataInsert = {
+//       id: nanoid(10),
+//       title: dataResult.title,
+//       slug: dataResult.code,
+//       childs: [],
+//       parentId: null,
+//       data: null,
+//       typeChild: enumPageComponentStaticChild.DEFAULT,
+//     };
+//     const getJSonContent = JSON.parse(_props.content)
+//     const checkDataResult = getInputValue(getJSonContent, "ARRAY");
+//     const result: any = _props.content ? [...checkDataResult, { ...dataInsert }] : [{ ...dataInsert }];
+//     store.component.setStaticData(result, _props.component.id);
+//   }
+// }
+</script>
+
+<template>
+  <!-- <nav>
+    <div class="d-flex gap-3 justify-content-center align-items-center">
+      <RecusiveNavItem :records="content && buildTree(content)" :component="_props.component" />
+
+      <div class="empty" @dragover.prevent @drop.stop.prevent="dropData">
+        <i class="ri-add-fill"></i>
+      </div>
+    </div>
+  </nav> -->
+  ád
+</template>
+
+<style lang="scss" scoped>
+.empty {
+  width: 100px;
+  min-height: 20px;
+  border-radius: 4px;
+  background: #409eff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-size: 18px;
+  color: white;
+  margin: 5px 0px;
+}
+</style>
diff --git a/components/dynamic-page/page-component/templates/sections/layouts/Article.vue b/components/dynamic-page/page-component/templates/sections/layouts/Article.vue
index 61225ac..198140f 100644
--- a/components/dynamic-page/page-component/templates/sections/layouts/Article.vue
+++ b/components/dynamic-page/page-component/templates/sections/layouts/Article.vue
@@ -146,20 +146,20 @@ watch(
       border-color: #e5e5e5 !important;
     }
     &.borderLeft {
-      border-left: 2px solid;
-      padding-left: 10px;
+      border-left: 1px solid;
+      padding-left: 16px;
     }
     &.borderRight {
-      border-right: 2px solid;
-      padding-right: 10px;
+      border-right: 1px solid;
+      padding-right: 16px;
     }
     &.borderTop {
-      border-top: 2px solid;
-      padding-top: 10px;
+      border-top: 1px solid;
+      padding-top: 16px;
     }
     &.borderBottom {
-      border-bottom: 2px solid;
-      padding-bottom: 10px;
+      border-bottom: 1px solid;
+      padding-bottom: 16px;
     }
     &.vertical {
       grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -168,6 +168,16 @@ watch(
       grid-template-rows: auto;
       grid-auto-flow: column;
     }
+    &.borderRight ,
+  &.borderLeft, 
+  &.borderTop, 
+  &.borderBottom {
+
+    @media (max-width: 640px) {
+        border: 0;
+        padding: 0;
+      }
+  }
   }
   .empty {
     width: 100%;
diff --git a/components/dynamic-page/page-section/layouts/Default.vue b/components/dynamic-page/page-section/layouts/Default.vue
index a38b394..ce04890 100644
--- a/components/dynamic-page/page-section/layouts/Default.vue
+++ b/components/dynamic-page/page-section/layouts/Default.vue
@@ -141,7 +141,7 @@ const CLASS_FOR_SECTION = computed(() => {
 </script>
 
 <template>
-    <div class="section_layout grid  sm:gap-x-5 sm:gap-y-2.5 gap-[10px] lg:grid-cols-2" :class="[CLASS_FOR_SECTION.section_layout]">
+    <div class="section_layout grid  gap-[16px] lg:grid-cols-2" :class="[CLASS_FOR_SECTION.section_layout]">
       <div
         v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
         :key="index"
@@ -156,15 +156,7 @@ const CLASS_FOR_SECTION = computed(() => {
 <style lang="scss">
 .section_layout {
   &.basic_column {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-
-    // & > div:first-child {
-    //   .basic-article {
-    //      h3 {
-    //       @apply text-24px;
-    //      }
-    //   }
-    // }
+    @apply grid-cols-1;
   }
 
   &.two_col_layout {
@@ -172,7 +164,7 @@ const CLASS_FOR_SECTION = computed(() => {
   }
 
   &.three_col_layout {
-    @apply lg:grid-cols-3 grid-cols-1;
+    @apply md:grid-cols-3 grid-cols-1;
     // grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   &.four_col_layout {
diff --git a/components/dynamic-page/page-section/layouts/index.vue b/components/dynamic-page/page-section/layouts/index.vue
index 9b990f6..5b69e35 100644
--- a/components/dynamic-page/page-section/layouts/index.vue
+++ b/components/dynamic-page/page-section/layouts/index.vue
@@ -30,6 +30,7 @@ const definedDynamicSection: Record<string, any> = {
 };
 
 const getCurrentSection = computed(() => _props?.layout || "");
+
 const GET_PROPS = computed(() => {
   return () => {
     let props: any = {};
diff --git a/components/dynamic-page/page-section/templates/index.ts b/components/dynamic-page/page-section/templates/index.ts
index 1ac4c32..bb6a993 100644
--- a/components/dynamic-page/page-section/templates/index.ts
+++ b/components/dynamic-page/page-section/templates/index.ts
@@ -1 +1,2 @@
 export { default as Article_Section_Default } from './articles/Default.vue'
+export { default as None_Section_Default } from './none/Default.vue'
\ No newline at end of file
diff --git a/components/dynamic-page/page-section/templates/index.vue b/components/dynamic-page/page-section/templates/index.vue
index e79d22f..ea579d1 100644
--- a/components/dynamic-page/page-section/templates/index.vue
+++ b/components/dynamic-page/page-section/templates/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Article_Section_Default } from './index';
+import { Article_Section_Default, None_Section_Default } from './index';
 import { enumPageSectionLayouts } from "@/definitions/enum";
 
 const _props = defineProps<{
@@ -25,10 +25,27 @@ const definedDynamicSection: Record<string, any> = {
     [`Article_${enumPageSectionLayouts.HORIZONTAL_EIGHT}`]: Article_Section_Default,
     [`Article_${enumPageSectionLayouts.HORIZONTAL_NINE}`]: Article_Section_Default,
     [`Article_${enumPageSectionLayouts.HORIZONTAL_TEN}`]: Article_Section_Default,
+    
+    'None_Default': None_Section_Default,
+    [`None_${enumPageSectionLayouts.VERTICAL_TWO}`]: None_Section_Default,
+    [`None_${enumPageSectionLayouts.VERTICAL_LEFT_TWO}`]: None_Section_Default,
+    [`None_${enumPageSectionLayouts.VERTICAL_RIGHT_TWO}`]: None_Section_Default,
+    [`None_${enumPageSectionLayouts.VERTICAL_THREE}`]: None_Section_Default,
+    [`None_${enumPageSectionLayouts.VERTICAL_FOUR}`]: None_Section_Default,
+    [`None_${enumPageSectionLayouts.HORIZONTAL_ONE}`]: None_Section_Default,
+    [`None_${enumPageSectionLayouts.HORIZONTAL_TWO}`]: None_Section_Default,
+    [`None_${enumPageSectionLayouts.HORIZONTAL_THREE}`]: None_Section_Default,
+    [`None_${enumPageSectionLayouts.HORIZONTAL_FOUR}`]: None_Section_Default,
+    [`None_${enumPageSectionLayouts.HORIZONTAL_FIVE}`]: None_Section_Default,
+    [`None_${enumPageSectionLayouts.HORIZONTAL_SIX}`]: None_Section_Default,
+    [`None_${enumPageSectionLayouts.HORIZONTAL_SEVEN}`]: None_Section_Default,
+    [`None_${enumPageSectionLayouts.HORIZONTAL_EIGHT}`]: None_Section_Default,
+    [`None_${enumPageSectionLayouts.HORIZONTAL_NINE}`]: None_Section_Default,
+    [`None_${enumPageSectionLayouts.HORIZONTAL_TEN}`]: None_Section_Default,
+
 }
 
 const getCurrentSection = computed(() => `${_props.settings.template}_${_props.settings.layout}`);
-
 const GET_PROPS = computed(() => {
     return () => {
         let props: any = {};
diff --git a/components/dynamic-page/page-section/templates/none/Default.vue b/components/dynamic-page/page-section/templates/none/Default.vue
new file mode 100644
index 0000000..fe560f8
--- /dev/null
+++ b/components/dynamic-page/page-section/templates/none/Default.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import DynamicLayout from '~/components/dynamic-page/page-section/layouts/index.vue';
+import type { PageSection } from "~/server/models/dynamic-page/index";
+
+const emit = defineEmits(['dropComponent', 'dropData', 'selectComponent']);
+
+const props = defineProps<{
+    label?: any
+    layout?: string
+    settings?: any
+    content?: any
+    section: PageSection
+}>()
+
+</script>
+
+<template>
+    <DynamicLayout
+        :layout="props.layout"
+        :content="props.content"
+        :settings="props.settings"
+        :section= "props.section"
+    />
+</template>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue b/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue
index 79f7878..f6a1adb 100644
--- a/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue
+++ b/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import { CurrentDateTime, LangSwitcher, TopNavigation, Mega } from "./index";
+import AssignComponent from "~/components/dynamic-page/page-component/AssignComponent.vue";
 const widgetsStore = useWidgetsStore();
 const layoutstore = useLayoutStore();
-
+import { enumPageComponentTemplates, enumPageComponentLayouts } from "@/definitions/enum";
 const { weather } = storeToRefs(widgetsStore);
 const { megaMenuActive } = storeToRefs(layoutstore);
 
@@ -87,7 +88,9 @@ onUnmounted(() => {
       </div>
     </div>
   </header>
-  <TopNavigation />
+  <div class="top-navigation">
+      <AssignComponent :type="enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-TOP']" />
+    </div>
 
   <Teleport to="body">
     <Mega />
diff --git a/components/dynamic-page/page/templates/homes/Basic.vue b/components/dynamic-page/page/templates/homes/Basic.vue
index 76973ac..7f3dd37 100644
--- a/components/dynamic-page/page/templates/homes/Basic.vue
+++ b/components/dynamic-page/page/templates/homes/Basic.vue
@@ -1,19 +1,23 @@
 <script setup lang="ts">
-import DynamicLayout from '~/components/dynamic-page/page/layouts/index.vue';
-import HeaderHomeTemplate from '~/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue'
-import FooterHomeTemplate from '~/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue'
-
+import DynamicLayout from "~/components/dynamic-page/page/layouts/index.vue";
+import HeaderHomeTemplate from "~/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue";
+import FooterHomeTemplate from "~/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue";
 const props = defineProps<{
-    settings?: any
-}>()
+  settings?: any;
+}>();
+
 </script>
 
 <template>
-    <div>
-        <HeaderHomeTemplate /> 
-            <DynamicLayout :settings="props.settings">
+  <div>
+      <HeaderHomeTemplate>
+        <DynamicLayout :settings="props.settings">
                 <slot />
             </DynamicLayout>
-        <FooterHomeTemplate />
-    </div>
+      </HeaderHomeTemplate>
+    <DynamicLayout :settings="props.settings">
+      <slot />
+    </DynamicLayout>
+    <FooterHomeTemplate />
+  </div>
 </template>
diff --git a/components/dynamic-page/page/templates/index.vue b/components/dynamic-page/page/templates/index.vue
index dc4debf..b88c1ea 100644
--- a/components/dynamic-page/page/templates/index.vue
+++ b/components/dynamic-page/page/templates/index.vue
@@ -14,6 +14,8 @@ const getCurrentTemplate = computed(() => {
     return _props.settings && _props.settings.template || '';
 });
 
+console.log(getCurrentTemplate.value, 'tempalte')
+
 const GET_PROPS = computed(() => {
     return () => {
         let props : any = {};
diff --git a/definitions/cms/page.type.ts b/definitions/cms/page.type.ts
index a87eae5..75f93b8 100644
--- a/definitions/cms/page.type.ts
+++ b/definitions/cms/page.type.ts
@@ -169,6 +169,11 @@ export const pageComponentLayouts = {
   [`${enumPageComponentTemplates.CATEGORY}`]: [
     { title: "Danh mục", value: enumPageComponentLayouts[enumPageComponentTemplates.CATEGORY]['DEFAULT'] }
   ],
+  [`${enumPageComponentTemplates.NAVIGATION}`]: [
+    { title: "Thanh điều hướng ở đầu trang", value: enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-TOP'] },
+    { title: "Tab điều hướng trong các phân vùng", value: enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-BOTTOM'] },
+    { title: "Bộ điều hướng ở chân trang", value: enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-DIRECTION'] },
+  ],
   [`${enumPageComponentTemplates.COLLECTION}`]: [
     { title: "Cụm Bài viết 5 phần tử, Bài viết ngang", value: enumPageComponentLayouts[enumPageComponentTemplates.COLLECTION]['ARTICLE-VERTICAL-|HORIZONTAL|-MAX_5'] },
     { title: "Cụm Bài viết Mặc định", value: enumPageComponentLayouts[enumPageComponentTemplates.COLLECTION]['DEFAULT'] },
diff --git a/definitions/enum/index.ts b/definitions/enum/index.ts
index 131fb7a..23c6d3d 100644
--- a/definitions/enum/index.ts
+++ b/definitions/enum/index.ts
@@ -1,6 +1,6 @@
 export { PublishTypes as publishTypes } from "./publishTypes.enum";
 export { categoryTypes } from "./categoryTypes.enum";
-export { templates, layouts, dataTypes, dataQuery, sectionTypes, sectionTaxonomy, enumPageType, enumPageSectionLayouts, enumPageComponentLayouts, enumPageComponentTemplates } from "./page.enum";
+export { templates, layouts, dataTypes, dataQuery, sectionTypes, sectionTaxonomy, enumPageType, enumPageSectionLayouts, enumPageComponentLayouts, enumPageComponentTemplates, enumPageComponentStaticChild } from "./page.enum";
 export { enumStatus } from "./status.enum";
 export { actionCommands } from "./actionCommands.enum";
 export { moduleCodes } from "./module.enum";
diff --git a/definitions/enum/page.enum.ts b/definitions/enum/page.enum.ts
index a885308..e38e31e 100644
--- a/definitions/enum/page.enum.ts
+++ b/definitions/enum/page.enum.ts
@@ -119,7 +119,9 @@ export const enumPageComponentTemplates = { // KHÔNG ĐƯỢC XÓA KEY - BIẾN
   QUIZ: "Quiz", // Trang quiz
   SURVEY: "Survey", // Trang survey
   ADVERTISING: "Advertising", // Trang quảng cáo
-  OTHER: "Other" // Trang khác
+  OTHER: "Other", // Trang khác
+  NAVIGATION: "Navigation" // Navigation
+
 };
 
 export const enumPageComponentLayouts = {
@@ -137,6 +139,11 @@ export const enumPageComponentLayouts = {
     NONE: "None",
     'DEFAULT': "DEFAULT"
   },
+  [`${enumPageComponentTemplates.NAVIGATION}`]: {
+    'NAVIGATION-TOP': "TYPE:Navigation-PLACEMENT:Top",
+    'NAVIGATION-BOTTOM': "TYPE:Navigation-PLACEMENT:Bottom",
+    'NAVIGATION-DIRECTION': 'TYPE:Navigation-PLACEMENT:Direction',
+  },
   [`${enumPageComponentTemplates.COLLECTION}`]: {
     'ARTICLE-VERTICAL-|HORIZONTAL|-MAX_5': 'TYPE:Article-LAYOUT:vertical-DATA:HORIZONTAL-MAX:5'
   },
@@ -148,3 +155,8 @@ export const enumPageComponentLayouts = {
   }
   
 };
+
+export const enumPageComponentStaticChild = {
+  LAYOUT: "Layout", // Không xác định
+  DEFAULT: "Default", // Chuyên trang
+};
diff --git a/pages/index.vue b/pages/index.vue
index 4c8744b..3110990 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -27,8 +27,6 @@ watch(currentPage, () => {
 useHead({
   title: 'Trang chủ'
 })
-
-
 </script>
 
 <template>
diff --git a/server/models/dynamic-page/index.ts b/server/models/dynamic-page/index.ts
index 85dea16..ab33303 100644
--- a/server/models/dynamic-page/index.ts
+++ b/server/models/dynamic-page/index.ts
@@ -29,7 +29,7 @@ interface PageComponentSettings {
     dataQuery?: string; // Truy vấn dữ liệu: IDS | NEW | VIEW | SQL | REQUEST | ...
     dataResult?: string; // Kết quả dữ liệu (Json)
 }
-interface PageSection extends Base {
+export type PageSection = {
   id?: number; // Mã định danh
   siteId?: number; // Mã hệ thống
   pageId?: number; // Mã trang
diff --git a/server/models/poll-option.ts b/server/models/poll-option.ts
index c506c7e..386d31a 100644
--- a/server/models/poll-option.ts
+++ b/server/models/poll-option.ts
@@ -11,7 +11,7 @@ export type PollOption = {
     type?: number; // Phân loại
     order?: number; // Sắp xếp
     status?: number; // Trạng thái
-    responsesCount?: number //số lượng response của option
+    responseCount?: number //số lượng response của option
   }
 
   export const fetchByPollId = async (event: H3Event) => {
diff --git a/stores/dynamic-page.ts b/stores/dynamic-page.ts
index e59e777..582a007 100644
--- a/stores/dynamic-page.ts
+++ b/stores/dynamic-page.ts
@@ -871,6 +871,7 @@ export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
         //   "updatedOn": "2024-05-30T16:18:55.254121"
         // })
         currentPage.value = {}
+        console.log(currentPage.value, data.value, 'dynamic page')
         currentPage.value = data.value
       } catch (error: any) {}
     }
@@ -895,18 +896,19 @@ export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
           (section: any) => section.isPublished && !contentArr.flat().some((_section: any) => _section && _section.data && _section.type === "section" && section.id === _section.data)
         ).sort((a: any, b: any) => a.order - b.order);
 
-        console.log(sectionPublished.value, 'section');
+        console.log(sectionPublished.value, 'sections');
 
     };
 
     const setComponentPublished = () => {
+      const exsitsTemplate = ['None']
         const contentArr: any = [];
         currentPage.value.sections && currentPage.value.sections.map((section: any) => {
           contentArr.push(section.content && JSON.parse(section.content) && JSON.parse(section.content));
           return section;
         });
         componentPublished.value = currentPage.value.components && currentPage.value.components.filter((section: any) => section.isPublished);
-        console.log(componentPublished.value ,'123123')
+        console.log(currentPage.value.components ,'components 2')
       };
 
     const setDataQuery = (query: any, componentId: number | string) => {