add flags to the language selector

components/BadgeSection.vue

@@ -2,45 +2,12 @@
 <template>
   <v-container>
     <v-row>
-      <v-col cols="4">
+      <v-col
+        v-for="col in cols"
+        cols="4"
+      >
         <div
-          v-for="item in col1"
-          :key="item.title"
-          class="badges-section"
-        >
-          <h4>{{ item.title }}</h4>
-
-          <Badge
-            v-for="badge in item.badges"
-            :title="badge.title"
-            :img="badge.logo"
-            :subtitle="badge.subtitle"
-            :details="badge.details"
-          />
-        </div>
-      </v-col>
-
-      <v-col cols="4">
-        <div
-          v-for="item in col2"
-          :key="item.title"
-          class="badges-section"
-        >
-          <h4>{{ item.title }}</h4>
-
-          <Badge
-            v-for="badge in item.badges"
-            :title="badge.title"
-            :img="badge.logo"
-            :subtitle="badge.subtitle"
-            :details="badge.details"
-          />
-        </div>
-      </v-col>
-
-      <v-col cols="4">
-        <div
-          v-for="item in col3"
+          v-for="item in col"
           :key="item.title"
           class="badges-section"
         >
@@ -267,7 +234,7 @@ const col3 = [
         details: ''
       },
       {
-        title: 'Continuous Improvement',
+        title: i18n.t('continuous_improvement'),
         logo: '/images/continuous-improvement.png',
         subtitle: i18n.t('x_years', { years: 9 }),
         details: ''
@@ -287,6 +254,13 @@ const col3 = [
     ]
   }
 ]
+
+const cols = [
+  col1,
+  col2,
+  col3
+]
+
 </script>
 
 <style scoped lang="scss">

components/LanguageSelector.vue

@@ -6,7 +6,20 @@
     density="compact"
     variant="plain"
     :hide-details="true"
-  />
+  >
+    <template v-slot:selection="data">
+      <v-img :src="data.item.raw.logo" left :width="16" class="mr-2"/>
+      <span>{{ data.item.title }}</span>
+    </template>
+
+    <template v-slot:item="{ props, item }">
+      <v-list-item v-bind="props">
+        <template v-slot:prepend>
+          <v-img :src="item.raw.logo" :width="16" class="mr-2"/>
+        </template>
+      </v-list-item>
+    </template>
+  </v-select>
 </template>
 
 <script setup lang="ts">
@@ -45,4 +58,14 @@
 :deep(.v-list-item) {
   padding: 24px;
 }
+
+:deep(.v-list-item__content) {
+  display: flex;
+  flex-direction: row;
+
+  .v-avatar {
+    width: 18px;
+    height: 18px;
+  }
+}
 </style>

lang/en.json

@@ -34,5 +34,6 @@
   "contact_name": "Name or organization (optional)",
   "contact_message": "Message",
   "contact_submit": "Send",
-  "contact_confirmation": "Your message has been sent, I will get back to you as soon as possible"
+  "contact_confirmation": "Your message has been sent, I will get back to you as soon as possible",
+  "continuous_improvement": "Continuous improvement"
 }

lang/fr.json

@@ -34,5 +34,6 @@
   "contact_name": "Nom ou structure (facultatif)",
   "contact_message": "Message",
   "contact_submit": "Envoyer",
-  "contact_confirmation": "Votre message a bien été envoyé, je reviendrais vers vous dès que possible"
+  "contact_confirmation": "Votre message a bien été envoyé, je reviendrais vers vous dès que possible",
+  "continuous_improvement": "Amélioration continue"
 }