Migrate action menu of left sidebar

Signed-off-by: greta <gretadoci@gmail.com>

3 files changed, 30 insertions, 6 deletions

diff --git a/src/components/AppNavigation/CircleNavigationItem.vue b/src/components/AppNavigation/CircleNavigationItem.vue
index 7f35a65d..5ca67554 100644
--- a/src/components/AppNavigation/CircleNavigationItem.vue
+++ b/src/components/AppNavigation/CircleNavigationItem.vue
@@ -38,8 +38,11 @@
 			<ActionButton
 				v-if="circle.canManageMembers"
 				:close-after-click="true"
-				icon="icon-add"
 				@click="addMemberToCircle">
+				<template #icon>
+					<IconAdd
+						:size="20" />
+				</template>
 				{{ t('contacts', 'Add member') }}
 			</ActionButton>
 
@@ -75,8 +78,11 @@
 			<!-- delete circle -->
 			<ActionButton
 				v-if="circle.canDelete"
-				icon="icon-delete"
 				@click="confirmDeleteCircle">
+				<template #icon>
+					<IconDelete
+						:size="20" />
+				</template>
 				{{ t('contacts', 'Delete circle') }}
 			</ActionButton>
 		</template>
@@ -94,6 +100,8 @@ import ActionText from '@nextcloud/vue/dist/Components/ActionText'
 import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import ExitToApp from 'vue-material-design-icons/ExitToApp'
+import IconAdd from 'vue-material-design-icons/Plus'
+import IconDelete from 'vue-material-design-icons/Delete'
 import LocationEnter from 'vue-material-design-icons/LocationEnter'
 import IconCircles from '../Icons/IconCircles'
 
@@ -110,6 +118,8 @@ export default {
 		AppNavigationCounter,
 		AppNavigationItem,
 		ExitToApp,
+		IconAdd,
+		IconDelete,
 		LocationEnter,
 		IconCircles,
 	},
diff --git a/src/components/AppNavigation/GroupNavigationItem.vue b/src/components/AppNavigation/GroupNavigationItem.vue
index b17f3ef1..bf922aa5 100644
--- a/src/components/AppNavigation/GroupNavigationItem.vue
+++ b/src/components/AppNavigation/GroupNavigationItem.vue
@@ -30,20 +30,29 @@
 		</template>
 		<template slot="actions">
 			<ActionButton
-				icon="icon-add"
 				:close-after-click="true"
 				@click="addContactsToGroup(group)">
+				<template #icon>
+					<IconAdd
+						:size="20" />
+				</template>
 				{{ t('contacts', 'Add contacts') }}
 			</ActionButton>
 			<ActionButton
-				icon="icon-download"
 				:close-after-click="true"
 				@click="downloadGroup(group)">
+				<template #icon>
+					<IconDownload
+						:size="20" />
+				</template>
 				{{ t('contacts', 'Download') }}
 			</ActionButton>
 			<ActionButton
-				icon="icon-mail"
 				@click="emailGroup(group)">
+				<template #icon>
+					<IconEmail
+						:size="20" />
+				</template>
 				{{ t('contacts', 'Send email') }}
 			</ActionButton>
 		</template>
@@ -63,6 +72,9 @@ import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import IconContact from 'vue-material-design-icons/AccountMultiple'
+import IconAdd from 'vue-material-design-icons/Plus'
+import IconDownload from 'vue-material-design-icons/Download'
+import IconEmail from 'vue-material-design-icons/Email'
 
 export default {
 	name: 'GroupNavigationItem',
@@ -72,6 +84,9 @@ export default {
 		AppNavigationCounter,
 		AppNavigationItem,
 		IconContact,
+		IconAdd,
+		IconDownload,
+		IconEmail,
 	},
 
 	props: {
diff --git a/src/mixins/CopyToClipboardMixin.js b/src/mixins/CopyToClipboardMixin.js
index 3093d7dd..d31a312b 100644
--- a/src/mixins/CopyToClipboardMixin.js
+++ b/src/mixins/CopyToClipboardMixin.js
@@ -34,7 +34,6 @@ export default {
 			copySuccess: false,
 		}
 	},
-
 	computed: {
 		copyLinkIcon() {
 			if (this.copySuccess) {