From fba487f21c387647b38ba7235def60282a364432 Mon Sep 17 00:00:00 2001
From: Mandel Olaiya <mandeleolaiya15@icloud.com>
Date: Sun, 26 Apr 2026 12:05:31 +0200
Subject: [PATCH] Add flag dropdown language switcher

---
 .../headers/partials/carbasa-user-bar.html    | 38 +++++++++++++------
 .../templates/oxyan/partials/flags/de.svg     |  6 +++
 .../templates/oxyan/partials/flags/en.svg     | 11 ++++++
 .../templates/oxyan/partials/flags/es.svg     |  5 +++
 .../templates/oxyan/partials/flags/fr.svg     |  6 +++
 .../templates/oxyan/partials/flags/it.svg     |  6 +++
 .../templates/oxyan/partials/flags/nl.svg     |  6 +++
 .../templates/oxyan/partials/flags/pt.svg     |  5 +++
 .../templates/oxyan/partials/flags/ru.svg     |  6 +++
 9 files changed, 77 insertions(+), 12 deletions(-)
 create mode 100644 mandelstudio/templates/oxyan/partials/flags/de.svg
 create mode 100644 mandelstudio/templates/oxyan/partials/flags/en.svg
 create mode 100644 mandelstudio/templates/oxyan/partials/flags/es.svg
 create mode 100644 mandelstudio/templates/oxyan/partials/flags/fr.svg
 create mode 100644 mandelstudio/templates/oxyan/partials/flags/it.svg
 create mode 100644 mandelstudio/templates/oxyan/partials/flags/nl.svg
 create mode 100644 mandelstudio/templates/oxyan/partials/flags/pt.svg
 create mode 100644 mandelstudio/templates/oxyan/partials/flags/ru.svg

diff --git a/mandelstudio/templates/oxyan/headers/partials/carbasa-user-bar.html b/mandelstudio/templates/oxyan/headers/partials/carbasa-user-bar.html
index cd714e5..a24c3a5 100644
--- a/mandelstudio/templates/oxyan/headers/partials/carbasa-user-bar.html
+++ b/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' %}">
-        {% csrf_token %}
-        <input name="next" type="hidden" value="{{ request.path }}"/>
-        <label for="header-language-switcher" class="visually-hidden">{% trans "Language" %}</label>
-        <select id="header-language-switcher" name="language" class="form-select form-select-sm" onchange="this.form.submit()">
-            {% for language in languages %}
-                <option value="{{ language.code }}" {% if language.code == current_language %}selected{% endif %}>
-                    {{ language.code|upper }}
-                </option>
-            {% endfor %}
-        </select>
-    </form>
+    <div class="dropdown language-dropdown me-2">
+        <button
+            type="button"
+            class="dropdown-toggle user-button menu-circle"
+            id="header-language-switcher"
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
+            aria-label="{% trans 'Language switcher' %}"
+        >
+            {% include "oxyan/partials/flags/"|add:current_language|add:".svg" %}
+        </button>
+        <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"
diff --git a/mandelstudio/templates/oxyan/partials/flags/de.svg b/mandelstudio/templates/oxyan/partials/flags/de.svg
new file mode 100644
index 0000000..9a946ce
--- /dev/null
+++ b/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>
+
diff --git a/mandelstudio/templates/oxyan/partials/flags/en.svg b/mandelstudio/templates/oxyan/partials/flags/en.svg
new file mode 100644
index 0000000..65f5682
--- /dev/null
+++ b/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>
+
diff --git a/mandelstudio/templates/oxyan/partials/flags/es.svg b/mandelstudio/templates/oxyan/partials/flags/es.svg
new file mode 100644
index 0000000..315fb1c
--- /dev/null
+++ b/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>
+
diff --git a/mandelstudio/templates/oxyan/partials/flags/fr.svg b/mandelstudio/templates/oxyan/partials/flags/fr.svg
new file mode 100644
index 0000000..2f7bb8e
--- /dev/null
+++ b/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>
+
diff --git a/mandelstudio/templates/oxyan/partials/flags/it.svg b/mandelstudio/templates/oxyan/partials/flags/it.svg
new file mode 100644
index 0000000..a9e7261
--- /dev/null
+++ b/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>
+
diff --git a/mandelstudio/templates/oxyan/partials/flags/nl.svg b/mandelstudio/templates/oxyan/partials/flags/nl.svg
new file mode 100644
index 0000000..0929e93
--- /dev/null
+++ b/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>
+
diff --git a/mandelstudio/templates/oxyan/partials/flags/pt.svg b/mandelstudio/templates/oxyan/partials/flags/pt.svg
new file mode 100644
index 0000000..8bb2535
--- /dev/null
+++ b/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>
+
diff --git a/mandelstudio/templates/oxyan/partials/flags/ru.svg b/mandelstudio/templates/oxyan/partials/flags/ru.svg
new file mode 100644
index 0000000..6990119
--- /dev/null
+++ b/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>
+