moved language picker to language module and applyed some styling. ExportTool now has some i18 text for translation

src/App.vue

@@ -58,7 +58,7 @@ export default {
 
 <style>
 #content.collapsed {
-  padding-left: 62px;
+  padding-left: 50px;
 }
 #content {
   padding-left: 250px;

src/components/Export.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="section">
-    <h1 class="title is-2">Welcome to Export</h1>
-    <h2 class="subtitle">Export can export stuff</h2>
+    <h1 class="title is-2">{{ $t("ET.Name") }}</h1>    
+    <h2 class="subtitle">{{ $t("ET.Description") }}</h2>
     <br>
   </section>
 </template>

src/components/Home.vue

@@ -6,11 +6,6 @@
     <h1 class="title">{{ $t("Home.Modules") }}</h1>
     <h3 class="title is-4">{{ $t("ET.Name") }}</h3>
     <h4 class="subtitle is-5">{{ $t("ET.Description") }}</h4>
-    <div class="locale-changer">
-      <select v-model="$i18n.locale">
-        <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">{{ lang }}</option>
-      </select>
-    </div>
   </section>
 </template>
 

src/components/Language.vue

@@ -0,0 +1,31 @@
+<template>
+  <section class="section">
+    <h1 class="title is-2">{{ $t("Language.Name") }}</h1>    
+    <h2 class="subtitle">{{ $t("Language.Description") }}</h2>
+    <br>
+    <div class="control has-icons-left">
+    <div class="locale-changer select is-dark is-medium" >
+      <select v-model="$i18n.locale">
+        <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">{{ lang }}</option>
+      </select>
+    </div>
+        <span class="icon is-medium is-left">
+            <i class="fas fa-globe"></i>
+        </span>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'locale-changer',
+  data () {
+    return { langs: ['en', 'da'] }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

src/components/layout/Menu.vue

@@ -36,7 +36,7 @@ import '@fortawesome/fontawesome-free/css/all.css'
                         hiddenOnCollapse: true
                     },
                     {
-                        href: { path: '/' },
+                        href: { path: '/language' },
                         title: 'Language',
                         icon: 'fas fa-language'
                     },

src/locales/da.json

@@ -2,13 +2,17 @@
   "Common": {
     "AppName": "WebTools-NG"
   },
-  "Home": {
-    "Title": "Velkommen til @:Common.AppName",
-    "About": "@:Common.AppName er et værktøj, som kan hjælpe med at administrere en Plex Media Server.",
-    "Modules": "Tool Moduler som er tilgængelige er:"
-  },
   "ET": {
-    "Name": "ExportTool",
-    "Description": "@:ET.Name gør det muligt at eksportere information vedr. de medias du har i dine biblioteker"
-  }  
+    "Description": "@:ET.Name gør det muligt at eksportere information vedr. de medias du har i dine biblioteker",
+    "Name": "ExportTool"
+  },
+  "Home": {
+    "About": "@:Common.AppName er et værktøj, som kan hjælpe med at administrere en Plex Media Server.",
+    "Modules": "Tool Moduler som er tilgængelige er:",
+    "Title": "Velkommen til @:Common.AppName"
+  },
+  "Language": {
+    "Description": "@:Language.Name module gør det muligt at skifte sprog",
+    "Name": "Sprog"
+  }
 }

src/locales/en.json

@@ -2,14 +2,18 @@
   "Common": {
     "AppName": "WebTools-NG"
   },
-  "Home": {
-    "Name": "Home",
-    "Title": "Welcome to @:Common.AppName",
-    "About": "@:Common.AppName is a tool that enables the use of tool modules to help with Plex Server management.",
-    "Modules": "Tool Modules currently available are:"
-  },
   "ET": {
-    "Name": "ExportTool",
-    "Description": "@:ET.Name allows you to export some information about the medias in your libraries"
-  }  
+    "Description": "@:ET.Name allows you to export some information about the medias in your libraries",
+    "Name": "ExportTool"
+  },
+  "Home": {
+    "About": "@:Common.AppName is a tool that enables the use of tool modules to help with Plex Server management.",
+    "Modules": "Tool Modules currently available are:",
+    "Name": "Home",
+    "Title": "Welcome to @:Common.AppName"
+  },
+  "Language": {
+    "Description": "@:Language.Name allows you to change language of the app",
+    "Name": "Language"
+  }
 }

src/router/index.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 import Login from '../components/Login.vue'
 import Home from '../components/Home.vue'
 import Export from '../components/Export.vue'
+import Language from '../components/Language.vue'
 import Store from '../store/index.js'
 Vue.use(VueRouter)
 
@@ -33,6 +34,12 @@ Vue.use(VueRouter)
     name: "export",
     component: Export,
     meta: {requiresAuth: true}
+  },
+  {
+    path: '/language',
+    name: "language",
+    component: Language,
+    meta: {requiresAuth: true}
   }
 ]});