Allow to show menu title for single Action

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

src/components/Actions/Actions.vue

@@ -138,7 +138,8 @@ export default {
 		v-bind="firstActionBinding"
 		:class="{
 			[firstAction.icon]: firstAction.icon,
-			[firstActionClass]: firstActionClass }"
+			[firstActionClass]: firstActionClass,
+			'action-item--single--with-title': menuTitle }"
 		class="action-item action-item--single"
 		rel="nofollow noreferrer noopener"
 		:disabled="isDisabled"
@@ -148,6 +149,8 @@ export default {
 		<!-- Render the icon slot content of the first action -->
 		<VNodes :vnodes="firstActionIconSlot" />
 
+		{{ menuTitle }}
+
 		<!-- fake slot to gather main action -->
 		<span :aria-hidden="true" hidden>
 			<!-- @slot All action elements passed into the default slot will be used -->
@@ -683,27 +686,6 @@ export default {
 		border: none;
 		border-radius: $clickable-area / 2;
 		background-color: transparent;
-	}
-
-	&::v-deep .material-design-icon {
-		width: $clickable-area;
-		height: $clickable-area;
-		opacity: $opacity_full;
-
-		.material-design-icon__svg {
-			vertical-align: middle;
-		}
-	}
-
-	// icon-more
-	&__menutoggle {
-		// align menu icon in center
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		opacity: $opacity_normal;
-		font-weight: bold;
-		line-height: $icon-size;
 
 		&--with-title {
 			position: relative;
@@ -728,6 +710,27 @@ export default {
 				left: ($clickable-area - 24px) / 2;
 			}
 		}
+	}
+
+	&::v-deep .material-design-icon {
+		width: $clickable-area;
+		height: $clickable-area;
+		opacity: $opacity_full;
+
+		.material-design-icon__svg {
+			vertical-align: middle;
+		}
+	}
+
+	// icon-more
+	&__menutoggle {
+		// align menu icon in center
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: $opacity_normal;
+		font-weight: bold;
+		line-height: $icon-size;
 
 		&--primary {
 			opacity: $opacity_full;