Refactor app navigation to use @nextcloud/vue components

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

src/components/navigation/AppNavigationBoardCategory.vue

@@ -20,33 +20,31 @@
   -
   -->
 <template>
-	<li v-if="boards.length > 0"
-		:id="id"
+	<AppNavigationItem v-if="boards.length > 0"
 		:title="text"
-		:class="{'open': opened, 'collapsible': collapsible }">
-		<button v-if="collapsible" class="collapse" @click.prevent.stop="toggleCollapse" />
-		<a :class="icon" href="#">
-			{{ text }}
-		</a>
-		<ul v-if="boards.length > 0">
-			<AppNavigationBoard v-for="board in boardsSorted" :key="board.id" :board="board" />
-		</ul>
-	</li>
+		:icon="icon"
+		:to="to"
+		:allow-collapse="collapsible"
+		:open="opened">
+		<AppNavigationBoard v-for="board in boardsSorted" :key="board.id" :board="board" />
+	</AppNavigationItem>
 </template>
 
 <script>
-import ClickOutside from 'vue-click-outside'
 import AppNavigationBoard from './AppNavigationBoard'
+import { AppNavigationItem } from '@nextcloud/vue'
 
 export default {
 	name: 'AppNavigationBoardCategory',
 	components: {
+		AppNavigationItem,
 		AppNavigationBoard,
 	},
-	directives: {
-		ClickOutside,
-	},
 	props: {
+		to: {
+			type: String,
+			default: '',
+		},
 		id: {
 			type: String,
 			required: true,
@@ -92,11 +90,5 @@ export default {
 			}
 		},
 	},
-	mounted() {},
-	methods: {
-		toggleCollapse() {
-			this.opened = !this.opened
-		},
-	},
 }
 </script>