thainv: ghép navigation

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>

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;

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>

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'
+export { default as Dynamic_Collection } from './collections/index.vue'
+export { default as Dynamic_Navigation } from './navigations/index.vue'

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>

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>

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>

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'

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>

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>

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>

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>

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%;