feat(ui): replace language dropdown with globe icon and expandable menu

This commit is contained in:
2026-07-07 09:54:57 +08:00
parent 591ad3e178
commit 02269417a9
2 changed files with 26 additions and 8 deletions

View File

@@ -18,13 +18,17 @@
<a href="/admin/invites">{{ 'nav.invites'|t(user.language) }}</a>
{% endif %}
<a href="/api/docs">{{ 'nav.api_docs'|t(user.language) }}</a>
<form method="post" action="/settings/language" class="inline" style="display:inline-flex;align-items:center;gap:0">
<select name="language" class="nav-lang-select" onchange="this.form.submit()">
<div class="lang-switcher" id="langSwitcher">
<button type="button" class="lang-globe" onclick="document.getElementById('langDropdown').classList.toggle('show')">🌐</button>
<div class="lang-dropdown" id="langDropdown">
{% for code, name in available_languages.items() %}
<option value="{{ code }}" {% if user.language == code %}selected{% endif %}>{{ name }}</option>
<form method="post" action="/settings/language">
<input type="hidden" name="language" value="{{ code }}">
<button type="submit" class="lang-option {% if user.language == code %}active{% endif %}">{{ name }}</button>
</form>
{% endfor %}
</select>
</form>
</div>
</div>
<a href="/logout" class="nav-logout">{{ 'nav.logout'|t(user.language) }}</a>
{% endif %}
</div>
@@ -41,5 +45,13 @@ document.addEventListener('submit', function(e) {
el.value = el.value.trim();
});
}, true);
// Close language dropdown when clicking outside
document.addEventListener('click', function(e) {
var sw = document.getElementById('langSwitcher');
var dd = document.getElementById('langDropdown');
if (sw && dd && !sw.contains(e.target)) {
dd.classList.remove('show');
}
});
</script>
</html>