fix hamburger

groups/RODA/index.html

@@ -133,9 +133,8 @@
                             class="hover:text-untan-yellow transition-colors font-medium">SATU UNTAN</a>
                     </div>
                     <div class="pl-5 border-l border-white/20 flex items-center gap-3">
-                        <button id="lang-toggle-btn"
+                        <button
-                            class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1"
+                            class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1">
-                            onclick="setLanguage(currentLang === 'id' ? 'en' : 'id')">
                             <span class="font-bold">ID</span> <span class="text-white/40">|</span> EN
                         </button>
                         <button
@@ -439,10 +438,9 @@
         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>
+                <span class="font-bold text-lg text-white font-sans">Menu Utama</span>
-                <button id="lang-toggle-mobile"
+                <button
                     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>
@@ -465,7 +463,7 @@
 
             <!-- Tentang Kami -->
             <div class="pt-2">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_about">Tentang
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans" 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"
@@ -481,7 +479,7 @@
 
             <!-- Program -->
             <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans"
                     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"
@@ -501,7 +499,7 @@
 
             <!-- 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>
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans" 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"
@@ -519,7 +517,7 @@
 
             <!-- Fasilitas -->
             <div class="pt-2 border-t border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans"
                     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"
@@ -535,7 +533,7 @@
 
             <!-- 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 &
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans" 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"
@@ -552,7 +550,7 @@
 
             <!-- Kontak -->
             <div class="pt-2 border-t border-slate-200 pb-8">
-                <span class="text-xs font-bold text-slate-400 uppercase font-serif"
+                <span class="text-xs font-bold text-slate-400 uppercase font-sans"
                     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"
@@ -1328,7 +1326,7 @@
             }
         };
 
-        const translations = {
+        const rodaTranslations = {
             id: {
                 info: 'INFO TERBARU',
                 tickerItem1: 'Selamat datang di antarmuka situs web Informatika terbaru!',
@@ -1449,7 +1447,7 @@
             }
         };
 
-        let currentLang = 'id';
+
         let currentFilter = 'all';
         let currentQuery = '';
         let currentKbkInsight = 'ai';
@@ -1700,35 +1698,7 @@
         }
 
 
-        function updateLangButton() {
+        // Global localization.js handles translations and language toggle
-            const desktopButton = document.getElementById('lang-toggle-btn');
-            if (desktopButton) {
-                desktopButton.innerHTML = currentLang === 'id'
-                    ? '<span class="font-bold text-white">ID</span> <span class="text-white/40 mx-2">|</span> <span class="font-normal text-white">EN</span>'
-                    : '<span class="font-normal text-white">ID</span> <span class="text-white/40 mx-2">|</span> <span class="font-bold text-white">EN</span>';
-            }
-
-            const mobileButton = document.getElementById('mobile-lang-toggle-btn');
-            if (mobileButton) {
-                mobileButton.textContent = currentLang === 'id' ? 'Bahasa: ID' : 'Language: EN';
-            }
-        }
-
-        function applyTranslation(lang) {
-            document.querySelectorAll('[data-i18n]').forEach((element) => {
-                const key = element.getAttribute('data-i18n');
-                if (translations[lang][key]) {
-                    element.innerText = translations[lang][key];
-                }
-            });
-
-            document.querySelectorAll('[data-i18n-placeholder]').forEach((element) => {
-                const key = element.getAttribute('data-i18n-placeholder');
-                if (translations[lang][key]) {
-                    element.setAttribute('placeholder', translations[lang][key]);
-                }
-            });
-        }
 
         function matchesQuery(item, query) {
             const haystack = [item.title_id, item.title_en, item.authors, item.venue, item.year].join(' ').toLowerCase();
@@ -1968,19 +1938,17 @@
             revealElements.forEach((element) => observer.observe(element));
         }
 
-        window.setLanguage = function (lang) {
+        document.addEventListener('languageChanged', (e) => {
-            currentLang = lang;
+            currentLang = e.detail.lang;
-            updateLangButton();
-            applyTranslation(lang);
             renderKbkInsight();
             renderRisetCards();
             renderDosenCards();
 
             const lastUpdatedEl = document.getElementById("last-updated");
             if (lastUpdatedEl) {
-                lastUpdatedEl.innerHTML = new Date(document.lastModified).toLocaleString(lang === 'id' ? 'id-ID' : 'en-US');
+                lastUpdatedEl.innerHTML = new Date(document.lastModified).toLocaleString(currentLang === 'id' ? 'id-ID' : 'en-US');
             }
-        };
+        });
 
         window.addEventListener('error', (event) => {
             logAppError('window-error', event.error || new Error(event.message));
@@ -2050,7 +2018,16 @@
                 });
 
                 setupRevealAnimations();
-                setLanguage(currentLang);
+                if (typeof translations !== 'undefined') {
+                    Object.assign(translations.id, rodaTranslations.id);
+                    Object.assign(translations.en, rodaTranslations.en);
+                    if (typeof applyLang === 'function') applyLang();
+                } else {
+                    currentLang = 'id';
+                    renderKbkInsight();
+                    renderRisetCards();
+                    renderDosenCards();
+                }
                 openKbkInsight(currentKbkInsight, false);
                 filterRiset(currentFilter);
                 searchRiset('');
@@ -2227,6 +2204,8 @@
             if (section) observer.observe(section.closest('section'));
         })();
     </script>
+
+    <script src="../../assets/global/localization.js"></script>
 </body>
 
 </html>

groups/RODA/style.css

@@ -1,4 +1,4 @@
-.bg-pattern {
+.bg-pattern {
     background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 
@@ -173,6 +173,11 @@ html {
         display: flex !important;
     }
 
+    /* Hide hamburger button on desktop (aligns with ACAAB lg:1024px) */
+    #mobile-menu-button {
+        display: none !important;
+    }
+
     #kbk-card-grid {
         grid-template-columns: repeat(4, minmax(0, 1fr));
     }