83 lines
1.8 KiB
Vue
83 lines
1.8 KiB
Vue
<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>
|
|
|
|
<nav class="nav-list ml-auto">
|
|
<ul>
|
|
<li v-for="link in mainRoutes" :key="link.to">
|
|
<b-button :to="link.to" :active="$route.name === link.to" :variant="link.variant">
|
|
{{ $t('sections.' + link.to) }}
|
|
</b-button>
|
|
</li>
|
|
</ul>
|
|
</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: [
|
|
{ to: 'library', variant: 'dark' },
|
|
{ to: 'kit', variant: 'kit' },
|
|
{ to: 'gallery', variant: 'creation' }
|
|
],
|
|
subRoutes: ['home', 'introduction', 'blog', 'contact']
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '@/assets/scss/app.scss';
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.navbar-brand {
|
|
font-size: 1.3125rem;
|
|
font-weight: $font-weight-bold;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-list {
|
|
a:not(.active) {
|
|
opacity: .25;
|
|
}
|
|
}
|
|
</style>
|