Use app nav children for categories

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

src/components/DeckAppNav.vue

@@ -26,40 +26,47 @@
 
 <script>
 
-import { AppNavigation } from 'nextcloud-vue'
+import AppNavigation from 'nextcloud-vue/src/components/AppNavigation/AppNavigation'
 import { translate as t } from 'nextcloud-server/dist/l10n'
 import { boardToMenuItem } from './../helpers/boardToMenuItem'
+import { mapGetters } from 'vuex'
 import store from './../store/main'
 
-const defaultCategories = [
-	{
-		id: 'deck-boards',
-		classes: [],
-		icon: 'icon-deck',
-		text: t('deck', 'All boards'),
-		router: {
-			name: 'boards'
-		}
+const categoryAll = {
+	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'
-		}
+	collapsible: false,
+	children: []
+}
+
+const categoryArchived = {
+	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'
-		}
-	}
-]
+	collapsible: false,
+	children: []
+}
+
+const categoryShared = 	{
+	id: 'deck-boards-shared',
+	classes: [],
+	icon: 'icon-shared',
+	text: t('deck', 'Shared boards'),
+	router: {
+		name: 'boards.shared'
+	},
+	collapsible: false,
+	children: []
+}
 
 const addButton = {
 	icon: 'icon-add',
@@ -96,11 +103,54 @@ export default {
 		}
 	},
 	computed: {
+		...mapGetters([
+			'noneArchivedBoards',
+			'archivedBoards',
+			'sharedBoards'
+		]),
+		allBoardsNavItem: function() {
+			return {
+				id: 'deck-boards',
+				classes: [],
+				icon: 'icon-deck',
+				text: t('deck', 'All boards'),
+				router: {
+					name: 'boards'
+				},
+				collapsible: true,
+				children: this.noneArchivedBoards.map(boardToMenuItem)
+			}
+		},
+		archivedBoardsNavItem: function() {
+			return {
+				id: 'deck-boards-archived',
+				classes: [],
+				icon: 'icon-archive',
+				text: t('deck', 'Archived boards'),
+				router: {
+					name: 'boards.archived'
+				},
+				collapsible: true,
+				children: this.archivedBoards.map(boardToMenuItem)
+			}
+		},
+		sharedBoardsNavItem: function() {
+			return {
+				id: 'deck-boards-shared',
+				classes: [],
+				icon: 'icon-shared',
+				text: t('deck', 'Shared boards'),
+				router: {
+					name: 'boards.shared'
+				},
+				collapsible: false,
+				children: this.sharedBoards.map(boardToMenuItem)
+			}
+		},
 		menu: function() {
 			return {
 				loading: this.loading,
-				items: defaultCategories
-					.concat(this.$store.getters.noneArchivedBoards.map(boardToMenuItem))
+				items: [this.allBoardsNavItem, this.archivedBoardsNavItem, this.sharedBoardsNavItem]
 					.concat([this.addButton])
 			}
 		}

src/main.js

@@ -34,6 +34,7 @@ import VTooltip from 'v-tooltip'
  * @typedef {Object} Board
  * @property {String} title
  * @property {boolean} archived
+ * @property {number} shared 1 (shared) or 0 (not shared)
  */
 
 // eslint-disable-next-line

src/store/main.js

@@ -55,6 +55,16 @@ export default new Vuex.Store({
 				return board.archived === false
 			})
 		},
+		archivedBoards: state => {
+			return state.boards.filter(board => {
+				return board.archived === true
+			})
+		},
+		sharedBoards: state => {
+			return state.boards.filter(board => {
+				return board.shared
+			})
+		},
 		filteredBoards: state => {
 			// filters the boards depending on the active filter
 			const boards = state.boards.filter(board => {