forked from izu/student-web-if-development-kit
feat: penyesuaian hamburger menu dan penyempurnaan navigasi responsif
This commit is contained in:
z0rayy
@@ -430,6 +430,142 @@
|
|||||||
<div id="mega-overlay" class="fixed inset-0 bg-black/30 backdrop-blur-sm z-30"></div>
|
<div id="mega-overlay" class="fixed inset-0 bg-black/30 backdrop-blur-sm z-30"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile Menu -->
|
||||||
|
<div id="mobile-menu"
|
||||||
|
class="fixed inset-0 bg-slate-900 z-[60] transform -translate-x-full lg:hidden flex flex-col transition-transform duration-300"
|
||||||
|
role="dialog" aria-modal="true" aria-label="Menu navigasi mobile">
|
||||||
|
<div class="p-4 flex justify-between items-center border-b border-white/10 bg-untan-navy">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="font-bold text-lg text-white font-serif">Menu Utama</span>
|
||||||
|
<button id="lang-toggle-mobile"
|
||||||
|
class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
|
||||||
|
onclick="setLanguage(currentLang === 'id' ? 'en' : 'id')"
|
||||||
|
aria-label="Ganti bahasa">
|
||||||
|
<span class="font-bold">ID</span> <span class="text-white/40" aria-hidden="true">|</span> EN
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="w-8 h-8 rounded-sm bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
|
||||||
|
aria-label="Pengaturan aksesibilitas"
|
||||||
|
onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
|
||||||
|
<i class="fas fa-universal-access" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button id="close-mobile-menu"
|
||||||
|
class="w-8 h-8 rounded-sm bg-white/10 flex items-center justify-center text-white"
|
||||||
|
aria-label="Tutup menu navigasi">
|
||||||
|
<i class="fas fa-times" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
|
||||||
|
<a href="../../index.html" class="block text-base font-bold text-slate-800 py-1 border-b border-slate-200"
|
||||||
|
data-i18n="nav_home">Beranda</a>
|
||||||
|
|
||||||
|
<!-- Tentang Kami -->
|
||||||
|
<div class="pt-2">
|
||||||
|
<span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_about">Tentang
|
||||||
|
Kami</span>
|
||||||
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
||||||
|
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="link_history">Sejarah & Tonggak</a>
|
||||||
|
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="link_org">Struktur Organisasi</a>
|
||||||
|
<a href="profil.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="link_vision">Visi & Misi</a>
|
||||||
|
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="link_partnership">Kerjasama & MoU</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Program -->
|
||||||
|
<div class="pt-2 border-t border-slate-200">
|
||||||
|
<span class="text-xs font-bold text-slate-400 uppercase font-serif"
|
||||||
|
data-i18n="nav_program">Program</span>
|
||||||
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
||||||
|
<a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="link_academic">Akademik</a>
|
||||||
|
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="link_accreditation">Akreditasi</a>
|
||||||
|
<a href="graduate-profile.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="link_graduate">Profil Lulusan</a>
|
||||||
|
<a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="link_courses">Mata Kuliah</a>
|
||||||
|
<a href="academic-guidelines.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="link_guideline">Panduan Akademik</a>
|
||||||
|
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="link_statistics">Pengumuman</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SDM -->
|
||||||
|
<div class="pt-2 border-t border-slate-200">
|
||||||
|
<span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_sdm">SDM</span>
|
||||||
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
||||||
|
<a href="people-based-on-kk.html"
|
||||||
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue font-medium"
|
||||||
|
data-i18n="btn_all_lecturers">Semua Dosen</a>
|
||||||
|
<a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="kk_ai">Kecerdasan Buatan</a>
|
||||||
|
<a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="kk_se">Rekayasa Perangkat Lunak</a>
|
||||||
|
<a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="kk_network">Jaringan & Keamanan</a>
|
||||||
|
<a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="kk_is">Sistem Informasi</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Fasilitas -->
|
||||||
|
<div class="pt-2 border-t border-slate-200">
|
||||||
|
<span class="text-xs font-bold text-slate-400 uppercase font-serif"
|
||||||
|
data-i18n="nav_facilities">Fasilitas</span>
|
||||||
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
||||||
|
<a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="mega_lab">Laboratorium</a>
|
||||||
|
<a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="mega_dc">Data Center</a>
|
||||||
|
<a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="mega_eresources">E-Resources</a>
|
||||||
|
<a href="ifuntanhub.html"
|
||||||
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue">IFUNTANHUB</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Karya & Agenda -->
|
||||||
|
<div class="pt-2 border-t border-slate-200">
|
||||||
|
<span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_works">Karya &
|
||||||
|
Agenda</span>
|
||||||
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
||||||
|
<a href="karya.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="link_all_karya">Semua Karya</a>
|
||||||
|
<a href="karya.html?filter=penelitian"
|
||||||
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="link_research">Riset</a>
|
||||||
|
<a href="karya.html?filter=pkm" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="link_community">Pengabdian Masyarakat</a>
|
||||||
|
<a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="link_achievements">Prestasi</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Kontak -->
|
||||||
|
<div class="pt-2 border-t border-slate-200 pb-8">
|
||||||
|
<span class="text-xs font-bold text-slate-400 uppercase font-serif"
|
||||||
|
data-i18n="nav_contact">Kontak</span>
|
||||||
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
||||||
|
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="link_official_contact">Kontak Resmi</a>
|
||||||
|
<a href="mailto:info@informatika.untan.ac.id"
|
||||||
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
||||||
|
data-i18n="link_feedback">Saran & Masukan</a>
|
||||||
|
<a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
|
||||||
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
|
||||||
|
<i class="fab fa-instagram text-pink-500"></i> Instagram
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Breadcrumb (Diubah menyesuaikan pepet kiri navbar) -->
|
<!-- Breadcrumb (Diubah menyesuaikan pepet kiri navbar) -->
|
||||||
<div class="bg-white">
|
<div class="bg-white">
|
||||||
<div class="w-full px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 py-3 sm:py-3 md:py-3.5 lg:py-3.5 xl:py-3.5 text-[10px] sm:text-[11px] md:text-xs lg:text-xs xl:text-xs font-medium text-gray-500 uppercase">
|
<div class="w-full px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 py-3 sm:py-3 md:py-3.5 lg:py-3.5 xl:py-3.5 text-[10px] sm:text-[11px] md:text-xs lg:text-xs xl:text-xs font-medium text-gray-500 uppercase">
|
||||||
|
|||||||
Reference in New Issue
Block a user