minhnt/NSG_PORTAL_V2
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: new layout

Browse Source
This commit is contained in:
MoreStrive
2024-06-28 15:39:26 +07:00
parent ab3419bd5f
commit ad962eda86
134 changed files with 4977 additions and 2985 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue
+15 -17
View File
@@ -1,7 +1,6 @@
<script lang="ts" setup>
import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
import { enumPageComponentStaticChild, enumPageComponentLayouts } from "@/definitions/enum";
const props = defineProps<{
records?: any[]
@@ -15,13 +14,11 @@ const setGlobalState = (id: any) => {
</script>
<template>
<div class="navigation-container flex gap-4 justify-center items-center">
<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">
<nuxt-link class="hover:text-primary-600 transition-all duration-300" :to="`/${record.slug}`">
<div class="">{{ record?.title }}</div>
</nuxt-link>
<div class="navigation_title " @click="selectNavigationComponent">{{ record?.title }}</div>
<div class="navigation-item submenu-container dropdown-container">
<RecusiveNavItem :records="record.childs" />
</div>
@@ -29,12 +26,12 @@ const setGlobalState = (id: any) => {
</template>
<template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
<div class="navigation-submenu">
<nuxt-link class="hover:text-primary-600 transition-all duration-300" :to="`/${record.slug}`">
<div class="">{{ record?.title }}</div>
</nuxt-link>
<div class="position-relative ps-3">
<div class="navigation_title " @click="selectNavigationComponent">{{ record?.title }}</div>
</div>
<div class="full-layout dropdown-container">
<template v-if="record.data">
<div class="p-2">
<div class="p-1">
<RecusiveSection type="section" :id="record.data" />
</div>
</template>
@@ -42,9 +39,7 @@ const setGlobalState = (id: any) => {
</div>
</template>
<template v-else>
<nuxt-link class="hover:text-primary-600 transition-all duration-300" :to="`/${record.slug}`">
<div class="navigation-item">{{ record?.title }}</div>
</nuxt-link>
<div class="navigation_title navigation-item" @click="selectNavigationComponent">{{ record?.title }}</div>
</template>
</div>
</div>
@@ -52,9 +47,14 @@ const setGlobalState = (id: any) => {
<style lang="scss" scoped>
.navigation-branch {
.navigation_title {
font-size: 14px;
font-weight: 400;
text-align: left;
}
.navigation-submenu {
position: relative;
padding: 12px 5px;
padding: 15px 5px;
&:hover {
> .dropdown-container {
opacity: 1;
@@ -101,10 +101,8 @@ const setGlobalState = (id: any) => {
top: 100%;
}
.full-layout {
width: 800px;
z-index: 100;
// height: 400px;
width: 1200px;
z-index: 2;
}
.show-menu {