Generalize the CSS style of the locale selection

Make it reusable and move the icon from the CSS to the HTML.

Use label to make the icon clickable.

Add a title to the icon for improved usability.

backend/app/assets/stylesheets/spree/backend/components/_navigation.scss

@@ -14,6 +14,7 @@ $padding-y-navbar-submenu: 9px;
  display: block;
  height: 39px;
  z-index: 1;
+ margin-bottom: 1em;
 
  span {
  font-size: $font-size-sm;
@@ -288,22 +289,37 @@ nav.menu {
  }
 }
 
-.admin-locale-selection {
- margin: 1em;
+.admin-navbar-selection {
+ margin: 0 1em;
  position: relative;
+ overflow: hidden;
+
+ i {
+ cursor: pointer;
+ }
 
  &::after {
- content: "\f0ac";
  font-family: "FontAwesome";
  position: absolute;
  top: 0;
  left: 0;
  padding: .5rem 0 .5rem .25rem;
- z-index: -1;
+ }
+
+ select.custom-select.fullwidth {
+ width: calc(100% - 2.5em);
+ display: inline-block;
  }
 
  .admin-nav-hidden & {
- .js-locale-selection.custom-select {
+ position: relative;
+
+ i {
+ position: absolute;
+ }
+
+ select {
+ background-image: none;
  background-color: transparent;
  background-position: 1.5rem center;
  background-size: 8px 9px;
@@ -313,6 +329,7 @@ nav.menu {
  overflow: hidden;
  text-indent: 1rem;
  z-index: 1;
+ cursor: pointer;
 
  &:focus {
  box-shadow: none;
@@ -326,6 +343,12 @@ nav.menu {
  bottom: 0;
 }
 
+body.admin-nav-hidden .admin-nav:not(.fits) {
+ .admin-navbar-selection::after {
+ z-index: 0;
+ }
+}
+
 .admin-login-nav {
  list-style: none;
  padding: 0;

backend/app/views/spree/admin/shared/_locale_selection.html.erb

@@ -1,6 +1,7 @@
 <% available_locales = Spree.i18n_available_locales %>
 <% if available_locales.size > 1 %>
- <div class="admin-locale-selection">
+ <label class="admin-navbar-selection">
+ <i class="fa fa-globe fa-fw" title="<%= I18n.t('spree.choose_dashboard_locale') %>"></i>
  <select class="js-locale-selection custom-select fullwidth">
  <%=
  options_for_select(
@@ -11,5 +12,5 @@
  )
  %>
  </select>
- </div>
+ </label>
 <% end %>