File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<nav class="top-menu">
<ul class="main-menu">
<li v-for="(mainMenu, idx) in menuList" :key="idx" @mouseover="showAllSubMenus" @mouseout="hideAllSubMenus">
<p class="depth1" :class="{ active: isMainMenuActive(mainMenu) }">{{ mainMenu.pathName }}</p>
<ul v-if="mainMenu.subMenu" class="sub-menu" v-show="showSubmenu"
:class="{ show: showSubmenu, hide: !showSubmenu }">
<li v-for="(subMenu, idx) in mainMenu.subMenu" :key="idx" :class="{ active: isSubMenuActive(subMenu) }">
<router-link :to="subMenu.path">{{ subMenu.pathName }}</router-link>
</li>
</ul>
</li>
</ul>
<div class="navbg" v-show="showSubmenu" :class="{ show: showSubmenu, hide: !showSubmenu }"></div>
</nav>
</template>
<script>
export default {
data() {
return {
menuList: [
// { path: "/", pathName: "Dashboard", },
{
pathName: "데이터관리",
subMenu: [
{ path: "/fileManagement.page", pathName: "파일관리" },
{ path: "/hostManagement.page", pathName: "호스트관리" },
{ path: "/", pathName: "데이터셋 목록" },
{ path: "/", pathName: "데이터 공유 관리" },
],
},
{
pathName: "메타관리",
subMenu: [
{ path: "/", pathName: "데이터 메타 정보" },
{ path: "/", pathName: "표준 용어 관리" },
],
},
{
pathName: "작업관리",
subMenu: [
{ path: "/scheduleManagement.page", pathName: "작업 스케줄 관리" },
{ path: "/scheduleLogManagement.page", pathName: "로그 관리" },
],
},
{
pathName: "데이터활용",
subMenu: [
{ path: "/", pathName: "데이터 활용 관리" },
{ path: "/", pathName: "데이터 활용 공유 관리" },
{ path: "/", pathName: "GIS데이터 관리" },
{ path: "/", pathName: "데이터현황 관리" },
{ path: "/", pathName: "OpenAPI 목록" },
],
},
{
pathName: "통합관리",
subMenu: [
{ path: "/", pathName: "사용자관리" },
{ path: "/", pathName: "부서관리" },
{ path: "/", pathName: "연계정보관리" },
],
},
{
pathName: "정보관리",
subMenu: [
{ path: "/", pathName: "내정보관리" },
{ path: "/", pathName: "비밀번호 변경" },
{ path: "/", pathName: "부서메일" },
],
},
{
pathName: "ai solution",
subMenu: [
{ path: "/", pathName: "ai solution" },
],
},
{
pathName: "템플릿",
subMenu: [
{ path: "/searchbar.page", pathName: "서치바" },
{ path: "/table.page", pathName: "테이블" },
{ path: "/btnPosition.page", pathName: "버튼별 위치" },
{ path: "/formModal.page", pathName: "form modal" },
{ path: "/alertModal.page", pathName: "alert modal" },
],
},
{
pathName: "레이아웃 템플릿",
subMenu: [
{ path: "/vertical.page", pathName: "수직 레이아웃" },
{ path: "/horizontal.page", pathName: "수평 레이아웃" },
],
},
{
pathName: "가이드",
subMenu: [
{ path: "/guide.page", pathName: "가이드" },
],
},
],
currentRoute: null,
showSubmenu: false
}
},
methods: {
showAllSubMenus() {
this.showSubmenu = true;
},
hideAllSubMenus() {
this.showSubmenu = false;
},
isMainMenuActive(mainMenu) {
return this.currentRoute && (this.currentRoute.path === mainMenu.path || this.isSubMenuActive(mainMenu.subMenu));
},
isSubMenuActive(subMenu) {
if (!subMenu) return false;
for (let i = 0; i < subMenu.length; i++) {
if (this.currentRoute.path === subMenu[i].path) {
return true;
}
}
return false;
},
},
watch: {
$route(to, from) {
this.currentRoute = to;
},
},
computed: {
},
components: {
},
mounted() {
console.log('Menu mounted');
}
}
</script>