Update main components

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

2 files changed, 30 insertions, 27 deletions

diff --git a/src/main.js b/src/main.js
index e0264e5f..8b5eed7a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -27,7 +27,7 @@ import { sync } from 'vuex-router-sync'
 import { generateFilePath } from 'nextcloud-server/dist/router'
 
 /** GLOBAL COMPONENTS AND DIRECTIVE */
-import { Action, AppNavigation, DatetimePicker, Multiselect, PopoverMenu } from 'nextcloud-vue'
+import { Action, DatetimePicker, Multiselect, PopoverMenu } from 'nextcloud-vue'
 import ClickOutside from 'vue-click-outside'
 import { VTooltip } from 'v-tooltip'
 import VueClipboard from 'vue-clipboard2'
@@ -44,7 +44,6 @@ __webpack_nonce__ = btoa(OC.requestToken)
 __webpack_public_path__ = generateFilePath('contacts', '', 'js/')
 
 Vue.component('Action', Action)
-Vue.component('AppNavigation', AppNavigation)
 Vue.component('DatetimePicker', DatetimePicker)
 Vue.component('Multiselect', Multiselect)
 Vue.component('PopoverMenu', PopoverMenu)
diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue
index 4e99bb27..887274e7 100644
--- a/src/views/Contacts.vue
+++ b/src/views/Contacts.vue
@@ -22,15 +22,25 @@
   -->
 
 <template>
-	<div id="content" class="app-contacts">
+	<app-content app-name="contacts">
 		<!-- new-contact-button + navigation + settings -->
-		<app-navigation :menu="menu">
+		<template slot="navigation" :class="{'icon-loading': loading}">
+			<!-- new-contact-button -->
+			<app-navigation-new v-if="!loading" button-id="new-contact-button" :text="t('contacts','New contact')"
+				button-class="icon-add" :disabled="!defaultAddressbook" @click="newContact" />
+
+			<!-- groups list -->
+			<ul v-if="!loading" id="groups-list">
+				<app-navigation-item v-for="item in menu" :key="item.key" :item="item" />
+			</ul>
+
 			<!-- settings -->
-			<settings-section v-if="!loading" slot="settings-content" />
-		</app-navigation>
+			<app-navigation-settings v-if="!loading">
+				<settings-section />
+			</app-navigation-settings>
+		</template>
 
-		<!-- main content -->
-		<div id="app-content">
+		<template slot="content">
 			<!-- go back to list when in details mode -->
 			<div v-if="selectedContact && isMobile" id="app-details-toggle" class="icon-confirm"
 				tabindex="0" @click="showList" />
@@ -46,11 +56,17 @@
 					<contact-details :loading="loading" :contact-key="selectedContact" />
 				</template>
 			</div>
-		</div>
-	</div>
+		</template>
+	</app-content>
 </template>
 
 <script>
+import {
+	AppContent,
+	AppNavigationItem,
+	AppNavigationNew,
+	AppNavigationSettings
+} from 'nextcloud-vue'
 import moment from 'moment'
 import download from 'downloadjs'
 
@@ -68,6 +84,10 @@ export default {
 	name: 'Contacts',
 
 	components: {
+		AppContent,
+		AppNavigationItem,
+		AppNavigationNew,
+		AppNavigationSettings,
 		SettingsSection,
 		ContactsList,
 		ContactDetails,
@@ -173,23 +193,7 @@ export default {
 
 		// building the main menu
 		menu() {
-			if (this.loading) {
-				return {
-					id: 'groups-list',
-					loading: true
-				}
-			}
-			return {
-				id: 'groups-list',
-				new: {
-					id: 'new-contact-button',
-					text: t('contacts', 'New contact'),
-					icon: 'icon-add',
-					action: this.newContact,
-					disabled: this.defaultAddressbook === undefined
-				},
-				items: this.allGroup.concat(this.groupsMenu)
-			}
+			return this.allGroup.concat(this.groupsMenu)
 		},
 
 		// default group for every contacts