ADD: Install vue-i18n & implement in navbar

src/App.vue

@@ -60,19 +60,20 @@ const state = reactive({ count: 12 });
   <div class="flex">
   <Menubar class="w-full rounded-none bg-zinc-950">
     <MenubarMenu>
-      <MenubarTrigger>Device</MenubarTrigger>
+      <MenubarTrigger v-t="'navbar.device.title'"></MenubarTrigger>
       <MenubarContent>
+        <!-- TODO: Switch keyboard shortcut icons based on platform -->
         <MenubarItem>
-          Disconnect <MenubarShortcut>⌘D</MenubarShortcut>
+          {{$t('navbar.device.disconnect')}} <MenubarShortcut>⌘D</MenubarShortcut>
         </MenubarItem>
-        <MenubarItem>About Device</MenubarItem>
+        <MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
         <MenubarSeparator />
-        <MenubarItem>Preferences</MenubarItem>
+        <MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
         <MenubarSeparator />
-        <MenubarItem>Export JSON<MenubarShortcut>⌘E</MenubarShortcut></MenubarItem>
-        <MenubarItem>Export JSON<MenubarShortcut>⌘E</MenubarShortcut></MenubarItem>
+        <MenubarItem>{{ $t('navbar.device.export') }}<MenubarShortcut>⌘E</MenubarShortcut></MenubarItem>
+        <MenubarItem>{{ $t('navbar.device.import') }}<MenubarShortcut>⌘I</MenubarShortcut></MenubarItem>
         <MenubarSeparator />
-        <MenubarItem>Quit<MenubarShortcut>⌘Q</MenubarShortcut></MenubarItem>
+        <MenubarItem>{{ $t('navbar.device.quit') }}<MenubarShortcut>⌘Q</MenubarShortcut></MenubarItem>
       </MenubarContent>
     </MenubarMenu>
   </Menubar>

src/lang/en.js

@@ -0,0 +1,15 @@
+// 'en' Locale
+export default {
+    navbar: {
+        device: {
+            title: 'Device',
+            connect: 'Connect',
+            disconnect: 'Disconnect',
+            about: 'About Device',
+            preferences: 'Preferences',
+            export: 'Export JSON',
+            import: 'Import JSON',
+            quit: 'Quit'
+        }
+    },
+}

src/main.js

@@ -1,10 +1,22 @@
 import './assets/main.css'
 
-import { createApp } from 'vue'
+import {createApp} from 'vue'
+import {createI18n} from 'vue-i18n'
+
+import en from './lang/en.js'
+
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const i18n = createI18n({
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: {en}
+})
 
+const app = createApp(App)
+
+app.use(i18n)
+app.mount('#app')
 
 var startPos = 0;
 var totalPos = 360;
@@ -12,25 +24,25 @@ var currentPos = 156;
 var minRange = 0;
 var maxRange = 40;
 
-document.addEventListener("DOMContentLoaded", function(){
+document.addEventListener("DOMContentLoaded", function () {
     //....
 
 // Quick Preview GUI indicator Render
-var scale = document.getElementById("scale");
+    var scale = document.getElementById("scale");
+
+    Number.prototype.map = function (in_min, in_max, out_min, out_max) {
+        return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
+    }
+    var guiCurrentPos = Math.round(currentPos.map(startPos, totalPos, minRange, maxRange));
+
+    for (var i = 0; i < 40; i = i + 1) {
+        scale.innerHTML += "<div class='bg-white'></div>";
+        if (i - 1 < guiCurrentPos) {
+            scale.getElementsByTagName("div")[i].classList.add("active");
+            if (i == guiCurrentPos) {
+                scale.getElementsByTagName("div")[guiCurrentPos].classList.add("current");
+            }
+        }
 
-Number.prototype.map = function (in_min, in_max, out_min, out_max) {
-  return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
-}
-var guiCurrentPos = Math.round(currentPos.map(startPos, totalPos, minRange, maxRange));
-
-for(var i = 0; i < 40; i=i+1){
-	scale.innerHTML += "<div class='bg-white'></div>";
-	if (i - 1 < guiCurrentPos) {
-  scale.getElementsByTagName("div")[i].classList.add("active");
-  	if (i == guiCurrentPos) {
-    scale.getElementsByTagName("div")[guiCurrentPos].classList.add("current");
     }
-  }   
-   	
-}
 });