diff --git a/public/js/components/language-selector.js b/public/js/components/language-selector.js index da18537e..434426df 100644 --- a/public/js/components/language-selector.js +++ b/public/js/components/language-selector.js @@ -1,6 +1,6 @@ /** * Language Selector Component - * Mobile-friendly: Icons on mobile, dropdown on desktop + * Simple icon-based selector for all devices */ (function() { @@ -18,51 +18,23 @@ const currentLang = (window.I18n && window.I18n.currentLang) || 'en'; const selectorHTML = ` - - - - -
-
- ${supportedLanguages.filter(lang => !lang.disabled).map(lang => ` - - `).join('')} -
+ ${lang.flag} + + `).join('')}
`; @@ -73,17 +45,8 @@ } function attachEventListeners(currentLang) { - // Desktop dropdown - const desktopSelector = document.getElementById('language-selector-desktop'); - if (desktopSelector && window.I18n) { - desktopSelector.addEventListener('change', function(e) { - const selectedLang = e.target.value; - window.I18n.setLanguage(selectedLang); - }); - } - - // Mobile icon buttons - const iconButtons = document.querySelectorAll('.language-icon-btn'); + // Icon buttons + const iconButtons = document.querySelectorAll('.language-icon-btn:not([disabled])'); iconButtons.forEach(button => { button.addEventListener('click', function() { const selectedLang = this.getAttribute('data-lang'); @@ -92,9 +55,11 @@ } // Update active state - iconButtons.forEach(btn => { - btn.classList.remove('border-blue-600', 'bg-blue-50'); - btn.classList.add('border-gray-300', 'bg-white'); + document.querySelectorAll('.language-icon-btn').forEach(btn => { + if (!btn.disabled) { + btn.classList.remove('border-blue-600', 'bg-blue-50'); + btn.classList.add('border-gray-300', 'bg-white'); + } }); this.classList.remove('border-gray-300', 'bg-white'); this.classList.add('border-blue-600', 'bg-blue-50');