모바일 상단 메뉴 수정
This commit is contained in:
67
index.php
67
index.php
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user