State refactoring, adds a sidebar example, extends the breadcrumb navigation, introduces an API class

src/components/Controls.vue

@@ -31,6 +31,10 @@
 				</router-link>
 			</div>
 		</div>
+		<div v-if="board" class="crumb svg">
+			<a href="#todo">{{ board.title }}</a>
+			<span style="display: inline;" class="icon-shared" />
+		</div>
 	</div>
 
 </template>
@@ -38,9 +42,16 @@
 <script>
 export default {
 	name: 'Controls',
+	props: {
+		board: {
+			type: Object,
+			required: false,
+			default: null
+		}
+	},
 	methods: {
 		toggleNav() {
-			this.$store.dispatch('nav/toggle')
+			this.$store.dispatch('toggleNav')
 		}
 	}
 }

src/components/DeckAppNav.vue

@@ -0,0 +1,102 @@
+<!--
+* @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
+*
+* @author Michael Weimann <mail@michael-weimann.eu>
+*
+* @license GNU AGPL version 3 or any later version
+*
+* This program is free software: you can redistribute it and/or modify
+* it under the terms of the GNU Affero General Public License as
+* published by the Free Software Foundation, either version 3 of the
+* License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU Affero General Public License for more details.
+*
+* You should have received a copy of the GNU Affero General Public License
+* along with this program. If not, see <http://www.gnu.org/licenses/>.
+*
+-->
+
+<template>
+	<AppNavigation :menu="menu" />
+</template>
+
+<script>
+
+import { AppNavigation } from 'nextcloud-vue'
+import { translate as t } from 'nextcloud-server/dist/l10n'
+import { boardToMenuItem } from './../helpers/boardToMenuItem'
+
+const defaultCategories = [
+	{
+		id: 'deck-boards',
+		classes: [],
+		icon: 'icon-deck',
+		text: t('deck', 'All boards'),
+		router: {
+			name: 'boards'
+		}
+	},
+	{
+		id: 'deck-boards-archived',
+		classes: [],
+		icon: 'icon-archive',
+		text: t('deck', 'Archived boards'),
+		router: {
+			name: 'boards.archived'
+		}
+	},
+	{
+		id: 'deck-boards-shared',
+		classes: [],
+		icon: 'icon-shared',
+		text: t('deck', 'Shared boards'),
+		router: {
+			name: 'boards.shared'
+		}
+	}
+]
+
+const addButton = {
+	icon: 'icon-add',
+	classes: [],
+	text: t('deck', 'Create new board'),
+	edit: {
+		text: t('deck', 'new board'),
+		action: () => {
+		},
+		reset: () => {
+		}
+	},
+	action: () => {
+		addButton.classes.push('editing')
+	}
+}
+
+export default {
+	name: 'DeckAppNav',
+	components: {
+		AppNavigation
+	},
+	data: function() {
+		return {
+			loading: false,
+			addButton: addButton
+		}
+	},
+	computed: {
+		menu: function() {
+			return {
+				loading: this.loading,
+				items: defaultCategories
+					.concat(this.$store.getters.boards.map(boardToMenuItem))
+					.concat([this.addButton])
+			}
+		}
+	}
+}
+
+</script>

src/components/board/Board.vue

@@ -21,12 +21,56 @@
   -->
 
 <template>
-	<div>sidebar</div>
+	<div>
+		<Controls :board="board" />
+		<div v-if="board">
+			board {{ board.title }}<br>
+			<button @click="toggleSidebar">toggle sidebar</button>
+		</div>
+	</div>
 </template>
 
 <script>
+
+import { mapState } from 'vuex'
+import Controls from '../Controls'
+
 export default {
-	name: 'Sidebar'
+	name: 'Board',
+	components: {
+		Controls
+	},
+	inject: [
+		'boardApi'
+	],
+	props: {
+		id: {
+			type: Number,
+			default: null
+		}
+	},
+	data: function() {
+		return {
+			loading: true
+		}
+	},
+	computed: {
+		...mapState({
+			board: state => state.currentBoard
+		})
+	},
+	created: function() {
+		this.boardApi.loadById(this.id)
+			.then((board) => {
+				this.$store.dispatch('setCurrentBoard', board)
+				this.loading = false
+			})
+	},
+	methods: {
+		toggleSidebar: function() {
+			this.$store.dispatch('toggleSidebar')
+		}
+	}
 }
 </script>
 

src/components/board/BoardSidebar.vue

@@ -21,16 +21,20 @@
   -->
 
 <template>
-	<div>Board goes here, id: {{ id }}</div>
+	<div>
+		Board sidebar {{ board.title }}
+	</div>
 </template>
 
 <script>
 export default {
-	name: 'Board',
+	name: 'BoardSidebar',
 	props: {
-		id: {
-			type: Number,
-			default: null
+		board: {
+			type: Object,
+			default: function() {
+				return {}
+			}
 		}
 	}
 }

src/components/boards/Boards.vue

@@ -21,26 +21,31 @@
   -->
 
 <template>
-	<div class="board-list">
-		<div class="board-list-row board-list-header-row">
-			<div class="board-list-bullet-cell"><div class="board-list-bullet" /></div>
-			<div class="board-list-title-cell">Title</div>
-			<div class="board-list-avatars-cell">Members</div>
-			<div class="board-list-actions-cell" />
+	<div>
+		<Controls />
+		<div class="board-list">
+			<div class="board-list-row board-list-header-row">
+				<div class="board-list-bullet-cell"><div class="board-list-bullet" /></div>
+				<div class="board-list-title-cell">Title</div>
+				<div class="board-list-avatars-cell">Members</div>
+				<div class="board-list-actions-cell" />
+			</div>
+			<BoardItem v-for="board in filteredBoards" :key="board.id" :board="board" />
 		</div>
-		<BoardItem v-for="board in filteredBoards" :key="board.id" :board="board" />
 	</div>
 </template>
 
 <script>
 
-import BoardItem from './boards/BoardItem'
+import BoardItem from './BoardItem'
+import Controls from '../Controls'
 import { mapGetters } from 'vuex'
 
 export default {
 	name: 'Main',
 	components: {
-		BoardItem
+		BoardItem,
+		Controls
 	},
 	props: {
 		navFilter: {
@@ -49,13 +54,13 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters('boards', [
+		...mapGetters([
 			'filteredBoards'
 		])
 	},
 	watch: {
 		navFilter: function(value) {
-			this.$store.commit('boards/setFilter', value)
+			this.$store.commit('setBoardFilter', value)
 		}
 	}
 }