File name
Commit message
Commit date
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-nav flex justify-between align-center">
<router-link to="/Bi002.page" class="logo gd-1"></router-link>
<ul class="flex justify-between topmenu-wrap align-center">
<li v-for="(topMenu, idx) in menuList" key="idx">
<p @click="selectItem(topMenu.id)" :class="{ active: topMenu.isActive }">{{ topMenu.pathName }}</p>
</li>
</ul>
<div class="logo-wrap flex justify-between align-center logo-btn " style="flex-wrap: nowrap; width: 10%;">
<div class=" header-btn">
<p class="btn-img1"></p>
<a href="/">사용설명서</a>
</div>
</div>
</nav>
</template>
<script>
export default {
data() {
return {
menuList: [
{ id: 0, pathName: "인사/급여" },
{ id: 1, isActive: true, pathName: "회계" },
{ id: 2, pathName: "원가" },
{ id: 3, pathName: "영업" },
{ id: 4, pathName: "원자재" },
{ id: 5, pathName: "부자재" },
{ id: 6, pathName: "생산" },
{ id: 7, pathName: "계근" },
{ id: 8, pathName: "무역" },
{ id: 9, pathName: "안전" },
{ id: 10, pathName: "지시사항" },
{ id: 11, pathName: "업무계획" },
{ id: 12, pathName: "고객" },
{ id: 13, pathName: "프로젝트" },
{ id: 14, pathName: "시스템" },
{ id: 15, pathName: "WEB" },
]
}
},
methods: {
selectItem(id) {
// 모든 메뉴 항목의 isActive 속성을 false로 설정
this.menuList.forEach(item => {
item.isActive = false;
});
// 클릭한 메뉴 항목의 isActive 속성만 true로 설정
const selectedItem = this.menuList.find(item => item.id === id);
if (selectedItem) {
selectedItem.isActive = true;
}
console.log(id);
this.$emit('itemSelected', id);
console.log("상단 메뉴 클릭됨. 사이드 메뉴 상태 변경 예정.");
}
},
watch: {
},
computed: {
},
mounted() {
}
}
</script>
<style scoped>
ul {
width: 100%;
list-style: none;
padding: 17px 30px;
background-color: var(--navbarblue);
}
li {
/* border: 1px solid blue; */
text-align: center;
}
.topheader {
background-color: var(--headergray);
padding: 2px 30px;
}
.topheader p,
.topheader button {
padding: 0.1% 0;
color: var(--white);
font-size: 1.4rem;
}
.header-btn {
width: 45px;
height: 45px;
background-color: var(--white);
border-radius: 5px;
text-align: center;
margin-left: 2%;
padding: 3% 0;
box-shadow: 1px 1px 5px #00000031;
}
.header-btn p {
margin: 0 auto;
width: 20px;
height: 20px;
background-size: contain;
}
</style>