45 lines
960 B
Vue
45 lines
960 B
Vue
<template>
|
|
<nav class="book-topics">
|
|
<div class="book-topics__topic"
|
|
:class="{'book-topics__topic--active': topic.active}"
|
|
v-for="topic in topics"
|
|
:key="topic.id">{{topic.id}}. {{topic.title}}
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
topics: [
|
|
{id: 2, title: 'Geld und Kauf', active: true},
|
|
{id: 3, title: 'Geld und Kauf', active: false},
|
|
{id: 4, title: 'Geld und Kauf', active: false},
|
|
{id: 5, title: 'Geld und Kauf', active: false},
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
|
|
.book-topics {
|
|
padding-left: 24px;
|
|
margin-bottom: 25px;
|
|
|
|
&__topic {
|
|
font-family: $sans-serif-font-family;
|
|
font-size: toRem(14px);
|
|
margin-bottom: 20px;
|
|
color: $color-silver-dark;
|
|
|
|
&--active {
|
|
color: $color-brand;
|
|
}
|
|
}
|
|
}
|
|
</style>
|