add header menu lang

Gemfile

@@ -19,6 +19,7 @@ gem "decidim-term_customizer", github: "mainio/decidim-module-term_customizer"
 gem "bootsnap", "~> 1.3"
 
 gem "puma", ">= 6.3.1"
+gem "deface", ">= 1.9"
 
 gem "wicked_pdf", "~> 2.1"
 

Gemfile.lock

@@ -828,7 +828,7 @@ GEM
       activesupport (>= 6.1)
       sprockets (>= 3.0.0)
     ssrf_filter (1.1.2)
-    stringio (3.1.1)
+    stringio (3.1.2)
     strscan (3.1.0)
     temple (0.10.3)
     terminal-table (3.0.2)
@@ -906,6 +906,7 @@ DEPENDENCIES
   decidim-dev!
   decidim-templates!
   decidim-term_customizer!
+  deface (>= 1.9)
   letter_opener_web (~> 2.0)
   listen (~> 3.1)
   net-imap (~> 0.2.3)

app/overrides/layouts/decidim/header/_main/add_language_chooser_to_header.html.erb.deface

@@ -0,0 +1,27 @@
+<!-- insert_top ".main-bar__links-desktop" -->
+
+<% if available_locales.length > 1 %>
+  <div class="main-header__language-container">
+    <button id="trigger-dropdown-language-top" data-component="dropdown" data-target="dropdown-menu-language-top" class="main-header__language-trigger">
+      <div><%= icon "global-line" %> <%= icon "arrow-down-s-line" %></div>
+      <div><%= t("name", scope: "locale" ) %></div>
+      <span class="sr-only">
+        <% available_locales.each do |locale| %>
+          <span lang="<%= locale %>">
+            <%= I18n.with_locale(locale) { t("layouts.decidim.language_chooser.choose_language") } %>
+          </span>
+        <% end %>
+      </span>
+    </button>
+
+    <div id="dropdown-menu-language-top" class="main-header__language-chooser" aria-hidden="true">
+      <ul class="main-header__language" role="menu">
+        <% (available_locales - [I18n.locale.to_s]).each do |locale| %>
+          <li role="presentation">
+            <%= link_to locale_name(locale), decidim.locale_path(locale:), method: :post, role: "menuitem", lang: locale %>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  </div>
+<% end %>

app/packs/stylesheets/decidim/decidim_application.scss

@@ -8,3 +8,30 @@
 // By default this is empty.
 
 @import "../partials/fonts";
+
+.main-bar__links-desktop {
+    @media (min-width: 768px){
+      [data-target*=dropdown] {
+        @apply block min-w-16;;
+        div {
+          @apply block text-secondary text-sm text-center;
+          svg {
+            @apply inline-block;
+          }
+        }
+      }
+    }
+    .main-header__language-chooser {
+      @apply relative z-10;
+
+      > ul {
+        @apply absolute left-0 bg-white p-4 shadow-md text-left;
+        >li {
+          @apply text-secondary text-md hover:underline hover:bg-secondary hover:text-white transition;
+          >a {
+            @apply p-2 w-full block;
+          }
+        }
+      }
+    }
+  }