chore(#427): update language switcher block

components/druxt/block-region/Header.vue

@@ -8,7 +8,9 @@
     <b-collapse id="nav-collapse" class="ml-auto" is-nav>
       <b-navbar-nav class="ml-auto">
         <DruxtBlockLanguageBlock />
-        <b-nav-item v-b-toggle.search>Search</b-nav-item>
+        <b-nav-item>
+          <b-button v-b-toggle.search class="border bg-white text-secondary"><BIconSearch /></b-button>
+        </b-nav-item>
       </b-navbar-nav>
 
       <!-- Main menu -->
@@ -22,3 +24,10 @@
     </b-collapse>
   </b-container>
 </template>
+
+<script>
+import { BIconSearch } from 'bootstrap-vue'
+export default {
+  components: { BIconSearch },
+}
+</script>

components/druxt/block/LanguageBlock.vue

@@ -1,13 +1,20 @@
 <template>
-  <b-nav-item-dropdown
-    v-if="!$fetchState.pending"
-    :text="selected"
-  >
+  <b-nav-item-dropdown v-if="!$fetchState.pending">
+    <template #button-content>
+      <CountryFlag
+        :country="country(selected.attributes.drupal_internal__id)"
+      />
+    </template>
     <b-dropdown-item
       v-for="language of languages.filter((o) => o.attributes.drupal_internal__id !== 'und')"
       :key="language.attributes.drupal_internal__id"
       :to="`/${language.attributes.drupal_internal__id}`"
     >
+      <CountryFlag
+        class="align-bottom"
+        :country="country(language.attributes.drupal_internal__id)"
+      />
+
       {{ language.attributes.label }}
     </b-dropdown-item>
   </b-nav-item-dropdown>
@@ -19,7 +26,11 @@
 import { DrupalJsonApiParams } from 'drupal-jsonapi-params'
 import { DruxtBlocksBlockMixin } from 'druxt-blocks'
 
+import CountryFlag from 'vue-country-flag'
+
 export default {
+  components: { CountryFlag },
+
   mixins: [DruxtBlocksBlockMixin],
 
   data: () => ({
@@ -39,8 +50,14 @@ export default {
 
   computed: {
     selected: ({ $route, languages }) => ($route.meta || {}).langcode
-      ? (languages.find((o) => o.attributes.drupal_internal__id === $route.meta.langcode).attributes || {}).label || ''
-      : ((languages.find((o) => o.attributes.drupal_internal__id === ((languages.find((o) => o.attributes.drupal_internal__id === 'und') || {}).attributes || {}).langcode) || {}).attributes || {}).label || '',
+      ? languages.find((o) => o.attributes.drupal_internal__id === $route.meta.langcode)
+      : (languages.find((o) => o.attributes.drupal_internal__id === ((languages.find((o) => o.attributes.drupal_internal__id === 'und') || {}).attributes || {}).langcode) || {}),
+  },
+
+  methods: {
+    country: (iso) => (Object.entries({
+      en: 'gb'
+    }).filter(([k, v]) => k === iso)).map(([k, v]) => v).pop() || iso
   }
 }
 </script>

package.json

@@ -45,6 +45,7 @@
     "druxt-site": "^0.12.0",
     "jsonapi-serializer": "3.6.7",
     "nuxt": "2.15.8",
+    "vue-country-flag": "^2.3.2",
     "vue-json-pretty": "1.8.3",
     "vue-live": "1.17.2",
     "vuex": "3.6.2",