ikan Uploader :
Directory : /var/www/new-ppid-app/partials/
Upload File : |
| Current File : /var/www/new-ppid-app/partials/navbar.php |
<?php
/**
* Partial: navbar publik.
*
* Variabel opsional:
* $activeNav string Menu aktif: beranda|profil|regulasi|layanan.
* $transparentNav bool Jika true, navbar transparan saat di atas halaman
* dan berubah putih ketika di-scroll (untuk beranda
* yang memiliki hero gelap di belakang navbar).
*/
$activeNav = $activeNav ?? '';
$transparentNav = $transparentNav ?? false;
$navItem = static function (string $key, string $label, string $href) use ($activeNav): string {
$active = $activeNav === $key;
$cls = $active
? 'menu-link menu-link-active text-mateng-green font-semibold border-b-2 border-mateng-green'
: 'menu-link text-slate-600 hover:text-mateng-green';
return '<a href="' . e($href) . '" class="transition-colors px-1 py-2 ' . $cls . '">' . e(t($label)) . '</a>';
};
$curLang = current_lang();
// Section pada halaman Profil (dipakai dropdown desktop & submenu mobile).
$profilSections = [
['fa-circle-info', 'Tentang PPID', 'tentang'],
['fa-circle-play', 'Video Profil', 'video'],
['fa-bullseye', 'Visi & Misi', 'visi-misi'],
['fa-list-check', 'Tugas & Fungsi', 'tugas-fungsi'],
['fa-diagram-project', 'Struktur Organisasi', 'struktur'],
['far fa-clock', 'Jadwal Pelayanan', 'jadwal'],
['fa-map-location-dot', 'Lokasi Kantor', 'lokasi'],
];
?>
<?php if ($transparentNav): ?>
<style>
/* Navbar transparan saat di puncak halaman; berubah solid setelah di-scroll. */
#siteNav.nav-transparent:not(.nav-scrolled) { background-color: transparent; box-shadow: none; }
#siteNav.nav-transparent:not(.nav-scrolled) .brand-title { color: #fff; }
#siteNav.nav-transparent:not(.nav-scrolled) .brand-sub { color: rgba(255,255,255,.85); }
#siteNav.nav-transparent:not(.nav-scrolled) .menu-link { color: rgba(255,255,255,.92); border-color: transparent; }
#siteNav.nav-transparent:not(.nav-scrolled) .menu-link:hover { color: #fff; }
#siteNav.nav-transparent:not(.nav-scrolled) .menu-link-active { color: #fff; border-color: #fff; }
#siteNav.nav-transparent:not(.nav-scrolled) .nav-toggle { color: #fff; }
</style>
<?php endif; ?>
<nav id="siteNav" class="fixed top-0 inset-x-0 z-50 bg-white shadow-sm transition-colors duration-300 <?= $transparentNav ? 'nav-transparent' : '' ?>">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20">
<a href="<?= e(url('index.php')) ?>" class="flex items-center gap-3">
<img src="<?= e(asset('logomateng.webp')) ?>" alt="Logo Kabupaten Mamuju Tengah" class="h-12 w-auto">
<img src="<?= e(asset('logo-ppid.png')) ?>" alt="Logo PPID" class="h-11 w-auto hidden sm:block">
<div class="leading-tight">
<h1 class="brand-title text-lg sm:text-xl font-bold text-slate-900">PPID</h1>
<p class="brand-sub text-[10px] sm:text-xs text-slate-500 font-medium uppercase tracking-wide">Kab. Mamuju Tengah</p>
</div>
</a>
<div class="hidden md:flex items-center space-x-4 lg:space-x-6">
<?= $navItem('beranda', 'Beranda', url('index.php')) ?>
<div class="relative group">
<a href="<?= e(url('profil.php')) ?>" class="menu-link <?= $activeNav === 'profil' ? 'menu-link-active text-mateng-green font-semibold border-b-2 border-mateng-green' : 'text-slate-600 hover:text-mateng-green' ?> transition-colors px-1 py-2 inline-flex items-center gap-1.5">
<?= e(t('Profil')) ?> <i class="fas fa-chevron-down text-[10px] transition-transform group-hover:rotate-180"></i>
</a>
<div class="absolute left-1/2 -translate-x-1/2 top-full pt-3 w-64 opacity-0 invisible translate-y-1 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 transition-all duration-200">
<div class="bg-white rounded-xl shadow-xl ring-1 ring-slate-100 overflow-hidden py-2">
<?php foreach ($profilSections as $ps): ?>
<a href="<?= e(url('profil.php') . '#' . $ps[2]) ?>" class="flex items-center gap-3 px-4 py-2.5 hover:bg-slate-50 transition-colors text-sm text-slate-700 hover:text-mateng-green">
<i class="<?= strpos($ps[0], ' ') !== false ? e($ps[0]) : 'fas ' . e($ps[0]) ?> w-5 text-center text-mateng-green"></i> <?= e(t($ps[1])) ?>
</a>
<?php endforeach; ?>
<div class="border-t border-slate-100 my-1"></div>
<a href="<?= e(url('regulasi.php')) ?>" class="flex items-center gap-3 px-4 py-2.5 hover:bg-slate-50 transition-colors text-sm <?= $activeNav === 'regulasi' ? 'text-mateng-green font-semibold bg-mateng-green/5' : 'text-slate-700 hover:text-mateng-green' ?>">
<i class="fas fa-gavel w-5 text-center text-mateng-green"></i> <?= e(t('Regulasi')) ?>
</a>
</div>
</div>
</div>
<div class="relative group">
<button type="button" class="menu-link <?= $activeNav === 'layanan' ? 'menu-link-active text-mateng-green font-semibold border-b-2 border-mateng-green' : 'text-slate-600 hover:text-mateng-green' ?> transition-colors px-1 py-2 inline-flex items-center gap-1.5">
<?= e(t('Layanan Informasi')) ?> <i class="fas fa-chevron-down text-[10px] transition-transform group-hover:rotate-180"></i>
</button>
<div class="absolute left-1/2 -translate-x-1/2 top-full pt-3 w-72 opacity-0 invisible translate-y-1 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 transition-all duration-200">
<div class="bg-white rounded-xl shadow-xl ring-1 ring-slate-100 overflow-hidden py-2">
<a href="<?= e(url('informasi.php')) ?>" class="flex items-start gap-3 px-4 py-3 hover:bg-slate-50 transition-colors">
<span class="w-9 h-9 rounded-lg bg-mateng-green/10 text-mateng-green flex items-center justify-center shrink-0"><i class="fas fa-building-columns"></i></span>
<span><span class="block font-semibold text-slate-800 text-sm"><?= e(t('PPID Utama')) ?></span><span class="block text-xs text-slate-500"><?= e(t('Informasi tingkat kabupaten')) ?></span></span>
</a>
<a href="<?= e(url('direktori-pembantu.php')) ?>" class="flex items-start gap-3 px-4 py-3 hover:bg-slate-50 transition-colors">
<span class="w-9 h-9 rounded-lg bg-mateng-blue/10 text-mateng-blue flex items-center justify-center shrink-0"><i class="fas fa-sitemap"></i></span>
<span><span class="block font-semibold text-slate-800 text-sm"><?= e(t('PPID Pembantu')) ?></span><span class="block text-xs text-slate-500"><?= e(t('Direktori unit & kontak')) ?></span></span>
</a>
<a href="<?= e(url('direktori-informasi.php')) ?>" class="flex items-start gap-3 px-4 py-3 hover:bg-slate-50 transition-colors">
<span class="w-9 h-9 rounded-lg bg-amber-50 text-mateng-gold flex items-center justify-center shrink-0"><i class="fas fa-folder-open"></i></span>
<span><span class="block font-semibold text-slate-800 text-sm"><?= e(t('Direktori Informasi')) ?></span><span class="block text-xs text-slate-500"><?= e(t('Telusuri dokumen per direktori')) ?></span></span>
</a>
</div>
</div>
</div>
<?= $navItem('layanan-desa', 'Layanan Desa', url('layanan-desa.php')) ?>
<?= $navItem('berita', 'Berita', url('berita.php')) ?>
<div class="relative group">
<button type="button" class="menu-link <?= $activeNav === 'galeri' ? 'menu-link-active text-mateng-green font-semibold border-b-2 border-mateng-green' : 'text-slate-600 hover:text-mateng-green' ?> transition-colors px-1 py-2 inline-flex items-center gap-1.5">
<?= e(t('Galeri Kegiatan')) ?> <i class="fas fa-chevron-down text-[10px] transition-transform group-hover:rotate-180"></i>
</button>
<div class="absolute left-1/2 -translate-x-1/2 top-full pt-3 w-56 opacity-0 invisible translate-y-1 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 transition-all duration-200">
<div class="bg-white rounded-xl shadow-xl ring-1 ring-slate-100 overflow-hidden py-2">
<a href="<?= e(url('galeri.php')) ?>" class="flex items-center gap-3 px-4 py-2.5 hover:bg-slate-50 transition-colors text-sm text-slate-700 hover:text-mateng-green">
<i class="fas fa-images w-5 text-center text-mateng-green"></i> <?= e(t('Galeri Foto')) ?>
</a>
<a href="<?= e(url('galeri-video.php')) ?>" class="flex items-center gap-3 px-4 py-2.5 hover:bg-slate-50 transition-colors text-sm text-slate-700 hover:text-mateng-green">
<i class="fab fa-youtube w-5 text-center text-red-600"></i> <?= e(t('Galeri Video')) ?>
</a>
</div>
</div>
</div>
<!-- Widget Pengaturan (tema + bahasa) -->
<div class="relative group">
<button type="button" class="menu-link text-slate-500 hover:text-mateng-green transition-colors w-9 h-9 rounded-lg inline-flex items-center justify-center" aria-label="<?= e(t('Pengaturan')) ?>" title="<?= e(t('Pengaturan')) ?>">
<i class="fas fa-gear group-hover:rotate-90 transition-transform duration-300"></i>
</button>
<div class="absolute right-0 top-full pt-3 w-64 opacity-0 invisible translate-y-1 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 transition-all duration-200">
<div class="bg-white rounded-xl shadow-xl ring-1 ring-slate-100 overflow-hidden">
<div class="px-4 py-3 border-b border-slate-100">
<p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2"><?= e(t('Tampilan')) ?></p>
<div class="grid grid-cols-2 gap-1 bg-slate-100 rounded-lg p-1">
<button type="button" onclick="setTheme('light')" class="flex items-center justify-center gap-1.5 py-1.5 rounded-md text-sm font-medium transition-colors bg-mateng-green text-white dark:bg-transparent dark:text-slate-400"><i class="fas fa-sun"></i> <?= e(t('Terang')) ?></button>
<button type="button" onclick="setTheme('dark')" class="flex items-center justify-center gap-1.5 py-1.5 rounded-md text-sm font-medium transition-colors bg-transparent text-slate-500 dark:bg-mateng-green dark:text-white"><i class="fas fa-moon"></i> <?= e(t('Gelap')) ?></button>
</div>
</div>
<div class="px-4 py-3">
<p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2"><?= e(t('Bahasa')) ?></p>
<div class="space-y-1">
<a href="<?= e(lang_url('id')) ?>" class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm hover:bg-slate-50 <?= $curLang === 'id' ? 'text-mateng-green font-semibold bg-mateng-green/5' : 'text-slate-700' ?>">🇮🇩 <?= e(t('Indonesia')) ?> <?php if ($curLang === 'id'): ?><i class="fas fa-check ml-auto text-xs"></i><?php endif; ?></a>
<a href="<?= e(lang_url('en')) ?>" class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm hover:bg-slate-50 <?= $curLang === 'en' ? 'text-mateng-green font-semibold bg-mateng-green/5' : 'text-slate-700' ?>">🇬🇧 <?= e(t('English')) ?> <?php if ($curLang === 'en'): ?><i class="fas fa-check ml-auto text-xs"></i><?php endif; ?></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="md:hidden flex items-center">
<button id="navToggle" class="nav-toggle text-slate-600 text-2xl w-10 h-10" aria-label="Buka menu">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<!-- Menu mobile -->
<div id="mobileMenu" class="md:hidden hidden border-t border-slate-100 bg-white px-4 py-3 space-y-1 shadow-lg">
<a href="<?= e(url('index.php')) ?>" class="block px-3 py-2 rounded-lg hover:bg-slate-50 <?= $activeNav === 'beranda' ? 'text-mateng-green font-semibold' : 'text-slate-700' ?>"><?= e(t('Beranda')) ?></a>
<a href="<?= e(url('profil.php')) ?>" class="block px-3 py-2 rounded-lg hover:bg-slate-50 <?= $activeNav === 'profil' ? 'text-mateng-green font-semibold' : 'text-slate-700' ?>"><?= e(t('Profil')) ?></a>
<?php foreach ($profilSections as $ps): ?>
<a href="<?= e(url('profil.php') . '#' . $ps[2]) ?>" class="block px-5 py-2 rounded-lg hover:bg-slate-50 text-slate-600 text-sm"><i class="<?= strpos($ps[0], ' ') !== false ? e($ps[0]) : 'fas ' . e($ps[0]) ?> w-5 mr-1 text-mateng-green"></i> <?= e(t($ps[1])) ?></a>
<?php endforeach; ?>
<a href="<?= e(url('regulasi.php')) ?>" class="block px-5 py-2 rounded-lg hover:bg-slate-50 text-sm <?= $activeNav === 'regulasi' ? 'text-mateng-green font-semibold' : 'text-slate-600' ?>"><i class="fas fa-gavel w-5 mr-1 text-mateng-green"></i> <?= e(t('Regulasi')) ?></a>
<div class="px-3 pt-2 pb-1 text-xs font-semibold text-slate-400 uppercase tracking-wide"><?= e(t('Layanan Informasi')) ?></div>
<a href="<?= e(url('informasi.php')) ?>" class="block px-5 py-2 rounded-lg hover:bg-slate-50 text-slate-700"><i class="fas fa-building-columns w-5 mr-1 text-mateng-green"></i> <?= e(t('PPID Utama')) ?></a>
<a href="<?= e(url('direktori-pembantu.php')) ?>" class="block px-5 py-2 rounded-lg hover:bg-slate-50 text-slate-700"><i class="fas fa-sitemap w-5 mr-1 text-mateng-blue"></i> <?= e(t('PPID Pembantu (Direktori)')) ?></a>
<a href="<?= e(url('direktori-informasi.php')) ?>" class="block px-5 py-2 rounded-lg hover:bg-slate-50 text-slate-700"><i class="fas fa-folder-open w-5 mr-1 text-mateng-gold"></i> <?= e(t('Direktori Informasi')) ?></a>
<a href="<?= e(url('layanan-desa.php')) ?>" class="block px-3 py-2 rounded-lg hover:bg-slate-50 <?= $activeNav === 'layanan-desa' ? 'text-mateng-green font-semibold' : 'text-slate-700' ?>"><?= e(t('Layanan Desa')) ?></a>
<a href="<?= e(url('berita.php')) ?>" class="block px-3 py-2 rounded-lg hover:bg-slate-50 <?= $activeNav === 'berita' ? 'text-mateng-green font-semibold' : 'text-slate-700' ?>"><?= e(t('Berita')) ?></a>
<div class="px-3 pt-2 pb-1 text-xs font-semibold text-slate-400 uppercase tracking-wide"><?= e(t('Galeri Kegiatan')) ?></div>
<a href="<?= e(url('galeri.php')) ?>" class="block px-5 py-2 rounded-lg hover:bg-slate-50 text-slate-700"><i class="fas fa-images w-5 mr-1 text-mateng-green"></i> <?= e(t('Galeri Foto')) ?></a>
<a href="<?= e(url('galeri-video.php')) ?>" class="block px-5 py-2 rounded-lg hover:bg-slate-50 text-slate-700"><i class="fab fa-youtube w-5 mr-1 text-red-600"></i> <?= e(t('Galeri Video')) ?></a>
<div class="pt-3 mt-2 border-t border-slate-100">
<p class="px-3 text-xs font-semibold text-slate-400 uppercase tracking-wide mb-2"><?= e(t('Pengaturan')) ?></p>
<div class="flex items-center gap-2 px-3 mb-2">
<span class="text-sm text-slate-500 w-16"><?= e(t('Tampilan')) ?></span>
<div class="grid grid-cols-2 gap-1 bg-slate-100 rounded-lg p-1 flex-1">
<button type="button" onclick="setTheme('light')" class="py-1.5 rounded-md text-sm font-medium transition-colors bg-mateng-green text-white dark:bg-transparent dark:text-slate-400"><i class="fas fa-sun mr-1"></i> <?= e(t('Terang')) ?></button>
<button type="button" onclick="setTheme('dark')" class="py-1.5 rounded-md text-sm font-medium transition-colors bg-transparent text-slate-500 dark:bg-mateng-green dark:text-white"><i class="fas fa-moon mr-1"></i> <?= e(t('Gelap')) ?></button>
</div>
</div>
<div class="flex items-center gap-2 px-3">
<span class="text-sm text-slate-500 w-16"><?= e(t('Bahasa')) ?></span>
<div class="grid grid-cols-2 gap-1 bg-slate-100 rounded-lg p-1 flex-1">
<a href="<?= e(lang_url('id')) ?>" class="text-center py-1.5 rounded-md text-sm font-medium <?= $curLang === 'id' ? 'bg-mateng-green text-white' : 'text-slate-500' ?>">🇮🇩 ID</a>
<a href="<?= e(lang_url('en')) ?>" class="text-center py-1.5 rounded-md text-sm font-medium <?= $curLang === 'en' ? 'bg-mateng-green text-white' : 'text-slate-500' ?>">🇬🇧 EN</a>
</div>
</div>
</div>
</div>
</nav>
<script>
(function () {
var btn = document.getElementById('navToggle');
var menu = document.getElementById('mobileMenu');
if (btn && menu) {
btn.addEventListener('click', function () { menu.classList.toggle('hidden'); });
}
var nav = document.getElementById('siteNav');
if (nav && nav.classList.contains('nav-transparent')) {
var onScroll = function () {
if (window.scrollY > 24) { nav.classList.add('nav-scrolled'); }
else { nav.classList.remove('nav-scrolled'); }
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
}
})();
</script>
<?php if (!$transparentNav): ?>
<!-- Spacer pengganti tinggi navbar (fixed) agar konten tidak tertutup. -->
<div class="h-20"></div>
<?php endif; ?>
<?php
// Render flash messages tepat di bawah navbar.
require __DIR__ . '/flash.php';
Kontol Shell Bypass