123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- <template>
- <div id="app">
- <header>
- <b-navbar>
- <b-dropdown variant="link" no-caret>
- <template #button-content>
- <span class="navbar-toggler-icon" />
- <span class="sr-only">Menu</span>
- </template>
- <b-dropdown-item v-for="name in subRoutes" :key="name" :to="{ name }">
- {{ $t('sections.' + name) }}
- </b-dropdown-item>
- </b-dropdown>
- <b-navbar-brand :to="{ name: 'home' }">
- {{ $t('title') }}
- </b-navbar-brand>
- <b-nav class="ml-auto" pills>
- <b-nav-item
- v-for="name in mainRoutes" :key="name"
- :to="{ name }" :active="$route.name === name"
- >
- {{ $t('sections.' + name) }}
- </b-nav-item>
- </b-nav>
- </b-navbar>
- <router-view name="options" />
- </header>
- <main id="main">
- <router-view />
- </main>
- </div>
- </template>
- <script>
- export default {
- name: 'App',
- metaInfo () {
- return {
- // if no subcomponents specify a metaInfo.title, try to get one from the route name.
- title: this.$t('sections.' + this.$route.name, ''),
- // all titles will be injected into this template
- titleTemplate: '%s | ' + this.$t('title')
- }
- },
- data () {
- return {
- mainRoutes: ['library', 'kit', 'gallery'],
- subRoutes: ['home', 'introduction', 'blog', 'contact']
- }
- }
- }
- </script>
- <style lang="scss">
- @import '@/assets/scss/main.scss';
- </style>
|