From f5117882f8d35b31911dd49090b6c429f3f0d7eb Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Mon, 27 Mar 2023 23:47:40 +0200
Subject: [PATCH] refactor: change LocaleSwitcher to use radio buttons instead
 of select

---
 src/components/LocaleSwitcher.vue | 68 +++++++++++++++++++++++++------
 1 file changed, 55 insertions(+), 13 deletions(-)

diff --git a/src/components/LocaleSwitcher.vue b/src/components/LocaleSwitcher.vue
index d670f62..a87397d 100644
--- a/src/components/LocaleSwitcher.vue
+++ b/src/components/LocaleSwitcher.vue
@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import CircleCheckIcon from "@/assets/icons/CircleCheckIcon.vue";
+import CircleIcon from "@/assets/icons/CircleIcon.vue";
 
 interface LocaleOption {
   code: string;
   name: string;
+  flag: string;
 }
 
 interface Props {
   modelValue: string;
+  id: string;
   locales: LocaleOption[];
 }
 
@@ -25,24 +29,62 @@ const selectModel = computed({
 </script>
 
 <template>
-  <div class="localeswitch">
-    <select v-model="selectModel">
-      <option
-        v-for="locale in locales"
-        :key="`locale-${locale.code}`"
+  <div class="localeselect">
+    <div v-for="locale in locales" class="localeselect__locale">
+      <input
+        type="radio"
+        name="lang"
+        class="localeselect__input"
+        :id="`lang-${locale.code}`"
         :value="locale.code"
-      >
-        {{ locale.name }}
-      </option>
-    </select>
+        :key="`locale-${locale.code}`"
+        v-model="selectModel"
+      />
+      <label class="localeselect__label" :for="`lang-${locale.code}`">
+        <CircleCheckIcon v-if="$i18n.locale === locale.code" />
+        <CircleIcon v-else />
+        <span>{{ locale.name }} {{ locale.flag }}</span>
+      </label>
+    </div>
   </div>
 </template>
 
 <style lang="scss">
-.localeswitch {
-  select {
-    display: block;
-    margin: auto;
+.localeselect {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: stretch;
+
+  margin: var(--paragraph-margin) 0;
+
+  &__locale {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  &__input {
+    display: none;
+  }
+
+  &__label {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: center;
+
+    svg {
+      flex: 1 0 1.25rem;
+      fill: var(--color-text);
+      transition: 0.4s;
+    }
+
+    span {
+      flex: 1 0 auto;
+      margin: 0 0 0 0.5rem;
+    }
   }
 }
 </style>