Add flag dropdown language switcher

mandelstudio/templates/oxyan/headers/partials/carbasa-user-bar.html

@@ -5,18 +5,32 @@
     {% get_available_languages as available_languages %}
     {% get_language_info_list for available_languages as languages %}
 
-    <form action="{% url 'set_language' %}" method="post" class="ms-lang-switcher me-2" aria-label="{% trans 'Language switcher' %}">
+    <div class="dropdown language-dropdown me-2">
-        {% csrf_token %}
+        <button
-        <input name="next" type="hidden" value="{{ request.path }}"/>
+            type="button"
-        <label for="header-language-switcher" class="visually-hidden">{% trans "Language" %}</label>
+            class="dropdown-toggle user-button menu-circle"
-        <select id="header-language-switcher" name="language" class="form-select form-select-sm" onchange="this.form.submit()">
+            id="header-language-switcher"
-            {% for language in languages %}
+            data-bs-toggle="dropdown"
-                <option value="{{ language.code }}" {% if language.code == current_language %}selected{% endif %}>
+            aria-expanded="false"
-                    {{ language.code|upper }}
+            aria-label="{% trans 'Language switcher' %}"
-                </option>
+        >
-            {% endfor %}
+            {% include "oxyan/partials/flags/"|add:current_language|add:".svg" %}
-        </select>
+        </button>
-    </form>
+        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="header-language-switcher">
+            <form action="{% url 'set_language' %}" method="post" class="language_form">
+                {% csrf_token %}
+                <input name="next" type="hidden" value="{{ request.path }}"/>
+                {% for language in languages %}
+                    <li>
+                        <button class="dropdown-item d-flex align-items-center gap-2" type="submit" value="{{ language.code }}" name="language">
+                            {% include "oxyan/partials/flags/"|add:language.code|add:".svg" %}
+                            <span>{{ language.name_local|title }}</span>
+                        </button>
+                    </li>
+                {% endfor %}
+            </form>
+        </ul>
+    </div>
 
     <a
         tabindex="0"

mandelstudio/templates/oxyan/partials/flags/de.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3" width="18" height="12" aria-hidden="true" focusable="false">
+  <rect width="5" height="3" fill="#FFCE00"/>
+  <rect width="5" height="2" y="0" fill="#DD0000"/>
+  <rect width="5" height="1" y="0" fill="#000"/>
+</svg>
+

mandelstudio/templates/oxyan/partials/flags/en.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width="18" height="12" aria-hidden="true" focusable="false">
+  <clipPath id="t">
+    <path d="M0 0v30h60V0z"/>
+  </clipPath>
+  <path d="M0 0v30h60V0z" fill="#012169"/>
+  <path d="M0 0l60 30m0-30L0 30" stroke="#FFF" stroke-width="6"/>
+  <path d="M0 0l60 30m0-30L0 30" clip-path="url(#t)" stroke="#C8102E" stroke-width="4"/>
+  <path d="M30 0v30M0 15h60" stroke="#FFF" stroke-width="10"/>
+  <path d="M30 0v30M0 15h60" stroke="#C8102E" stroke-width="6"/>
+</svg>
+

mandelstudio/templates/oxyan/partials/flags/es.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" width="18" height="12" aria-hidden="true" focusable="false">
+  <rect width="3" height="2" fill="#AA151B"/>
+  <rect width="3" height="1" y="0.5" fill="#F1BF00"/>
+</svg>
+

mandelstudio/templates/oxyan/partials/flags/fr.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" width="18" height="12" aria-hidden="true" focusable="false">
+  <rect width="1" height="2" x="0" fill="#0055A4"/>
+  <rect width="1" height="2" x="1" fill="#FFF"/>
+  <rect width="1" height="2" x="2" fill="#EF4135"/>
+</svg>
+

mandelstudio/templates/oxyan/partials/flags/it.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" width="18" height="12" aria-hidden="true" focusable="false">
+  <rect width="1" height="2" x="0" fill="#009246"/>
+  <rect width="1" height="2" x="1" fill="#FFF"/>
+  <rect width="1" height="2" x="2" fill="#CE2B37"/>
+</svg>
+

mandelstudio/templates/oxyan/partials/flags/nl.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 6" width="18" height="12" aria-hidden="true" focusable="false">
+  <path fill="#21468B" d="M0 0h9v6H0z"/>
+  <path fill="#FFF" d="M0 0h9v4H0z"/>
+  <path fill="#AE1C28" d="M0 0h9v2H0z"/>
+</svg>
+

mandelstudio/templates/oxyan/partials/flags/pt.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" width="18" height="12" aria-hidden="true" focusable="false">
+  <rect width="3" height="2" fill="#D01C1F"/>
+  <rect width="1.2" height="2" x="0" fill="#006600"/>
+</svg>
+

mandelstudio/templates/oxyan/partials/flags/ru.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" width="18" height="12" aria-hidden="true" focusable="false">
+  <rect width="3" height="2" fill="#D52B1E"/>
+  <rect width="3" height="1.3333" y="0" fill="#0039A6"/>
+  <rect width="3" height="0.6667" y="0" fill="#FFF"/>
+</svg>
+