feat: create language picker

src/App.vue

@@ -52,13 +52,6 @@ export default class App extends Vue {
 			return;
 		}
 		picker.select(tID.Vue, false);
-
-		// change app language
-		if( navigator.language.indexOf('fr') > -1 ){
-			this.$i18n.locale = Locales.FR;
-		} else {
-			this.$i18n.locale = Locales.EN;
-		}
 	}
 
 }

src/assets/lang/fr-FR.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="4.2333mm" height="2.8687mm" version="1.1" viewBox="0 0 4.2333 2.8687" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-129.22 -199.04)"><g transform="matrix(.22857 0 0 .22857 99.684 154.49)" stroke-linejoin="round"><path d="m130.59 194.88c-0.75842 0-1.3689 0.61052-1.3689 1.3689v9.8128c0 0.75839 0.61048 1.3689 1.3689 1.3689h4.8044v-12.551z" fill="#4758a9" stroke-width=".8" style="paint-order:fill markers stroke"/><path d="m141.57 194.88v12.551h4.8044c0.75843 0 1.3694-0.61048 1.3694-1.3689v-9.8128c0-0.75843-0.611-1.3689-1.3694-1.3689z" fill="#ed5565" stroke-width=".8" style="paint-order:fill markers stroke"/><rect x="135.39" y="194.88" width="6.1737" height="12.551" fill="#fff" stroke-width=".81063" style="paint-order:fill markers stroke"/></g></g></svg>

src/components/Footer.vue

@@ -13,9 +13,10 @@
 			<img class='logo' src='../assets/home/logo.svg'/>
 
 			<div class='contact'>
-				<span class='tel'>(+33) 06 69 05 19 10</span>
+				<span>xdrm.io</span>
-				<span class='mail'>xdrm.dev@gmail.com</span>
+				<span>(+33) 06 69 05 19 10</span>
-				<span class='addr'>Montauban, 82000</span>
+				<span>xdrm.dev@gmail.com</span>
+				<span>Montauban, 82000</span>
 			</div>
 		</footer>
 

src/components/Home.vue

@@ -7,6 +7,7 @@
 			<span class='addr'>Montauban, 82000</span>
 		</div>
 
+		<LangPicker />
 
 		<img class='logo' src='../assets/home/logo.svg'/>
 
@@ -40,9 +41,11 @@
 import { Component, Vue } from 'vue-property-decorator';
 import { go } from '@/service/scroller';
 import { TypeWriter } from '@/service/typewriter';
+import LangPicker from './LangPicker.vue';
+LangPicker
 
 @Component({
-	components: {},
+	components: { LangPicker },
 })
 export default class Home extends Vue {
 	protected scrollNext() {
@@ -147,8 +150,20 @@ export default class Home extends Vue {
 		color: #9ea6b3;
 		font-size: 1.2em;
 		font-weight: 400;
+
 	}
 
+	.lang-picker {
+		display: block;
+		position: absolute;
+			top: 0;
+			right: 0;
+
+		margin-top: 1em;
+		margin-right: 1em;
+
+		font-size: 1.2em;
+	}
 
 	.logo {
 		grid-column: 2;

src/components/LangPicker.vue

@@ -0,0 +1,90 @@
+<template>
+	<div class='lang-picker'>
+		<div @click='current = locales[0]'>
+			<img src='../assets/lang/en-US.svg' :data-active='current == locales[0]'/>
+		</div>
+		<div @click='current = locales[1]'>
+			<img src='../assets/lang/fr-FR.svg' :data-active='current == locales[1]'/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import { Locales } from '@/locales';
+
+// Define the props by using Vue's canonical way.
+const LangPickerProps = Vue.extend({
+  props: {
+    name: String
+  }
+})
+
+@Component({})
+export default class LangPicker extends LangPickerProps {
+	private locales: Locales[] = [Locales.EN, Locales.FR];
+
+	get current(): string {
+		return this.$i18n.locale;
+	}
+	set current(l: string) {
+		localStorage.setItem("lang", l);
+		this.$i18n.locale = l;
+	}
+
+	private mounted() {
+		const ls = localStorage.getItem("lang") as Locales|null;
+
+		// already selected a language, stay with it
+		if( ls != null && this.locales.indexOf(ls) >= 0 ){
+			this.current = ls;
+			return;
+		}
+
+		// otherwise, go with the navigator's default
+		if( navigator.language.indexOf('fr') > -1 ){
+			this.current = Locales.FR;
+		} else {
+			this.current = Locales.EN;
+		}
+	}
+
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+	.lang-picker {
+		display: flex;
+		position: relative;
+
+		flex: row nowrap;
+
+		img {
+			display: inline-block;
+			width: 2em;
+			margin-right: .5em;
+
+			cursor: pointer;
+
+			transform-style: preserve-3d;
+			transition: filter .1s ease-in-out;
+
+			filter: grayscale(70%);
+
+			&[data-active=true]{
+				filter: grayscale(0);
+			}
+
+			&:not([data-active=true]):hover {
+			filter: grayscale(40%);
+			}
+		}
+
+		& div:last-child > img {
+			margin: 0;
+		}
+	}
+
+</style>