feat(ui): replace language dropdown with globe icon and expandable menu
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user