163 lines
12 KiB
Plaintext
163 lines
12 KiB
Plaintext
@using InfiniLore.Lucide
|
|
@addTagHelper *, InfiniLore.Lucide
|
|
|
|
<!-- Mega Menu 1: Program -->
|
|
<div id="mega-menu-1" class="hidden absolute left-0 w-full bg-white shadow-xl border-t border-orange-200 transition-all duration-300 z-40">
|
|
<div class="max-w-7xl mx-auto px-4 py-6">
|
|
<!-- First row - 4 items -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<a href="@Url.Action("Udara", "Program")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
|
|
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
|
|
<i class="w-6 h-6 text-white" data-lucide="wind"></i>
|
|
</div>
|
|
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Udara</div>
|
|
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Pengelolaan dan pengawasan kualitas udara</p>
|
|
</a>
|
|
|
|
<a href="@Url.Action("Air", "Program")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
|
|
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
|
|
<i class="w-6 h-6 text-white" data-lucide="droplets"></i>
|
|
</div>
|
|
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Air</div>
|
|
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Pengelolaan dan pelestarian air</p>
|
|
</a>
|
|
|
|
<a href="@Url.Action("Sampah", "Program")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
|
|
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
|
|
<i class="w-6 h-6 text-white" data-lucide="trash-2"></i>
|
|
</div>
|
|
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Sampah</div>
|
|
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Pengawasan kepatuhan lingkungan</p>
|
|
</a>
|
|
|
|
<a href="@Url.Action("LKIP", "Program")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
|
|
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
|
|
<i class="w-6 h-6 text-white" data-lucide="file-text"></i>
|
|
</div>
|
|
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">LKIP</div>
|
|
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Laporan Kinerja Instansi Pemerintah</p>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Second row - 4 items -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
|
|
<a href="@Url.Action("Pengawasan", "Program")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
|
|
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
|
|
<i class="w-6 h-6 text-white" data-lucide="eye"></i>
|
|
</div>
|
|
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Pengawasan</div>
|
|
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Komitmen pencapaian kinerja lingkungan</p>
|
|
</a>
|
|
|
|
<a href="@Url.Action("PerjanjianKinerja", "Program")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
|
|
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
|
|
<i class="w-6 h-6 text-white" data-lucide="handshake"></i>
|
|
</div>
|
|
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Perjanjian Kinerja</div>
|
|
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Upaya pengelolaan sampah terintegrasi</p>
|
|
</a>
|
|
|
|
<a href="@Url.Action("RencanaStrategis", "Program")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
|
|
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
|
|
<i class="w-6 h-6 text-white" data-lucide="target"></i>
|
|
</div>
|
|
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Rencana Strategis</div>
|
|
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Dokumen perencanaan strategis DLH</p>
|
|
</a>
|
|
|
|
<a href="@Url.Action("Anggaran", "Program")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
|
|
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
|
|
<i class="w-6 h-6 text-white" data-lucide="banknote"></i>
|
|
</div>
|
|
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Anggaran</div>
|
|
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Informasi mengenai anggaran DLH</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<partial name="~/Views/Shared/Partials/MegaMenus/_MegaMenu2-Profil.cshtml" />
|
|
<partial name="~/Views/Shared/Partials/MegaMenus/_MegaMenu3-PublikasiData.cshtml" />
|
|
<partial name="~/Views/Shared/Partials/MegaMenus/_MegaMenu4-Layanan.cshtml" />
|
|
<partial name="~/Views/Shared/Partials/MegaMenus/_MegaMenu5-SeputarDLH.cshtml" />
|
|
|
|
<script>
|
|
// Define mobile template for Program menu
|
|
window.programMobileContent = `
|
|
<div class="space-y-3 max-h-[60vh] overflow-y-auto pb-4" style="scrollbar-width: thin; scrollbar-color: #f97316 #f3f4f6;">
|
|
<a href="@Url.Action("Udara", "Program")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<i class="w-6 h-6 text-white" data-lucide="wind"></i>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium text-gray-900">Udara</span>
|
|
<p class="text-sm text-gray-600">Pengelolaan dan pengawasan kualitas udara</p>
|
|
</div>
|
|
</a>
|
|
<a href="@Url.Action("Air", "Program")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<i class="w-6 h-6 text-white" data-lucide="droplets"></i>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium text-gray-900">Air</span>
|
|
<p class="text-sm text-gray-600">Pengelolaan dan pelestarian air</p>
|
|
</div>
|
|
</a>
|
|
<a href="@Url.Action("Sampah", "Program")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<i class="w-6 h-6 text-white" data-lucide="trash-2"></i>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium text-gray-900">Sampah</span>
|
|
<p class="text-sm text-gray-600">Pengawasan kepatuhan lingkungan</p>
|
|
</div>
|
|
</a>
|
|
<a href="@Url.Action("LKIP", "Program")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<i class="w-6 h-6 text-white" data-lucide="file-text"></i>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium text-gray-900">LKIP</span>
|
|
<p class="text-sm text-gray-600">Laporan Kinerja Instansi Pemerintah</p>
|
|
</div>
|
|
</a>
|
|
<a href="@Url.Action("Pengawasan", "Program")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<i class="w-6 h-6 text-white" data-lucide="eye"></i>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium text-gray-900">Pengawasan</span>
|
|
<p class="text-sm text-gray-600">Komitmen pencapaian kinerja lingkungan</p>
|
|
</div>
|
|
</a>
|
|
<a href="@Url.Action("PerjanjianKinerja", "Program")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<i class="w-6 h-6 text-white" data-lucide="handshake"></i>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium text-gray-900">Perjanjian Kinerja</span>
|
|
<p class="text-sm text-gray-600">Upaya pengelolaan sampah terintegrasi</p>
|
|
</div>
|
|
</a>
|
|
<a href="@Url.Action("RencanaStrategis", "Program")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<i class="w-6 h-6 text-white" data-lucide="target"></i>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium text-gray-900">Rencana Strategis</span>
|
|
<p class="text-sm text-gray-600">Dokumen perencanaan strategis DLH</p>
|
|
</div>
|
|
</a>
|
|
<a href="@Url.Action("Anggaran", "Program")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<i class="w-6 h-6 text-white" data-lucide="banknote"></i>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium text-gray-900">Anggaran</span>
|
|
<p class="text-sm text-gray-600">Informasi mengenai anggaran DLH</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
`;
|
|
</script>
|