64 lines
1.2 KiB
Vue
64 lines
1.2 KiB
Vue
<template>
|
|
<aside class="book-sidebar">
|
|
<h2 class="book-sidebar__title">Themen</h2>
|
|
<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>
|
|
<h2 class="book-sidebar__title">Basiswissen</h2>
|
|
<h2 class="book-sidebar__title">ABU News</h2>
|
|
</aside>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: () => {
|
|
return {
|
|
topics: [
|
|
{id: 2, title: 'Geld und Kauf', active: true},
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_functions.scss";
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.book-sidebar {
|
|
display: none;
|
|
|
|
@include desktop {
|
|
display: block;
|
|
}
|
|
|
|
&__title {
|
|
font-size: toRem(17px);
|
|
font-weight: $font-weight-regular;
|
|
color: $color-grey;
|
|
}
|
|
}
|
|
|
|
.book-topics {
|
|
padding-left: 24px;
|
|
margin-bottom: 25px;
|
|
|
|
&__topic {
|
|
font-family: $sans-serif-font-family;
|
|
font-size: toRem(14px);
|
|
margin-bottom: 20px;
|
|
color: $color-grey;
|
|
|
|
&--active {
|
|
color: $color-brand;
|
|
}
|
|
}
|
|
}
|
|
</style>
|