From abb7babd791ef1b98fd61323f763e67bd4a203ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Fri, 7 May 2021 21:47:41 +0200
Subject: [PATCH 1/2] Allow material design icons in AppSidebarTabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 src/components/AppSidebar/AppSidebarTabs.vue  | 26 +++++++++++++++++--
 .../AppSidebarTab/AppSidebarTab.vue           |  2 +-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/AppSidebar/AppSidebarTabs.vue b/src/components/AppSidebar/AppSidebarTabs.vue
index e09e3bed9a..c667e1e83e 100644
--- a/src/components/AppSidebar/AppSidebarTabs.vue
+++ b/src/components/AppSidebar/AppSidebarTabs.vue
@@ -45,7 +45,10 @@
 						:tabindex="activeTab === tab.id ? null : -1"
 						role="tab"
 						@click.prevent="setActive(tab.id)">
-						<span :class="tab.icon" class="app-sidebar-tabs__tab-icon" />
+						<span class="app-sidebar-tabs__tab-icon">
+							<VNodes v-if="hasMdIcon(tab)" :vnodes="tab.$slots.icon[0]" />
+							<span v-else :class="tab.icon" />
+						</span>
 						{{ tab.name }}
 					</a>
 				</li>
@@ -73,6 +76,15 @@ const IsValidStringWithoutSpaces = function(value) {
 
 export default {
 	name: 'AppSidebarTabs',
+
+	components: {
+		// Component to render the material design icon (vnodes)
+		VNodes: {
+			functional: true,
+			render: (h, context) => context.props.vnodes,
+		},
+	},
+
 	props: {
 		/**
 		 * Id of the tab to activate
@@ -208,6 +220,10 @@ export default {
 					: ''
 		},
 
+		hasMdIcon(tab) {
+			return tab?.$slots?.icon
+		},
+
 		/**
 		 * Manually update the sidebar tabs according to $slots.default
 		 */
@@ -227,7 +243,7 @@ export default {
 				// Make sure all required props are provided and valid
 				if (IsValidString(tab?.name)
 					&& IsValidStringWithoutSpaces(tab?.id)
-					&& IsValidStringWithoutSpaces(tab?.icon)) {
+					&& (IsValidStringWithoutSpaces(tab?.icon) || tab?.$slots?.icon)) {
 					tabs.push(tab)
 				} else {
 					invalidTabs.push(tabNode)
@@ -331,6 +347,12 @@ export default {
 		opacity: $opacity_normal;
 		background-position: center 8px;
 		background-size: 16px;
+
+		& > span {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
 	}
 
 	&__content {
diff --git a/src/components/AppSidebarTab/AppSidebarTab.vue b/src/components/AppSidebarTab/AppSidebarTab.vue
index 3b21abedd3..98f888f73a 100644
--- a/src/components/AppSidebarTab/AppSidebarTab.vue
+++ b/src/components/AppSidebarTab/AppSidebarTab.vue
@@ -52,7 +52,7 @@ export default {
 		},
 		icon: {
 			type: String,
-			required: true,
+			default: '',
 		},
 		order: {
 			type: Number,

From a3bc8b9cfddb9b0fbcb64ad29230c118bb4ef82b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Sat, 8 May 2021 11:55:28 +0200
Subject: [PATCH 2/2] Add AppSidebarTab material design example
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 src/components/AppSidebar/AppSidebar.vue | 32 ++++++++++++++++--------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/AppSidebar/AppSidebar.vue b/src/components/AppSidebar/AppSidebar.vue
index 4833bfafe8..e20f9eb807 100644
--- a/src/components/AppSidebar/AppSidebar.vue
+++ b/src/components/AppSidebar/AppSidebar.vue
@@ -30,16 +30,28 @@ include a standard-header like it's used by the files app.
 ### Standard usage
 
 ```vue
-<AppSidebar
-	title="cat-picture.jpg"
-	subtitle="last edited 3 weeks ago">
-	<AppSidebarTab icon="icon-settings" name="Settings" id="settings">
-		Settings tab content
-	</AppSidebarTab>
-	<AppSidebarTab icon="icon-share" name="Sharing" id="share">
-		Sharing tab content
-	</AppSidebarTab>
-</AppSidebar>
+<template>
+	<AppSidebar
+		title="cat-picture.jpg"
+		subtitle="last edited 3 weeks ago">
+		<AppSidebarTab icon="icon-settings" name="Settings" id="settings">
+			<Cog slot="icon" :size="24" decorative />
+			Settings tab content
+		</AppSidebarTab>
+		<AppSidebarTab icon="icon-share" name="Sharing" id="share">
+			Sharing tab content
+		</AppSidebarTab>
+	</AppSidebar>
+</template>
+<script>
+	import Cog from 'vue-material-design-icons/Cog.vue'
+
+	export default {
+		components: {
+			Cog,
+		},
+	}
+</script>
 ```
 
 ### Editable title