Add a language selector in the header navigation (#551)

* Desktop menu function and style

* Overrides checksum matching for rspec

* Header language selector for mobile view

* Lint stylesheets

* Stylesheet unit fix

* Spacing in _main.html.erb

* Cleaned up the language selector [full language name, down-arrow icon]

* Mobile language menu fix

* Restore Gemfile.lock

* Fix style and tests specs as per suggestions

* Style lint fix

* Expected result of header/main override spec

* typo and dropdown menu fully visible

app/packs/stylesheets/decidim/decidim_application.scss

@@ -29,3 +29,85 @@
     }
   }
 }
+
+.main-header__language-container > #trigger-dropdown-language-chooser {
+  gap: 0.1rem !important;
+  flex-direction: column;
+  padding: 0.25rem 0.5rem;
+
+  span {
+    display: block;
+    font-weight: 400;
+    color: rgb(var(--secondary-rgb) / 1);
+    font-size: 14px;
+  }
+
+  svg {
+    fill: rgb(var(--secondary-rgb) / 1);
+  }
+}
+
+.main-footer__language {
+  z-index: 1000;
+}
+
+.main-header__language-container > #trigger-dropdown-language-chooser:hover {
+  background-color: #f3f4f7 !important;
+  border-radius: 0.25rem;
+  text-decoration: underline;
+  text-decoration-color: rgb(var(--secondary-rgb) / 1);
+}
+
+#dropdown-menu-language-chooser {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  align-items: center !important;
+}
+
+#dropdown-menu-language-chooser > ul > li > a {
+  font-size: 14px;
+  padding: 0.5rem;
+}
+
+.mobile_menu__language-container {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+@media (min-width: 768px) {
+  .main-header__language-container > #trigger-dropdown-language-chooser {
+    display: flex !important;
+  }
+}
+
+@media (max-width: 1023px) {
+  .main-header__language-container > #trigger-dropdown-language-chooser {
+    flex-direction: row !important;
+  }
+
+  #trigger-dropdown-language-chooser > svg {
+    display: none;
+  }
+
+  #trigger-dropdown-language-chooser > div > svg {
+    display: none;
+  }
+
+  #dropdown-menu-main-mobile > div.main-header__language-container {
+    display: flex;
+    flex-direction: row;
+    width: 10rem;
+    margin: auto;
+    color: rgb(168 44 44) !important;
+    font-weight: 600 !important;
+  }
+
+  #dropdown-menu-language-chooser > ul > li > a,
+  #dropdown-menu-language-chooser > ul > li,
+  #trigger-dropdown-language-chooser > div > span,
+  #trigger-dropdown-language-chooser {
+    padding: 0 !important;
+    font-size: 1rem !important;
+    font-weight: 600 !important;
+  }
+}

app/views/layouts/decidim/header/_header_language_selector.html.erb

@@ -0,0 +1,28 @@
+<% if available_locales.length > 1 %>
+        <div class="main-header__language-container">
+          <button id="trigger-dropdown-language-chooser" data-component="dropdown" data-target="dropdown-menu-language-chooser" class="main-footer__language-trigger">
+            <%= icon "global-line" %>
+            <div class="flex flex-row">
+              <span><%= t("name", scope: "locale") %></span>
+              <%= icon "arrow-down-s-line" %>
+            <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-chooser" aria-hidden="false" role="menu" aria-labelledby="trigger-dropdown-language-chooser" tabindex="-1">
+            <ul class="main-footer__language absolute" role="menu">
+              <% (available_locales - [I18n.locale.to_s]).each do |locale| %>
+                <li class="text-secondary text-md hover:bg-secondary hover:text-white transition" role="presentation">
+                  <%= link_to locale_name(locale), decidim.locale_path(locale:), method: :post, role: "menuitem", lang: locale, class: "w-full block" %>
+                </li>
+              <% end %>
+            </ul>
+          </div>
+        </div>
+      <% end %>

app/views/layouts/decidim/header/_main.html.erb

@@ -0,0 +1,39 @@
+<div id="main-bar" class="main-bar__container">
+  <div class="main-bar">
+    <div class="main-bar__logo">
+      <%= render partial: "layouts/decidim/logo", locals: { organization: current_organization } %>
+    </div>
+
+    <div class="main-bar__search">
+      <%= render partial: "layouts/decidim/header/main_search" %>
+    </div>
+
+    <div class="main-bar__links-desktop">
+      <%= render partial: "layouts/decidim/header/header_language_selector" %>
+      <%= render partial: "layouts/decidim/header/main_links_desktop" %>
+    </div>
+
+    <div class="lg:hidden">
+      <%# Main dropdown mobile %>
+      <button id="main-dropdown-summary-mobile" class="main-bar__links-mobile__trigger"
+        data-component="dropdown"
+        data-target="dropdown-menu-main-mobile">
+        <%= icon "menu-line" %><span class="sr-only"><%= t("main_menu", scope: "layouts.decidim.header") %></span>
+      </button>
+
+      <div id="dropdown-menu-main-mobile" class="main-bar__links-mobile__dropdown" aria-hidden="true">
+        <%= render partial: "layouts/decidim/header/header_language_selector" %>
+        <%= render partial: "layouts/decidim/header/menu_breadcrumb_main_dropdown", locals: { id: "breadcrumb-main-dropdown-mobile" } %>
+      </div>
+
+      <%# Sticky menu mobile %>
+      <div class="main-bar__links-mobile">
+        <%= render partial: "layouts/decidim/header/main_links_mobile" %>
+      </div>
+
+      <%# Overlay menus mobile %>
+      <%= render partial: "layouts/decidim/header/main_links_mobile_search" %>
+      <%= render partial: "layouts/decidim/header/main_links_mobile_account" if current_user %>
+    </div>
+  </div>
+</div>

config/locales/ca.yml

@@ -298,6 +298,9 @@ ca:
       system:
         login_items:
           logout: Tancar sessió
+  locale:
+    name: Català
+    name_with_error: Català (¡error!)
   errors:
     messages:
       not_in_district: El codi postal no pertany al districte

config/locales/en.yml

@@ -19,5 +19,8 @@ en:
     decidim:
       initiative_header_steps:
         signature_collection_period: Recollida de signatures
+  locale:
+    name: English
+    name_with_error: English (error!)
   menu:
     accountability_static: Accountability

config/locales/es.yml

@@ -291,6 +291,9 @@ es:
       system:
         login_items:
           logout: Cerrar sesión
+  locale:
+    name: Castellano
+    name_with_error: Castellano (¡error!)
   errors:
     messages:
       not_in_district: El código postal no pertenece al distrito