87 lines
3.0 KiB
Vue
87 lines
3.0 KiB
Vue
<template>
|
|
<header class="mb-4">
|
|
<h1 class="mb-3">
|
|
<nuxt-link to="/">
|
|
<Icon v="tags"/>
|
|
<T>title</T>
|
|
</nuxt-link>
|
|
</h1>
|
|
<div class="d-block d-md-none">
|
|
<div class="btn-group-vertical btn-block nav-custom mb-2">
|
|
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
|
|
<Icon :v="link.icon"/>
|
|
{{ link.textLong || link.text }}
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
<div class="d-none d-md-block">
|
|
<div class="btn-group btn-block nav-custom mb-2">
|
|
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
|
|
<Icon :v="link.icon" size="1.6"/>
|
|
<br/>
|
|
<span class="text-nowrap">{{ link.text }}</span>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
import t from '../src/translator';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
links: [
|
|
{ link: '/', icon: 'home', text: t('home.header'), textLong: t('home.headerLong'), extra: ['all', 'dowolne'] }, // TODO multilingual "any"
|
|
{ link: '/literatura', icon: 'books', text: t('sources.header'), textLong: t('sources.headerLong') },
|
|
{ link: '/neutratywy', icon: 'atom-alt', text: t('nouns.header'), textLong: t('nouns.headerLong') },
|
|
{ link: '/linki', icon: 'bookmark', text: t('links.header'), textLong: t('links.headerLong') },
|
|
{ link: '/kontakt', icon: 'comment-alt-smile', text: t('contact.header') },
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
isActiveRoute(link) {
|
|
return this.$route.path === link.link || (link.extra || []).includes(this.$route.name);
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "assets/style";
|
|
|
|
@include media-breakpoint-down('sm', $grid-breakpoints) {
|
|
.nav-custom {
|
|
.btn {
|
|
border-left: 1px solid $gray-500;
|
|
border-radius: 0;
|
|
|
|
&:hover, &:focus, &.active {
|
|
border-left: 3px solid $primary;
|
|
padding-left: calc(#{$btn-padding-x-sm} - 2px);
|
|
color: $primary;
|
|
}
|
|
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up('md', $grid-breakpoints) {
|
|
.nav-custom {
|
|
.btn {
|
|
border-bottom: 1px solid $gray-500;
|
|
border-radius: 0;
|
|
|
|
&:hover, &:focus, &.active {
|
|
border-bottom: 3px solid $primary;
|
|
padding-bottom: calc(#{$btn-padding-y-sm} - 2px);
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</style>
|