From 9113a265ba23892b87815f0dcacf31cef2694c4d Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Sun, 6 Sep 2020 13:32:32 -0400
Subject: i18n Support; French support

---
 components/Navbar.vue | 61 +++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 45 insertions(+), 16 deletions(-)

(limited to 'components/Navbar.vue')

diff --git a/components/Navbar.vue b/components/Navbar.vue
index f52e902..a066aaf 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -10,9 +10,18 @@
           </span>
           <!-- Desktop + Tablets Only -->
           <v-toolbar-items class="hidden-xs-only">
-          <v-btn v-for="item in items" :key="item.title" :to="item.link" text>{{ item.title }}</v-btn>
+            <v-btn :to="localePath('/')" text>{{ $t('HomeText') }}</v-btn>
+            <v-btn :to="localePath('/blog')" text>{{ $t('BlogText') }}</v-btn>
+            <v-btn :to="localePath('/projects')" text>{{ $t('ProjectsText') }}</v-btn>
+            <v-btn :to="localePath('/videos')" text>{{ $t('VideosText') }}</v-btn>
+            <!--<v-btn :to="localePath('#')" text>Alee Logo</v-btn>-->
+            <v-divider class="mx-4" vertical></v-divider>
+            <v-btn v-for="locale in availableLocales" :key="locale.code" :to="switchLocalePath(locale.code)" text>{{ locale.name }}</v-btn>
           </v-toolbar-items>
         </v-app-bar>
+      <v-alert type="info" dismissible>
+        Hey there! This is just a temporary message saying that the french option is in beta! If you see some problems with my french, be sure to make a <a href="https://github.com/Alee14/personal-website" target="_blank">pull request or point it out on my issues page</a>!
+      </v-alert>
 
         <!-- Mobile Only -->
         <v-navigation-drawer v-model="drawer" absolute temporary left>
@@ -23,14 +32,32 @@
           </v-list-item>
           <v-divider></v-divider>
           <v-list dense>
-          <v-list-item v-for="item in items" :key="item.title" :to="item.link" link>
-          <v-list-item-icon>
-            <v-icon>mdi-{{ item.icon }}</v-icon>
-          </v-list-item-icon>
-          <v-list-item-content>
-              <v-list-item-title>{{ item.title }}</v-list-item-title>
-          </v-list-item-content>
-          </v-list-item>
+            <v-list-item :to="localePath('/')">
+              <v-list-item-content>
+                <v-list-item-title>{{ $t('HomeText') }}</v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-item :to="localePath('/blog')">
+              <v-list-item-content>
+                <v-list-item-title>{{ $t('BlogText') }}</v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-item :to="localePath('/projects')">
+              <v-list-item-content>
+                <v-list-item-title>{{ $t('ProjectsText') }}</v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-item :to="localePath('/videos')">
+              <v-list-item-content>
+                <v-list-item-title>{{ $t('VideosText') }}</v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+            <v-divider class="mx-4"></v-divider>
+            <v-list-item v-for="locale in availableLocales" :key="locale.code" :to="switchLocalePath(locale.code)">
+              <v-list-item-content>
+                <v-list-item-title>{{ locale.name }}</v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
           </v-list>
         </v-navigation-drawer>
     </div>
@@ -41,17 +68,19 @@ export default {
   name: 'Navbar',
   data () {
     return {
-      drawer: false,
-      items: [
-        { title: 'Home', link: '/', icon: 'home' },
-        { title: 'Blog', link: '/blog', icon: 'blog' },
-        { title: 'Projects', link: '/projects', icon: 'projects' },
-        { title: 'Videos', link: '/videos', icon: 'videos' }
-      ]
+      drawer: false
+    }
+  },
+  computed: {
+    availableLocales () {
+      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale)
     }
   }
 }
 </script>
 
 <style scoped>
+a {
+  color: white;
+}
 </style>
-- 
cgit v1.2.3