모바일 상단 메뉴 수정

This commit is contained in:
2025-12-19 10:53:22 +09:00
parent 7253c40e3c
commit 6be25ee6ec

View File

@@ -147,13 +147,15 @@
</div>
<span class="text-xl font-bold tracking-tight text-slate-900">CodeBridgeX <span class="text-brand-600">SAM</span></span>
</div>
<div class="flex items-center gap-4">
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center gap-4">
<a href="sales_scenario/" class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors">영업 시나리오</a>
<a href="sales_manager_scenario/" class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors">매니저 시나리오</a>
<a href="salesmanagement/" class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors">영업관리</a>
<a href="corp/kodata.php" class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors">기업분석</a>
<?php if (isset($_SESSION['userid']) && $_SESSION['userid'] != ''): ?>
<div class="hidden sm:flex items-center gap-2 ml-2">
<div class="flex items-center gap-2 ml-2">
<div class="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center text-slate-500 font-bold border border-slate-300">
<?= mb_substr($_SESSION['name'], 0, 1) ?>
</div>
@@ -166,6 +168,35 @@
</a>
<?php endif; ?>
</div>
<!-- Mobile Hamburger Button -->
<button id="mobile-menu-button" class="md:hidden p-2 rounded-lg text-slate-600 hover:bg-slate-100 transition-colors" onclick="toggleMobileMenu()">
<i data-lucide="menu" class="w-6 h-6" id="menu-icon"></i>
<i data-lucide="x" class="w-6 h-6 hidden" id="close-icon"></i>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden border-t border-slate-200 py-4">
<div class="flex flex-col gap-3">
<a href="sales_scenario/" class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors px-2 py-2 hover:bg-slate-50 rounded-lg">영업 시나리오</a>
<a href="sales_manager_scenario/" class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors px-2 py-2 hover:bg-slate-50 rounded-lg">매니저 시나리오</a>
<a href="salesmanagement/" class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors px-2 py-2 hover:bg-slate-50 rounded-lg">영업관리</a>
<a href="corp/kodata.php" class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors px-2 py-2 hover:bg-slate-50 rounded-lg">기업분석</a>
<?php if (isset($_SESSION['userid']) && $_SESSION['userid'] != ''): ?>
<div class="flex items-center gap-2 px-2 py-2 border-t border-slate-200 mt-2 pt-3">
<div class="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center text-slate-500 font-bold border border-slate-300">
<?= mb_substr($_SESSION['name'], 0, 1) ?>
</div>
<span class="text-sm font-medium text-slate-700 flex-1"><?= $_SESSION['name'] ?>님</span>
<a href="login/logout.php" class="px-3 py-1.5 bg-slate-100 text-slate-600 text-xs font-bold rounded hover:bg-slate-200 transition-colors border border-slate-200">로그아웃</a>
</div>
<?php else: ?>
<a href="login/login_form.php" class="px-4 py-2 bg-brand-600 text-white text-sm font-bold rounded-lg hover:bg-brand-700 transition-colors shadow-lg shadow-brand-200 text-center mt-2">
로그인
</a>
<?php endif; ?>
</div>
</div>
</div>
</nav>
@@ -850,6 +881,38 @@
}
};
// Mobile Menu Toggle
window.toggleMobileMenu = () => {
const mobileMenu = document.getElementById('mobile-menu');
const menuIcon = document.getElementById('menu-icon');
const closeIcon = document.getElementById('close-icon');
if (mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.remove('hidden');
menuIcon.classList.add('hidden');
closeIcon.classList.remove('hidden');
} else {
mobileMenu.classList.add('hidden');
menuIcon.classList.remove('hidden');
closeIcon.classList.add('hidden');
}
lucide.createIcons();
};
// Close mobile menu when clicking outside
document.addEventListener('click', (e) => {
const mobileMenu = document.getElementById('mobile-menu');
const mobileMenuButton = document.getElementById('mobile-menu-button');
if (mobileMenu && mobileMenuButton &&
!mobileMenu.classList.contains('hidden') &&
!mobileMenu.contains(e.target) &&
!mobileMenuButton.contains(e.target)) {
toggleMobileMenu();
}
});
// Initialize
init();
</script>