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="logo"><router-link to="/">AI 디지털교과서 통합지원센터</router-link></h1>
</div>
<ul>
<li v-for="(menu, index) in menuList" :key="index" @click="toggleMenu(menu)">
<router-link :to="menu.path">{{ menu.pathName }}<span v-html="menu.icon"></span></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">
<router-link :to="subMenu.path">{{ subMenu.pathName }}</router-link>
</li>
</ul>
</li>
</ul>
</nav>
</template>
<script>
export default {
data() {
return {
menuList: [
{ path: "/main.page", pathName: "대시보드" },
{ path: "/notice.page", pathName: "커뮤니티", subMenu: [{ path: "/notice.page", pathName: "공지사항" }, { path: "/new.page", pathName: "홍보/뉴스" }], icon: "<i class='fa-solid fa-angle-right'></i>", isOpen: false },
{ path: "/document.page", pathName: "자료실", subMenu: [{ path: "/document.page", pathName: "기술문서" }, { path: "/reference.page", pathName: "자료집" }], icon: "<i class='fa-solid fa-angle-right'></i>", isOpen: false },
{ path: "/statistics.page", pathName: "통계서비스" },
{ path: "/corporatePR.page", pathName: "네트워킹", subMenu: [{ path: "/corporatePR.page", pathName: "기업홍보관" }], icon: "<i class='fa-solid fa-angle-right'></i>", isOpen: false },
{ path: "/modal.page", pathName: "팝업관리" },
{ path: "/email.page", pathName: "메일발송" },
{ path: "/userSelectList.page", pathName: "사용자관리" },
{ path: "/subscription .page", pathName: "구독서비스" },
]
};
},
methods: {
//토글 메뉴
toggleMenu(menu) {
console.log(menu);
if (menu.hasOwnProperty('isOpen')) {
menu.isOpen = !menu.isOpen;
if (menu.isOpen) {
menu.icon = "<i class='fa-solid fa-angle-down'></i>";
} else {
menu.icon = "<i class='fa-solid fa-angle-right'></i>";
}
}
},
// 하위메뉴 클릭 시 메뉴 닫힘 방지
stopToggleSubMenuClick(event) {
event.stopPropagation();
},
},
watch: {},
computed: {},
components: {},
mounted() {
console.log("Header mounted");
},
};
</script>
<style scoped>
.main-menu {
height: 100%;
grid-area: nav;
background-color: #101924;
overflow-y: auto;
}
.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 a {
display: block;
font-size: 2rem;
font-weight: 900;
color: #fff;
padding: 30px 15px;
}
.main-menu>ul {
padding: 30px 0;
}
.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;
}
.sub-menu {
background-color: #203248;
overflow: hidden;
transition: all 0.5s ease-in-out;
}
.sub-menu>li>a {
font-size: 1.3rem;
padding: 10px 30px;
}
</style>