207 lines
13 KiB
Plaintext
207 lines
13 KiB
Plaintext
@using InfiniLore.Lucide
|
|
@addTagHelper *, InfiniLore.Lucide
|
|
|
|
<nav class="bg-white shadow-sm relative z-50">
|
|
<div class="flex flex-wrap justify-between items-center mx-auto max-w-6xl px-4 py-3 lg: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>
|
|
|
|
<!-- Mobile menu button -->
|
|
<button id="mobile-drawer-button" type="button"
|
|
class="inline-flex items-center p-2 ml-3 text-gray-700 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-400 transition-colors duration-200"
|
|
aria-controls="mobile-drawer" aria-expanded="false">
|
|
<span class="sr-only">Open main menu</span>
|
|
<i id="menu-icon" class="w-6 h-6 transition-transform duration-300" data-lucide="menu"></i>
|
|
</button>
|
|
|
|
<!-- Desktop Menu -->
|
|
<div class="hidden md:flex md:items-center md:w-auto">
|
|
<ul class="flex flex-col md:flex-row md:space-x-6 font-medium">
|
|
<li class="relative group">
|
|
<a href="@Url.Action("Index", "Home")" class="flex items-center py-2 text-gray-900 hover:text-orange-600">
|
|
Beranda
|
|
</a>
|
|
</li>
|
|
|
|
@* Dropdown Menu Buttons *@
|
|
@{
|
|
var menus = new[] { "Program", "Profil", "Publikasi Data", "Layanan", "Seputar DLH" };
|
|
}
|
|
|
|
@for (int i = 0; i < menus.Length; i++)
|
|
{
|
|
<li class="relative group">
|
|
<button id="dropdown-button-@(i + 1)"
|
|
class="flex items-center justify-between py-2 text-gray-900 hover:text-orange-600 group">
|
|
<span>@menus[i]</span>
|
|
<i class="w-5 h-5 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
|
|
</button>
|
|
</li>
|
|
}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Drawer Overlay -->
|
|
<div id="mobile-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden hidden transition-opacity duration-300"></div>
|
|
|
|
<!-- Mobile Drawer -->
|
|
<div id="mobile-drawer" class="fixed top-0 right-0 h-full w-80 max-w-[85vw] bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-50 md:hidden">
|
|
<div class="flex flex-col h-full">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between p-4 border-b border-gray-200">
|
|
<div class="flex items-center space-x-2">
|
|
<img src="@Url.Content("~/logo-dlh.png")" class="h-8" alt="DLH Logo" />
|
|
<span class="text-lg font-bold text-gray-900">DLH Jakarta</span>
|
|
</div>
|
|
<button id="mobile-drawer-close" class="p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200">
|
|
<i class="w-6 h-6 text-gray-600" data-lucide="x"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Menu Content -->
|
|
<div class="flex-1 overflow-y-auto">
|
|
<div class="p-4 space-y-2">
|
|
<!-- Beranda -->
|
|
<a href="@Url.Action("Index", "Home")" class="flex items-center gap-3 p-3 rounded-lg hover:bg-orange-50 hover:text-orange-600 transition-colors duration-200">
|
|
<i class="w-5 h-5" data-lucide="home"></i>
|
|
<span class="font-medium">Beranda</span>
|
|
</a>
|
|
|
|
@* Mobile Menu Items *@
|
|
@{
|
|
var mobileMenus = new[] {
|
|
new { Name = "Program", Icon = "briefcase" },
|
|
new { Name = "Profil", Icon = "building" },
|
|
new { Name = "Publikasi Data", Icon = "database" },
|
|
new { Name = "Layanan", Icon = "star" },
|
|
new { Name = "Seputar DLH", Icon = "info" }
|
|
};
|
|
}
|
|
|
|
@for (int i = 0; i < mobileMenus.Length; i++)
|
|
{
|
|
<div class="mobile-menu-item">
|
|
<button class="mobile-dropdown-toggle flex items-center justify-between w-full p-3 rounded-lg hover:bg-orange-50 hover:text-orange-600 transition-colors duration-200" data-target="mobile-submenu-@(i + 1)">
|
|
<div class="flex items-center gap-3">
|
|
<i class="w-5 h-5" data-lucide="@mobileMenus[i].Icon"></i>
|
|
<span class="font-medium">@mobileMenus[i].Name</span>
|
|
</div>
|
|
<i class="w-5 h-5 transition-transform duration-200" data-lucide="chevron-down"></i>
|
|
</button>
|
|
<div id="mobile-submenu-@(i + 1)" class="hidden pl-8 pb-2 space-y-1">
|
|
@if (i == 0) // Program
|
|
{
|
|
<a href="@Url.Action("Udara", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Udara</a>
|
|
<a href="@Url.Action("Air", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Air</a>
|
|
<a href="@Url.Action("Sampah", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Sampah</a>
|
|
<a href="@Url.Action("LKIP", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">LKIP</a>
|
|
<a href="@Url.Action("Pengawasan", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Pengawasan</a>
|
|
<a href="@Url.Action("PerjanjianKinerja", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Perjanjian Kinerja</a>
|
|
<a href="@Url.Action("RencanaStrategis", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Rencana Strategis</a>
|
|
<a href="@Url.Action("Anggaran", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Anggaran</a>
|
|
}
|
|
else if (i == 1) // Profil
|
|
{
|
|
<a href="@Url.Action("Organisasi", "Profil")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Struktur Organisasi</a>
|
|
<a href="@Url.Action("Bidang", "Profil")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Bidang & UPT</a>
|
|
<a href="@Url.Action("Tupoksi", "Profil")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Tupoksi</a>
|
|
}
|
|
else if (i == 2) // Publikasi Data
|
|
{
|
|
<a href="@Url.Action("DIKPLHD", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">DIKPLH</a>
|
|
<a href="@Url.Action("Peraturan", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Peraturan</a>
|
|
<a href="@Url.Action("LaporanKualitasAir", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Laporan Kualitas Air</a>
|
|
<a href="@Url.Action("LaporanKeuangan", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Laporan Keuangan</a>
|
|
<a href="@Url.Action("Kajian", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Kajian</a>
|
|
<a href="@Url.Action("KeanekaragamanHayati", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Keanekaragaman Hayati</a>
|
|
}
|
|
else if (i == 3) // Layanan
|
|
{
|
|
<a href="#" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">AMDAL</a>
|
|
<a href="#" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">PPID</a>
|
|
<a href="#" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Bulky Waste</a>
|
|
}
|
|
else if (i == 4) // Seputar DLH
|
|
{
|
|
<a href="#" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Berita</a>
|
|
<a href="#" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Kontak Kami</a>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="p-4 border-t border-gray-200">
|
|
<div class="text-center text-sm text-gray-500">
|
|
<p>© @DateTime.Now.Year DLH DKI Jakarta</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<partial name="~/Views/Shared/Partials/_MegaMenu.cshtml" />
|
|
</nav>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const mobileButton = document.getElementById('mobile-drawer-button');
|
|
const mobileDrawer = document.getElementById('mobile-drawer');
|
|
const mobileOverlay = document.getElementById('mobile-overlay');
|
|
const mobileClose = document.getElementById('mobile-drawer-close');
|
|
const menuIcon = document.getElementById('menu-icon');
|
|
|
|
function openDrawer() {
|
|
mobileDrawer.classList.remove('translate-x-full');
|
|
mobileOverlay.classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden';
|
|
menuIcon.setAttribute('data-lucide', 'x');
|
|
lucide.createIcons();
|
|
}
|
|
|
|
function closeDrawer() {
|
|
mobileDrawer.classList.add('translate-x-full');
|
|
mobileOverlay.classList.add('hidden');
|
|
document.body.style.overflow = '';
|
|
menuIcon.setAttribute('data-lucide', 'menu');
|
|
lucide.createIcons();
|
|
}
|
|
|
|
mobileButton.addEventListener('click', function() {
|
|
if (mobileDrawer.classList.contains('translate-x-full')) {
|
|
openDrawer();
|
|
} else {
|
|
closeDrawer();
|
|
}
|
|
});
|
|
|
|
mobileClose.addEventListener('click', closeDrawer);
|
|
mobileOverlay.addEventListener('click', closeDrawer);
|
|
|
|
// Mobile dropdown toggles
|
|
document.querySelectorAll('.mobile-dropdown-toggle').forEach(toggle => {
|
|
toggle.addEventListener('click', function() {
|
|
const targetId = this.getAttribute('data-target');
|
|
const submenu = document.getElementById(targetId);
|
|
const chevron = this.querySelector('[data-lucide="chevron-down"]');
|
|
|
|
if (submenu.classList.contains('hidden')) {
|
|
submenu.classList.remove('hidden');
|
|
chevron.style.transform = 'rotate(180deg)';
|
|
} else {
|
|
submenu.classList.add('hidden');
|
|
chevron.style.transform = 'rotate(0deg)';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|