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" :style="subShow ? 'max-height:500px; opacity:1' : 'max-height:0px; opacity:0'">
<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" :style="subShow ? `height: ${maxSubMenuHeight}px` : `height: 0px`"></div>
</nav>
</template>
<script>
export default {
data() {
return {
menuList: [
// { path: "/", pathName: "Dashboard", },
{
pathName: "데이터관리",
subMenu: [
{ path: "/fileManagement.page", pathName: "파일관리" },
{ path: "/hostManagement.page", pathName: "호스트관리" },
{ path: "/dataManagement.page", pathName: "데이터관리" },
// { path: "/jobTest.page", pathName: "데이터 공유 관리" },
],
},
{
pathName: "메타관리",
subMenu: [
{ path: "/dataMetaManagement.page", pathName: "데이터 메타 정보" },
{ path: "/termManagement.page", pathName: "표준 용어 관리" },
],
},
{
pathName: "작업관리",
subMenu: [
// { path: "/scheduleManagement.page", pathName: "작업 스케줄 관리" },
{ path: "/scheduleManagement.page", pathName: "작업 스케줄 관리" },
//{ path: "/push.page", pathName: "알림관리" },
//{ path: "/scheduleLogManagement.page", pathName: "로그 관리" },
],
},
{
pathName: "데이터활용",
subMenu: [
{ path: "/customSelectList.page", pathName: "데이터 활용 관리" },
// { path: "/customInsertDev.page", pathName: "개발테스트" },
// { path: "/", pathName: "데이터 활용 공유 관리" },
// { path: "/", pathName: "GIS데이터 관리" },
// { path: "/", pathName: "데이터현황 관리" },
{ path: "/gisInfoList.page", pathName: "GIS 기능 관리" },
{ path: "/openApiList.page", pathName: "OpenAPI 목록" },
{ path: "/openApiKeyList.page", pathName: "OpenAPI key 관리" },
],
},
{
pathName: "통합관리",
subMenu: [
{ path: "/user.page", pathName: "사용자관리" },
{ path: "/department.page", pathName: "부서관리" },
{ path: "/dbConnectionList.page", pathName: "연계정보관리" },
],
},
{
pathName: "정보관리",
subMenu: [
{ path: "/myPage.page", pathName: "내정보관리" },
{ path: "/myPagePwd.page", 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: "/listModal.page", pathName: "list modal" },
// { path: "/icon.page", pathName: "icon" },
// ],
// },
// {
// pathName: "레이아웃 템플릿",
// subMenu: [
// { path: "/vertical.page", pathName: "수직 레이아웃" },
// { path: "/horizontal.page", pathName: "수평 레이아웃" },
// ],
// },
// {
// pathName: "가이드",
// subMenu: [
// { path: "/guide.page", pathName: "가이드" },
// ],
// },
],
currentRoute: null,
subShow: false
}
},
methods: {
showAllSubMenus() {
this.subShow = true;
},
hideAllSubMenus() {
this.subShow = 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: {
maxSubMenuHeight: function () {
let maxSubItems = Math.max(...this.menuList.map(menu => menu.subMenu.length));
return maxSubItems * 55; // assuming each item is 50px high
}
},
}
</script>