diff options
Diffstat (limited to 'components/Navbar.vue')
| -rw-r--r-- | components/Navbar.vue | 61 |
1 files changed, 45 insertions, 16 deletions
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> |