MoreStrive
121 lines
4.2 KiB
Vue
121 lines
4.2 KiB
Vue
<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 } from "@/definitions/enum";
|
|
|
|
const props = defineProps<{
|
|
records?: any[]
|
|
component?: any;
|
|
}>();
|
|
|
|
const globalState = ref<any>({})
|
|
const setGlobalState = (id: any) => {
|
|
globalState.value[id] = !globalState.value[id];
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="navigation-container flex gap-4 justify-center 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="navigation_title">
|
|
<nuxt-link :to="record?.slug" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
|
|
</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">
|
|
<div class="navigation_title ">
|
|
<nuxt-link :to="record?.slug" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
|
|
</div>
|
|
</div>
|
|
<div class="full-layout dropdown-container">
|
|
<template v-if="record.data">
|
|
<div class="p-1">
|
|
<RecusiveSection type="section" :id="record.data" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="navigation_title navigation-item" >
|
|
<nuxt-link :to="record?.slug" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.navigation-branch {
|
|
.navigation_title {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-align: left;
|
|
}
|
|
.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: 1200px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.show-menu {
|
|
opacity: 1;
|
|
transform: translate(-50%, 0%);
|
|
visibility: visible;
|
|
}
|
|
}
|
|
</style> |