ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add subnavigation to routes

This commit is contained in:
Ramon Wenger 2019-03-04 13:29:59 +01:00
parent 652ccfc332
commit e480f06b57
11 changed files with 217 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
client/src/components/BookSidebar.vue
View File

@ -1,63 +0,0 @@
<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>

42
client/src/components/book-navigation/BookNavigation.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<aside class="book-navigation">
<book-navigation-item title="Themen">
<book-topic-navigation></book-topic-navigation>
</book-navigation-item>
<book-navigation-item title="Basiswissen">
</book-navigation-item>
<book-navigation-item title="News">
<template slot="title">
<h2 class="book-navigation__title" slot="title">ABU News</h2>
</template>
</book-navigation-item>
</aside>
</template>
<script>
import BookNavigationItem from '@/components/book-navigation/BookNavigationItem';
import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
export default {
components: {
BookNavigationItem,
BookTopicNavigation
}
}
</script>
<style scoped lang="scss">
@import "@/styles/_functions.scss";
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.book-navigation {
display: none;
@include desktop {
display: flex;
}
padding: $medium-spacing;
}
</style>

92
client/src/components/book-navigation/BookNavigationItem.vue Normal file
View File

@ -0,0 +1,92 @@
<template>
<div class="book-navigation-item" :class="{ 'book-navigation-item--active': show}">
<div class="book-navigation-item__title" @click="show = !show">
{{title}}
<chevron-down class="book-navigation-item__icon book-navigation-item__chevron-down"></chevron-down>
<chevron-up class="book-navigation-item__icon book-navigation-item__chevron-up"></chevron-up>
</div>
<div class="book-navigation-item__nav-items" v-if="show">
<slot></slot>
</div>
</div>
</template>
<script>
import ChevronDown from '@/components/icons/ChevronDown';
import ChevronUp from '@/components/icons/ChevronUp';
export default {
props: ['title'],
components: {
ChevronDown,
ChevronUp
},
data() {
return {
show: true
}
}
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.book-navigation-item {
z-index: 10;
margin-right: $large-spacing;
&__title {
@include small-text;
display: grid;
grid-template-columns: 1fr auto;
grid-column-gap: $small-spacing;
align-items: center;
cursor: pointer;
}
&__icon {
width: 12px;
height: 12px;
}
&__chevron-up {
display: none;
}
&__nav-items {
box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.12);
position: absolute;
left: 0;
margin-top: $medium-spacing;
background-color: $color-white;
padding: $small-spacing $medium-spacing;
width: 100%;
box-sizing: border-box;
&:empty {
display: none;
}
}
&--active &__title {
color: $color-brand;
}
&--active &__icon {
fill: $color-brand;
}
&--active &__chevron-up {
display: block;
}
&--active &__chevron-down {
display: none;
}
}
</style>

44
client/src/components/book-navigation/BookTopicNavigation.vue Normal file
View File

@ -0,0 +1,44 @@
<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-grey;
&--active {
color: $color-brand;
}
}
}
</style>

5
client/src/components/icons/ChevronDown.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M50,74.07,6.86,30.93A2.93,2.93,0,0,1,11,26.79l39,39,39-39a2.93,2.93,0,1,1,4.15,4.15Z"/>
</svg>
</template>

3
client/src/components/icons/ChevronRight.vue
View File

@ -1,6 +1,5 @@
<template>
<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>
arrow-right</title>
<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M74.07,50,30.93,93.14A2.93,2.93,0,0,1,26.79,89l39-39-39-39a2.93,2.93,0,0,1,4.15-4.15Z"/>
</svg>
</template>

5
client/src/components/icons/ChevronUp.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M50,18.93,93.14,62.07A2.93,2.93,0,1,1,89,66.21l-39-39-39,39a2.93,2.93,0,1,1-4.15-4.15Z"/>
</svg>
</template>

9
client/src/layouts/DefaultLayout.vue
View File

@ -7,6 +7,8 @@
<user-widget v-bind="me"></user-widget>
<logout-widget></logout-widget>
</div>
<book-navigation v-if="showSubnavigation">
</book-navigation>
</header>
<filter-bar v-if="showFilter"></filter-bar>
@ -18,6 +20,7 @@
<script>
import TopNavigation from '@/components/TopNavigation.vue';
import BookNavigation from '@/components/book-navigation/BookNavigation';
import UserWidget from '@/components/UserWidget.vue';
import FilterBar from '@/components/FilterBar.vue';
import LogoutWidget from '@/components/LogoutWidget.vue';
@ -28,13 +31,17 @@
TopNavigation,
UserWidget,
FilterBar,
LogoutWidget
LogoutWidget,
BookNavigation
},
computed: {
showFilter() {
return this.$route.meta.filter;
},
showSubnavigation() {
return this.$route.meta.subnavigation;
},
specialContainerClass() {
let cls = this.$store.state.specialContainerClass;
return [cls ? `skillbox--${cls}` : '', {'skillbox--show-filter': this.showFilter}]

29
client/src/pages/book.vue
View File

@ -1,8 +1,6 @@
<template>
<div class="book">
<book-sidebar>
</book-sidebar>
<main>
<main class="book__content">
<router-view></router-view>
</main>
@ -11,11 +9,11 @@
</template>
<script>
import BookSidebar from '@/components/BookSidebar.vue';
import BookNavigation from '@/components/book-navigation/BookNavigation.vue';
export default {
components: {
BookSidebar
BookNavigation
}
}
</script>
@ -24,19 +22,22 @@
@import "@/styles/_mixins.scss";
.book {
display: -ms-grid;
@supports (display: grid) {
display: grid;
}
&__content {
display: -ms-grid;
@supports (display: grid) {
display: grid;
}
grid-column-gap: 50px;
grid-column-gap: 50px;
justify-items: start;
justify-items: start;
padding: 0 24px;
padding: 0 24px;
@include desktop {
grid-template-columns: 305px 1fr;
@include desktop {
grid-template-columns: 1200px;
justify-content: center;
}
}
}
</style>

2
client/src/pages/module-base.vue
View File

@ -26,7 +26,7 @@
justify-items: center;
@include desktop {
grid-template-columns: 400px minmax(max-content, 1fr) minmax(auto, 400px);
grid-template-columns: 1fr;
}
/*

5
client/src/router/index.js
View File

@ -53,8 +53,11 @@ const routes = [
path: '/book',
name: 'book',
component: book,
meta: {
subnavigation: true
},
children: [
{path: 'topic/:topicSlug', component: topic}
{path: 'topic/:topicSlug', component: topic, meta: {subnavigation: true}}
]
},
{path: '*', component: p404}