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/main">AI 디지털교과서<br />통합지원센터</router-link></h1>
</div>
<ul>
<li v-for="(menu, index) in menuList" :key="index" @click="toggleMenu(menu,index)" :class="{ 'active': index === activeMenuIndex }">
<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="sub-menu" :style="{ 'max-height': menu.isOpen ? '200px' : '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>' },
{ path: "#", pathName: "커뮤니티", subMenu: [{ path: "/adm/noticeSelectList.page", pathName: "공지사항" }, { path: "/adm/newsSelectList.page", pathName: "홍보/뉴스" }], icon: '<i class="fa-regular fa-newspaper"></i>', icon2: "<i class='fa-solid fa-angle-right'></i>", isOpen: false },
{ path: "/adm/document.page", pathName: "자료실", subMenu: [{ path: "/adm/document.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 },
{ path: "/adm/statistics.page", pathName: "통계서비스", icon: '<i class="fa-solid fa-chart-line"></i>' },
{ path: "/adm/corporatePR.page", pathName: "네트워킹", subMenu: [{ path: "/adm/corporatePR.page", pathName: "기업홍보관" }], icon: '<i class="fa-solid fa-network-wired"></i>', icon2: "<i class='fa-solid fa-angle-right'></i>", isOpen: false },
{ path: "/adm/modal.page", pathName: "팝업관리", icon: '<i class="fa-solid fa-layer-group"></i>' },
{ path: "/adm/email.page", pathName: "메일발송", icon: '<i class="fa-regular fa-envelope"></i>' },
{ path: "/adm/userSelectList.page", pathName: "사용자관리", icon: '<i class="fa-regular fa-circle-user"></i>' },
{ path: "/adm/subscription .page", pathName: "구독서비스", icon: '<i class="fa-regular fa-bell"></i>' },
],
activeMenuIndex: -1,
};
},
methods: {
//토글 메뉴
toggleMenu(menu,index) {
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>";
}
this.activeMenuIndex = index;
}
},
// 하위메뉴 클릭 시 메뉴 닫힘 방지
stopToggleSubMenuClick(event) {
event.stopPropagation();
},
},
watch: {},
computed: {},
components: {},
mounted() {
console.log("admin menu mounted");
},
};
</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,
.sub-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;
}
.main-menu>ul>li.active{
background: #fff;
border-radius: 10px 0 0 10px;
}
.main-menu>ul>li.active > a{
color: #3f87f7;
}
.sub-menu {
overflow: hidden;
transition: all 0.5s ease-in-out;
}
.sub-menu>li>a {
font-size: 1.3rem;
padding: 10px 50px;
color: #aaa;
}
.sub-menu li a.router-link-active{
color: #333;
}
</style>