357 lines
16 KiB
Plaintext
357 lines
16 KiB
Plaintext
@using InfiniLore.Lucide
|
|
@addTagHelper *, InfiniLore.Lucide
|
|
|
|
<!-- Desktop Navigation -->
|
|
<nav class="bg-white shadow-sm sticky top-0 z-50">
|
|
<div class="max-w-6xl mx-auto px-4">
|
|
<!-- Top Header with Logo -->
|
|
<div class="flex items-center justify-between py-4">
|
|
<a href="@Url.Action("Index", "Home")" class="flex items-center space-x-3">
|
|
<img src="@Url.Content("~/logo-dlh.png")" class="h-10" alt="DLH Logo" />
|
|
<div>
|
|
<span class="text-lg font-bold text-gray-900 leading-tight">DINAS LINGKUNGAN HIDUP</span>
|
|
<span class="block text-sm text-orange-600 font-medium">PROVINSI DKI JAKARTA</span>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Desktop Menu -->
|
|
<div class="hidden md:flex md:items-center md:space-x-8">
|
|
<a href="@Url.Action("Index", "Home")"
|
|
class="text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
|
|
Beranda
|
|
</a>
|
|
|
|
<div class="relative group">
|
|
<button id="dropdown-button-1"
|
|
class="flex items-center text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
|
|
Program
|
|
<i class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="relative group">
|
|
<button id="dropdown-button-2"
|
|
class="flex items-center text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
|
|
Profil
|
|
<i class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="relative group">
|
|
<button id="dropdown-button-3"
|
|
class="flex items-center text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
|
|
Publikasi Data
|
|
<i class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="relative group">
|
|
<button id="dropdown-button-4"
|
|
class="flex items-center text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
|
|
Layanan
|
|
<i class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="relative group">
|
|
<button id="dropdown-button-5"
|
|
class="flex items-center text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
|
|
Seputar DLH
|
|
<i class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Mobile Bottom Navigation -->
|
|
<div class="md:hidden fixed bottom-0 left-0 right-0 z-50">
|
|
<!-- Bottom Navigation Bar -->
|
|
<div class="bg-white/95 backdrop-blur-xl border-t border-gray-200 shadow-2xl">
|
|
<div class="flex items-center justify-around py-2">
|
|
<a href="@Url.Action("Index", "Home")"
|
|
class="mobile-nav-item flex flex-col items-center py-2 px-3 rounded-xl transition-all duration-300 active:scale-95">
|
|
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 text-white shadow-lg">
|
|
<i class="w-5 h-5" data-lucide="home"></i>
|
|
</div>
|
|
<span class="text-xs font-medium text-gray-600 mt-1">Beranda</span>
|
|
</a>
|
|
|
|
<button id="mobile-program-btn"
|
|
class="mobile-nav-item flex flex-col items-center py-2 px-3 rounded-xl transition-all duration-300 active:scale-95">
|
|
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 text-white shadow-lg">
|
|
<i class="w-5 h-5" data-lucide="briefcase"></i>
|
|
</div>
|
|
<span class="text-xs font-medium text-gray-600 mt-1">Program</span>
|
|
</button>
|
|
|
|
<button id="mobile-profil-btn"
|
|
class="mobile-nav-item flex flex-col items-center py-2 px-3 rounded-xl transition-all duration-300 active:scale-95">
|
|
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 text-white shadow-lg">
|
|
<i class="w-5 h-5" data-lucide="building-2"></i>
|
|
</div>
|
|
<span class="text-xs font-medium text-gray-600 mt-1">Profil</span>
|
|
</button>
|
|
|
|
<button id="mobile-layanan-btn"
|
|
class="mobile-nav-item flex flex-col items-center py-2 px-3 rounded-xl transition-all duration-300 active:scale-95">
|
|
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 text-white shadow-lg">
|
|
<i class="w-5 h-5" data-lucide="headphones"></i>
|
|
</div>
|
|
<span class="text-xs font-medium text-gray-600 mt-1">Layanan</span>
|
|
</button>
|
|
|
|
<button id="mobile-menu-btn"
|
|
class="mobile-nav-item flex flex-col items-center py-2 px-3 rounded-xl transition-all duration-300 active:scale-95">
|
|
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 text-white shadow-lg">
|
|
<i class="w-5 h-5" data-lucide="menu"></i>
|
|
</div>
|
|
<span class="text-xs font-medium text-gray-600 mt-1">Lainnya</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Modal Overlay -->
|
|
<div id="mobile-modal-overlay" class="md:hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-40 hidden transition-all duration-300 opacity-0"></div>
|
|
|
|
<!-- Mobile Menu Modal -->
|
|
<div id="mobile-menu-modal" class="md:hidden fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-xl rounded-t-3xl shadow-2xl transform translate-y-full transition-all duration-300 ease-out z-50 max-h-[80vh] overflow-hidden">
|
|
<div class="flex flex-col h-full">
|
|
<!-- Modal Header -->
|
|
<div class="flex items-center justify-between p-6 border-b border-gray-200/50">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow-lg">
|
|
<i class="w-6 h-6 text-white" data-lucide="menu"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold text-gray-900">Menu</h3>
|
|
<p class="text-sm text-orange-600">Pilih menu navigasi</p>
|
|
</div>
|
|
</div>
|
|
<button id="mobile-modal-close" class="p-2 rounded-xl hover:bg-gray-100 transition-all duration-200 active:scale-95">
|
|
<i class="w-6 h-6 text-gray-600" data-lucide="x"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Modal Content -->
|
|
<div id="mobile-modal-content" class="flex-1 overflow-y-auto p-6">
|
|
<!-- Content will be dynamically loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<partial name="~/Views/Shared/Partials/_MegaMenu.cshtml" />
|
|
|
|
<style>
|
|
.mobile-nav-item:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.mobile-nav-item:hover .w-8 {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Safe area for devices with home indicator */
|
|
@@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
|
.md\\:hidden.fixed.bottom-0 {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Mobile modal elements
|
|
const mobileModalOverlay = document.getElementById('mobile-modal-overlay');
|
|
const mobileMenuModal = document.getElementById('mobile-menu-modal');
|
|
const mobileModalClose = document.getElementById('mobile-modal-close');
|
|
const mobileModalContent = document.getElementById('mobile-modal-content');
|
|
|
|
// Mobile navigation buttons
|
|
const mobileProgramBtn = document.getElementById('mobile-program-btn');
|
|
const mobileProfilBtn = document.getElementById('mobile-profil-btn');
|
|
const mobileLayananBtn = document.getElementById('mobile-layanan-btn');
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
|
|
|
function showMobileModal(content, title) {
|
|
mobileModalContent.innerHTML = content;
|
|
mobileMenuModal.querySelector('h3').textContent = title;
|
|
|
|
mobileModalOverlay.classList.remove('hidden');
|
|
setTimeout(() => {
|
|
mobileModalOverlay.classList.remove('opacity-0');
|
|
mobileMenuModal.classList.remove('translate-y-full');
|
|
}, 10);
|
|
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function hideMobileModal() {
|
|
mobileModalOverlay.classList.add('opacity-0');
|
|
mobileMenuModal.classList.add('translate-y-full');
|
|
|
|
setTimeout(() => {
|
|
mobileModalOverlay.classList.add('hidden');
|
|
}, 300);
|
|
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
// Event listeners for mobile buttons
|
|
mobileProgramBtn.addEventListener('click', () => {
|
|
showMobileModal(window.programMobileContent || "", 'Program');
|
|
lucide.createIcons();
|
|
});
|
|
|
|
mobileProfilBtn.addEventListener('click', () => {
|
|
showMobileModal(window.profilMobileContent || "", 'Profil');
|
|
lucide.createIcons();
|
|
});
|
|
|
|
mobileLayananBtn.addEventListener('click', () => {
|
|
showMobileModal(window.layananMobileContent || "", 'Layanan');
|
|
lucide.createIcons();
|
|
});
|
|
|
|
mobileMenuBtn.addEventListener('click', () => {
|
|
// Get publikasi data and seputar content from their respective mega menu files
|
|
const publikasiDataContent = window.publikasiDataMobileContent || "";
|
|
const seputarContent = window.seputarMobileContent || "";
|
|
|
|
const allMenuContent = `
|
|
<div class="space-y-4">
|
|
<!-- Publikasi Data Section -->
|
|
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
|
<button class="w-full flex items-center justify-between p-4 bg-gradient-to-r from-orange-50 to-orange-100 hover:from-orange-100 hover:to-orange-200 transition-all duration-300" onclick="toggleSubmenu('publikasi-submenu')">
|
|
<div class="flex items-center gap-3">
|
|
<i class="w-6 h-6 text-orange-600" data-lucide="database"></i>
|
|
<div class="text-left">
|
|
<span class="font-medium text-gray-900">Publikasi Data</span>
|
|
<p class="text-sm text-orange-600">Data dan informasi lingkungan hidup</p>
|
|
</div>
|
|
</div>
|
|
<i class="w-5 h-5 text-orange-600 transition-transform duration-300" data-lucide="chevron-down" id="publikasi-chevron"></i>
|
|
</button>
|
|
<div id="publikasi-submenu" class="hidden bg-white overflow-y-auto max-h-64">
|
|
${publikasiDataContent}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Seputar DLH Section -->
|
|
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
|
<button class="w-full flex items-center justify-between p-4 bg-gradient-to-r from-orange-50 to-orange-100 hover:from-orange-100 hover:to-orange-200 transition-all duration-300" onclick="toggleSubmenu('seputar-submenu')">
|
|
<div class="flex items-center gap-3">
|
|
<i class="w-6 h-6 text-orange-600" data-lucide="info"></i>
|
|
<div class="text-left">
|
|
<span class="font-medium text-gray-900">Seputar DLH</span>
|
|
<p class="text-sm text-orange-600">Informasi dan kegiatan DLH</p>
|
|
</div>
|
|
</div>
|
|
<i class="w-5 h-5 text-orange-600 transition-transform duration-300" data-lucide="chevron-down" id="seputar-chevron"></i>
|
|
</button>
|
|
<div id="seputar-submenu" class="hidden bg-white">
|
|
${seputarContent}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
showMobileModal(allMenuContent, 'Menu Lainnya');
|
|
lucide.createIcons();
|
|
});
|
|
|
|
// Add global function for toggling submenus
|
|
window.toggleSubmenu = function(submenuId) {
|
|
const submenu = document.getElementById(submenuId);
|
|
const chevron = document.getElementById(submenuId.replace('-submenu', '-chevron'));
|
|
|
|
if (submenu.classList.contains('hidden')) {
|
|
submenu.classList.remove('hidden');
|
|
submenu.style.maxHeight = submenu.scrollHeight + 'px';
|
|
chevron.style.transform = 'rotate(180deg)';
|
|
} else {
|
|
submenu.style.maxHeight = '0px';
|
|
chevron.style.transform = 'rotate(0deg)';
|
|
setTimeout(() => {
|
|
submenu.classList.add('hidden');
|
|
}, 300);
|
|
}
|
|
};
|
|
|
|
// Close modal events
|
|
mobileModalClose.addEventListener('click', hideMobileModal);
|
|
mobileModalOverlay.addEventListener('click', hideMobileModal);
|
|
|
|
// Desktop dropdown functionality
|
|
const dropdownButtons = document.querySelectorAll('[id^="dropdown-button-"]');
|
|
const megaMenus = document.querySelectorAll('[id^="mega-menu-"]');
|
|
|
|
dropdownButtons.forEach((button, index) => {
|
|
const megaMenu = document.getElementById(`mega-menu-${index + 1}`);
|
|
|
|
if (megaMenu) {
|
|
button.addEventListener('mouseenter', () => {
|
|
megaMenus.forEach(menu => menu.classList.add('hidden'));
|
|
megaMenu.classList.remove('hidden');
|
|
});
|
|
|
|
button.addEventListener('mouseleave', () => {
|
|
setTimeout(() => {
|
|
if (!megaMenu.matches(':hover') && !button.matches(':hover')) {
|
|
megaMenu.classList.add('hidden');
|
|
}
|
|
}, 100);
|
|
});
|
|
|
|
megaMenu.addEventListener('mouseleave', () => {
|
|
megaMenu.classList.add('hidden');
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
mobileDataBtn.addEventListener('click', () => {
|
|
window.location.href = '/Publikasi/DIKPLHD';
|
|
});
|
|
|
|
mobileMenuBtn.addEventListener('click', () => {
|
|
showMobileModal(allMenuContent, 'Menu Lainnya');
|
|
lucide.createIcons();
|
|
});
|
|
|
|
// Close modal events
|
|
mobileModalClose.addEventListener('click', hideMobileModal);
|
|
mobileModalOverlay.addEventListener('click', hideMobileModal);
|
|
|
|
// Desktop dropdown functionality
|
|
const dropdownButtons = document.querySelectorAll('[id^="dropdown-button-"]');
|
|
const megaMenus = document.querySelectorAll('[id^="mega-menu-"]');
|
|
|
|
dropdownButtons.forEach((button, index) => {
|
|
const megaMenu = document.getElementById(`mega-menu-${index + 1}`);
|
|
|
|
if (megaMenu) {
|
|
button.addEventListener('mouseenter', () => {
|
|
megaMenus.forEach(menu => menu.classList.add('hidden'));
|
|
megaMenu.classList.remove('hidden');
|
|
});
|
|
|
|
button.addEventListener('mouseleave', () => {
|
|
setTimeout(() => {
|
|
if (!megaMenu.matches(':hover') && !button.matches(':hover')) {
|
|
megaMenu.classList.add('hidden');
|
|
}
|
|
}, 100);
|
|
});
|
|
|
|
megaMenu.addEventListener('mouseleave', () => {
|
|
megaMenu.classList.add('hidden');
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|