모바일 상단 메뉴 수정 #1

This commit is contained in:
2025-12-19 10:56:04 +09:00
parent 6be25ee6ec
commit cbf5dc646a

View File

@@ -179,20 +179,20 @@
<!-- Mobile Menu --> <!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden border-t border-slate-200 py-4"> <div id="mobile-menu" class="hidden md:hidden border-t border-slate-200 py-4">
<div class="flex flex-col gap-3"> <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_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" onclick="closeMobileMenu()">영업 시나리오</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="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" onclick="closeMobileMenu()">매니저 시나리오</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="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" onclick="closeMobileMenu()">영업관리</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> <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" onclick="closeMobileMenu()">기업분석</a>
<?php if (isset($_SESSION['userid']) && $_SESSION['userid'] != ''): ?> <?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="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"> <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) ?> <?= mb_substr($_SESSION['name'], 0, 1) ?>
</div> </div>
<span class="text-sm font-medium text-slate-700 flex-1"><?= $_SESSION['name'] ?>님</span> <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> <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" onclick="closeMobileMenu()">로그아웃</a>
</div> </div>
<?php else: ?> <?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 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" onclick="closeMobileMenu()">
로그인 로그인
</a> </a>
<?php endif; ?> <?php endif; ?>
@@ -477,7 +477,9 @@
function init() { function init() {
renderFilters(); renderFilters();
renderGrid(); renderGrid();
lucide.createIcons(); if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
} }
// Filter Logic // Filter Logic
@@ -881,12 +883,17 @@
} }
}; };
// Mobile Menu Toggle // Mobile Menu Functions
window.toggleMobileMenu = () => { window.toggleMobileMenu = () => {
const mobileMenu = document.getElementById('mobile-menu'); const mobileMenu = document.getElementById('mobile-menu');
const menuIcon = document.getElementById('menu-icon'); const menuIcon = document.getElementById('menu-icon');
const closeIcon = document.getElementById('close-icon'); const closeIcon = document.getElementById('close-icon');
if (!mobileMenu || !menuIcon || !closeIcon) {
console.error('Mobile menu elements not found');
return;
}
if (mobileMenu.classList.contains('hidden')) { if (mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.remove('hidden'); mobileMenu.classList.remove('hidden');
menuIcon.classList.add('hidden'); menuIcon.classList.add('hidden');
@@ -897,7 +904,22 @@
closeIcon.classList.add('hidden'); closeIcon.classList.add('hidden');
} }
lucide.createIcons(); // 아이콘 재생성
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
};
window.closeMobileMenu = () => {
const mobileMenu = document.getElementById('mobile-menu');
const menuIcon = document.getElementById('menu-icon');
const closeIcon = document.getElementById('close-icon');
if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
if (menuIcon) menuIcon.classList.remove('hidden');
if (closeIcon) closeIcon.classList.add('hidden');
}
}; };
// Close mobile menu when clicking outside // Close mobile menu when clicking outside
@@ -909,7 +931,7 @@
!mobileMenu.classList.contains('hidden') && !mobileMenu.classList.contains('hidden') &&
!mobileMenu.contains(e.target) && !mobileMenu.contains(e.target) &&
!mobileMenuButton.contains(e.target)) { !mobileMenuButton.contains(e.target)) {
toggleMobileMenu(); closeMobileMenu();
} }
}); });