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>
<div class="logo-wrap">
<h1>
<router-link to="/">
<img src="../../resources/img/content/login_logo.svg" alt="로고">
</router-link>
</h1>
</div>
<ul>
<li
v-for="menu in menus"
:key="menu.name"
:class="{ active: selectedMenu === menu.name }"
@click="selectMenu(menu)"
>
<router-link :to="menu.path">
<img
:src="getMenuIcon(menu)"
:alt="menu.label + ' 아이콘'"
style="width:20px; height:20px; margin-right:8px;"
/>
{{ menu.label }}
</router-link>
</li>
</ul>
</nav>
</template>
<script>
export default {
data() {
return {
menus: [
{ name: 'home', label: 'HOME', icon: 'ico_home', path: '/' },
{ name: 'modeling', label: '모델링', icon: 'ico_modeling', path: '/modeling.page' },
{ name: 'asset', label: '디지털 자산화', icon: 'ico_digital', path: '/asset.page' },
{ name: 'feedback', label: '피드백관리', icon: 'ico_feedback', path: '/feedback.page' }
],
selectedMenu: ''
};
},
methods: {
selectMenu(menu) {
this.selectedMenu = menu.name;
const selectedIconPath = this.getMenuIcon(menu); // _w 아이콘 포함 경로
this.$emit('menu-selected', {
label: menu.label,
icon: selectedIconPath
});
},
getMenuIcon(menu) {
const suffix = this.selectedMenu === menu.name ? '_w' : '';
try {
return require(`../../resources/img/content/${menu.icon}${suffix}.svg`);
} catch (e) {
console.warn(`아이콘 로딩 실패: ${menu.icon}${suffix}.svg`);
return '';
}
}
},
watch:{
'$route.path'(newPath) {
const current = this.menus.find(menu => menu.path === newPath);
this.selectedMenu = current ? current.name : 'home';
if (current) {
const selectedIconPath = this.getMenuIcon(current);
this.$emit('menu-selected', {
label: current.label,
icon: selectedIconPath
});
}
}
},
computed:{},
mounted() {
// 현재 경로와 일치하는 메뉴를 찾아서 active 처리
const current = this.menus.find(menu => menu.path === this.$route.path);
this.selectedMenu = current ? current.name : 'home';
if (current) {
const selectedIconPath = this.getMenuIcon(current);
this.$emit('menu-selected', {
label: current.label,
icon: selectedIconPath
});
}
}
};
</script>