111 lines
5.4 KiB
JavaScript
111 lines
5.4 KiB
JavaScript
// 공통 네비게이션 컴포넌트
|
|
class CommonNavigation {
|
|
constructor(currentPage = '') {
|
|
this.currentPage = currentPage;
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
this.createNavigation();
|
|
this.addEventListeners();
|
|
}
|
|
|
|
createNavigation() {
|
|
const nav = document.createElement('nav');
|
|
nav.className = 'glass-effect border-b border-white/10';
|
|
nav.innerHTML = this.getNavigationHTML();
|
|
|
|
// body의 첫 번째 자식으로 추가
|
|
document.body.insertBefore(nav, document.body.firstChild);
|
|
}
|
|
|
|
getNavigationHTML() {
|
|
return `
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex items-center justify-between h-16">
|
|
<!-- 로고/타이틀 -->
|
|
<div class="flex items-center">
|
|
<h2 class="text-xl font-bold text-white">GroupWare</h2>
|
|
</div>
|
|
|
|
<!-- 메뉴 -->
|
|
<div class="hidden md:flex items-center space-x-8">
|
|
${this.getMenuItemHTML('dashboard', '/Dashboard/', '대시보드', 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z')}
|
|
${this.getMenuItemHTML('common', '/Common', '공용코드', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z')}
|
|
${this.getMenuItemHTML('jobreport', '/Jobreport/', '업무일지', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2')}
|
|
${this.getMenuItemHTML('kuntae', '/Kuntae/', '근태관리', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z')}
|
|
</div>
|
|
|
|
<!-- 모바일 메뉴 버튼 -->
|
|
<div class="md:hidden">
|
|
<button id="mobile-menu-button" class="text-white/80 hover:text-white transition-colors p-2">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 모바일 메뉴 -->
|
|
<div id="mobile-menu" class="md:hidden hidden border-t border-white/10 pt-4 pb-4">
|
|
${this.getMobileMenuItemHTML('dashboard', '/Dashboard/', '대시보드', 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z')}
|
|
${this.getMobileMenuItemHTML('common', '/Common', '공용코드', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z')}
|
|
${this.getMobileMenuItemHTML('jobreport', '/Jobreport/', '업무일지', 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2')}
|
|
${this.getMobileMenuItemHTML('kuntae', '/Kuntae/', '근태관리', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
getMenuItemHTML(pageKey, href, text, svgPath) {
|
|
const isActive = this.currentPage === pageKey;
|
|
const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
|
|
|
|
return `
|
|
<a href="${href}" class="${activeClass} transition-colors px-3 py-2 rounded-lg">
|
|
<svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${svgPath}"></path>
|
|
</svg>
|
|
${text}
|
|
</a>
|
|
`;
|
|
}
|
|
|
|
getMobileMenuItemHTML(pageKey, href, text, svgPath) {
|
|
const isActive = this.currentPage === pageKey;
|
|
const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
|
|
|
|
return `
|
|
<a href="${href}" class="block ${activeClass} transition-colors px-3 py-2 rounded-lg mb-2">
|
|
<svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${svgPath}"></path>
|
|
</svg>
|
|
${text}
|
|
</a>
|
|
`;
|
|
}
|
|
|
|
addEventListeners() {
|
|
// 모바일 메뉴 토글
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
if (mobileMenuButton && mobileMenu) {
|
|
mobileMenuButton.addEventListener('click', function() {
|
|
mobileMenu.classList.toggle('hidden');
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// 전역 함수로 내비게이션 초기화
|
|
function initNavigation(currentPage = '') {
|
|
// DOM이 로드된 후에 실행
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
new CommonNavigation(currentPage);
|
|
});
|
|
} else {
|
|
new CommonNavigation(currentPage);
|
|
}
|
|
} |