diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/Footer.vue | 2 | ||||
| -rw-r--r-- | components/Navbar.vue | 61 |
2 files changed, 46 insertions, 17 deletions
diff --git a/components/Footer.vue b/components/Footer.vue index 8c6d144..762158f 100644 --- a/components/Footer.vue +++ b/components/Footer.vue @@ -2,7 +2,7 @@ <div> <v-footer class="font-weight-medium" color="gray darken-3" dark> <v-col cols="12"> - <p class="text-center">© Copyright 2018-{{ new Date().getFullYear() }} Andrew Lee. All rights reserved.</p> + <p class="text-center">{{ $t('FooterCopyright') }}</p> </v-col> </v-footer> </div> 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> |