76 lines
1.6 KiB
Vue
76 lines
1.6 KiB
Vue
<template>
|
|
<router-link
|
|
:to="to"
|
|
class="sub-navigation-item back-link"
|
|
>
|
|
<chevron-left class="back-link__icon sub-navigation-item__icon" />
|
|
{{ fullTitle }}
|
|
</router-link>
|
|
</template>
|
|
|
|
<script>
|
|
import { MODULE_PAGE } from '@/router/module.names';
|
|
import { ROOMS_PAGE } from '@/router/room.names';
|
|
import { PROJECTS_PAGE } from '@/router/portfolio.names';
|
|
|
|
const ChevronLeft = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft');
|
|
|
|
export default {
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'topic',
|
|
},
|
|
slug: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
|
|
components: {
|
|
ChevronLeft,
|
|
},
|
|
|
|
computed: {
|
|
to() {
|
|
switch (this.type) {
|
|
case 'topic':
|
|
if (this.slug) {
|
|
return {name: 'topic', params: {topicSlug: this.slug}};
|
|
} else {
|
|
return {};
|
|
}
|
|
case 'module':
|
|
return {name: MODULE_PAGE};
|
|
case 'portfolio':
|
|
return {name: PROJECTS_PAGE};
|
|
default:
|
|
return {name: ROOMS_PAGE};
|
|
}
|
|
},
|
|
fullTitle() {
|
|
switch (this.type) {
|
|
case 'topic':
|
|
return `${this.$flavor.textTopic}: ${this.title}`;
|
|
case 'module':
|
|
return `${this.$flavor.textModule}: ${this.title}`;
|
|
default:
|
|
return this.title;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '~styles/helpers';
|
|
|
|
.back-link {
|
|
@include regular-text;
|
|
}
|
|
</style>
|