Refactor app navigation to use @nextcloud/vue components

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/navigation/AppNavigation.vue

@@ -22,23 +22,47 @@
 
 <template>
 	<div id="app-navigation" :class="{'icon-loading': loading}">
+		<AppNavigationVue>
+			<ul>
+				<AppNavigationBoardCategory
+					id="deck-navigation-all"
+					to="/board"
+					:text="t('deck', 'All boards')"
+					:boards="noneArchivedBoards"
+					:open-on-add-boards="true"
+					icon="icon-deck" />
+				<AppNavigationBoardCategory
+					id="deck-navigation-archived"
+					to="/board/archived"
+					:text="t('deck', 'Archived boards')"
+					:boards="archivedBoards"
+					icon="icon-archive" />
+				<AppNavigationBoardCategory
+					id="deck-navigation-shared"
+					to="/board/shared"
+					:text="t('deck', 'Shared with you')"
+					:boards="sharedBoards"
+					icon="icon-shared" />
+				<AppNavigationAddBoard v-if="canCreate" />
+			</ul>
+			<AppNavigationSettings>
+				<div>
+					<Multiselect v-model="groupLimit"
+						:class="{'icon-loading-small': groupLimitDisabled}"
+						open-direction="bottom"
+						:options="groups"
+						:multiple="true"
+						:disabled="groupLimitDisabled"
+						:placeholder="t('deck', 'Limit deck usage of groups')"
+						label="displayname"
+						track-by="id"
+						@input="updateConfig" />
+					<p>{{ t('deck', 'Limiting Deck will block users not part of those groups from creating their own boards. Users will still be able to work on boards that have been shared with them.') }}</p>
+				</div>
+			</AppNavigationSettings>
+		</AppNavigationVue>
+
 		<ul id="deck-navigation">
-			<AppNavigationBoardCategory
-				id="deck-navigation-all"
-				:text="t('deck', 'All boards')"
-				:boards="noneArchivedBoards"
-				:open-on-add-boards="true"
-				icon="icon-deck" />
-			<AppNavigationBoardCategory
-				id="deck-navigation-archived"
-				:text="t('deck', 'Archived boards')"
-				:boards="archivedBoards"
-				icon="icon-archive" />
-			<AppNavigationBoardCategory
-				id="deck-navigation-shared"
-				:text="t('deck', 'Shared boards')"
-				:boards="sharedBoards"
-				icon="icon-shared" />
 			<AppNavigationAddBoard v-if="canCreate" />
 		</ul>
 		<div v-if="isAdmin"
@@ -50,19 +74,6 @@
 					{{ t('deck', 'Settings') }}
 				</button>
 			</div>
-			<div id="app-settings-content">
-				<Multiselect v-model="groupLimit"
-					:class="{'icon-loading-small': groupLimitDisabled}"
-					open-direction="bottom"
-					:options="groups"
-					:multiple="true"
-					:disabled="groupLimitDisabled"
-					:placeholder="t('deck', 'Limit deck usage of groups')"
-					label="displayname"
-					track-by="id"
-					@input="updateConfig" />
-				<p>{{ t('deck', 'Limiting Deck will block users not part of those groups from creating their own boards. Users will still be able to work on boards that have been shared with them.') }}</p>
-			</div>
 		</div>
 	</div>
 </template>
@@ -71,8 +82,7 @@
 import axios from '@nextcloud/axios'
 import { mapGetters } from 'vuex'
 import ClickOutside from 'vue-click-outside'
-import { Multiselect } from '@nextcloud/vue'
-
+import { AppNavigation as AppNavigationVue, AppNavigationSettings, Multiselect } from '@nextcloud/vue'
 import AppNavigationAddBoard from './AppNavigationAddBoard'
 import AppNavigationBoardCategory from './AppNavigationBoardCategory'
 import { loadState } from '@nextcloud/initial-state'
@@ -83,6 +93,8 @@ const canCreateState = loadState('deck', 'canCreate')
 export default {
 	name: 'AppNavigation',
 	components: {
+		AppNavigationVue,
+		AppNavigationSettings,
 		AppNavigationAddBoard,
 		AppNavigationBoardCategory,
 		Multiselect,