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="main-menu">
<div class="logo-wrap">
<h1 class="adm-logo"><router-link to="/adm.page">AI 디지털교과서<br />통합지원센터</router-link></h1>
</div>
<ul>
<li v-for="(menu, index) in menuList" :key="index" @click="toggleMenu(menu)" :class="{ 'active': menu.isActive }">
<router-link :to="menu.path">
<p><span v-html="menu.icon"></span><span class="menu-text">{{ menu.pathName }}</span></p>
<p v-html="menu.icon2"></p>
</router-link>
<ul v-if="menu.subMenu" class="aSub-menu" :style="{ 'max-height': menu.isOpen ? '360px' : '0' }">
<li v-for="(subMenu, subIndex) in menu.subMenu" :key="subIndex" @click="stopToggleSubMenuClick">
<router-link :to="subMenu.path">{{ subMenu.pathName }}</router-link>
</li>
</ul>
</li>
</ul>
</nav>
</template>
<script>
export default {
data() {
return {
menuList: [
{ path: "/adm.page", pathName: "대시보드", icon: '<i class="fa-solid fa-house"></i>', isActive: true },
{ path: "/adm/noticeSelectList.page", pathName: "커뮤니티", subMenu: [{ path: "/adm/noticeSelectList.page", pathName: "공지사항" }, { path: "/adm/newsSelectList.page", pathName: "홍보/뉴스" }, { path: "/adm/wgSelectList.page", pathName: "전문가 협의체" }], icon: '<i class="fa-regular fa-newspaper"></i>', icon2: "<i class='fa-solid fa-angle-right'></i>", isOpen: false, isActive: false },
{ path: "/adm/techSelectList.page", pathName: "자료실", subMenu: [{ path: "/adm/techSelectList.page", pathName: "기술문서" }, { path: "/adm/dataSelectList.page", pathName: "자료집" }], icon: '<i class="fa-regular fa-folder-open"></i>', icon2: "<i class='fa-solid fa-angle-right'></i>", isOpen: false, isActive: false },
{
path: "/adm/statistics.page", pathName: "통계서비스", subMenu:
[
{ path: "/adm/visit.page", pathName: "방문자수" },
{ path: "/adm/member.page", pathName: "회원수" },
{ path: "/adm/menuVisit.page", pathName: "메뉴별 접속자수" },
{ path: "/adm/techStatistics.page", pathName: "기술문서" },
{ path: "/adm/dataStatistics.page", pathName: "자료집" },
{ path: "/adm/pr.page", pathName: "기업홍보관" },
{ path: "/adm/noticeStatistics.page", pathName: "공지사항" },
{ path: "/adm/NewsAndPr.page", pathName: "홍보&뉴스" },
{ path: "/adm/wgCommunity.page", pathName: "전문가 협의체" },
{ path: "/adm/matchingStatistics.page", pathName: "매칭현황" },
],
icon: '<i class="fa-regular fa-folder-open"></i>', icon2: "<i class='fa-solid fa-angle-right'></i>", isOpen: false, isActive: false
},
{ path: "/adm/networkingSelectList.page", pathName: "네트워킹", subMenu: [{ path: "/adm/networkingSelectList.page", pathName: "기업홍보관" }], icon: '<i class="fa-solid fa-network-wired"></i>', icon2: "<i class='fa-solid fa-angle-right'></i>", isOpen: false, isActive: false },
{ path: "/adm/popupSelectList.page", pathName: "팝업관리", icon: '<i class="fa-solid fa-layer-group"></i>', isActive: false },
{ path: "/adm/mailSelectList.page", pathName: "메일발송", icon: '<i class="fa-regular fa-envelope"></i>', isActive: false },
{ path: "/adm/userSelectList.page", pathName: "사용자관리", icon: '<i class="fa-regular fa-circle-user"></i>', isActive: false },
{ path: "/adm/subscription .page", pathName: "구독서비스", icon: '<i class="fa-regular fa-bell"></i>', isActive: false },
],
};
},
methods: {
//토글 메뉴
toggleMenu(menu) {
this.menuList.forEach((item) => {
if (item !== menu) {
item.isActive = false;
}
});
menu.isActive = true;
if (menu.hasOwnProperty('isOpen')) {
menu.isOpen = !menu.isOpen;
if (menu.isOpen) {
menu.icon2 = "<i class='fa-solid fa-angle-down'></i>";
} else {
menu.icon2 = "<i class='fa-solid fa-angle-right'></i>";
}
}
},
// url에 따른 메뉴
updateActiveMenu(currentPath) {
this.menuList.forEach((item) => {
// 주요 메뉴의 path와 현재 경로를 비교
if (item.path === currentPath) {
item.isActive = true;
} else {
// 하위 메뉴가 있는 경우, 하위 메뉴의 path와 현재 경로를 비교
if (item.subMenu && item.subMenu.some(sub => sub.path === currentPath)) {
item.isActive = true;
} else {
item.isActive = false;
}
}
});
},
// 하위메뉴 클릭 시 메뉴 닫힘 방지
stopToggleSubMenuClick(event) {
event.stopPropagation();
},
},
watch: {},
computed: {},
components: {},
mounted() {
console.log("admin menu mounted");
this.updateActiveMenu(this.$route.path);
},
};
</script>
<style scoped>
.main-menu {
height: 100%;
grid-area: nav;
background-color: #3f87f7;
overflow-y: auto;
box-shadow: 3px 0 10px #eee;
z-index: 10000;
font-family: "SBaggroM";
}
.main-menu::-webkit-scrollbar {
width: 10px;
}
.main-menu::-webkit-scrollbar-thumb {
background-color: #2f3542;
border-radius: 10px;
background-clip: padding-box;
border: 2px solid transparent;
}
.main-menu::-webkit-scrollbar-track {
background-color: grey;
border-radius: 10px;
box-shadow: inset 0px 0px 5px white;
}
.logo-wrap h1.adm-logo a {
display: block;
font-size: 3rem;
font-weight: 900;
color: #fff;
padding: 30px;
line-height: 160%;
font-family: "Pretendard-Regular";
}
.menu-text {
padding: 0 10px;
}
.main-menu>ul {
padding: 30px 0 30px 30px;
}
.main-menu>ul>li>a,
.aSub-menu>li>a {
display: block;
color: #fff;
padding: 10px 15px;
}
.main-menu>ul>li>a {
font-size: 1.6rem;
display: flex;
justify-content: space-between;
padding: 15px 40px 15px 15px;
}
.main-menu>ul>li.active {
background: #fff;
border-radius: 10px 0 0 10px;
}
.main-menu>ul>li.active>a {
color: #3f87f7;
}
.main-menu>ul>li.active .aSub-menu a {
color: #aaa;
}
.aSub-menu {
overflow: hidden;
transition: all 0.5s ease-in-out;
}
.aSub-menu>li>a {
font-size: 1.3rem;
padding: 10px 50px;
color: #fff;
}
.main-menu>ul>li.active .aSub-menu a.router-link-active {
color: #333;
}
</style>