Merge pull request #46916 from nextcloud/fix/appmenu-label-pos

Author: skjnldsv

core/src/components/AppMenuEntry.vue

@@ -61,10 +61,10 @@ defineProps<{
 		text-align: center;
 		bottom: 0;
 		left: 50%;
+		top: 50%;
 		display: block;
 		min-width: 100%;
 		transform: translateX(-50%);
-		transition: all 0.1s ease-in-out;
 		width: 100%;
 		text-overflow: ellipsis;
 		overflow: hidden;
@@ -84,44 +84,53 @@ defineProps<{
 			pointer-events: none;
 			border-bottom-color: var(--color-main-background);
 			transform: translateX(-50%);
-			width: 12px;
+			width: 10px;
 			height: 5px;
 			border-radius: 3px;
 			background-color: var(--color-background-plain-text);
 			left: 50%;
-			bottom: 6px;
+			bottom: 8px;
 			display: block;
 			transition: all 0.1s ease-in-out;
 			opacity: 1;
 		}
 	}
 
+	&__icon,
+	&__label {
+		transition: all 0.1s ease-in-out;
+	}
+
 	// Make the hovered entry bold to see that it is hovered
-	&:hover &__label,
-	&:focus-within &__label {
+	&:hover .app-menu-entry__label,
+	&:focus-within .app-menu-entry__label {
 		font-weight: bold;
 	}
 }
 </style>
 
 <style lang="scss">
 // Showing the label
-.app-menu-entry:hover .app-menu-entry,
-.app-menu-entry:focus-within .app-menu-entry,
-.app-menu__list:hover .app-menu-entry,
-.app-menu__list:focus-within .app-menu-entry {
+.app-menu-entry:hover,
+.app-menu-entry:focus-within,
+.app-menu__list:hover,
+.app-menu__list:focus-within {
 	// Move icon up so that the name does not overflow the icon
-	&__icon {
+	.app-menu-entry__icon {
 		margin-block-end: calc(1.5 * 12px); // font size of label * line height
 	}
 
 	// Make the label visible
-	&__label {
+	.app-menu-entry__label {
 		opacity: 1;
 	}
 
 	// Hide indicator when the text is shown
-	&--active::before {
+	.app-menu-entry--active::before {
+		opacity: 0;
+	}
+
+	.app-menu-icon__unread {
 		opacity: 0;
 	}
 }

core/src/components/AppMenuIcon.vue

@@ -8,7 +8,7 @@
 		role="img"
 		:aria-hidden="ariaHidden"
 		:aria-label="ariaLabel">
-		<img class="app-menu-icon__icon" :src="app.icon">
+		<img class="app-menu-icon__icon" :src="app.icon" alt="">
 		<IconDot v-if="app.unread" class="app-menu-icon__unread" :size="10" />
 	</span>
 </template>
@@ -58,6 +58,7 @@ $unread-indicator-size: 10px;
 		position: absolute;
 		inset-block-end: calc($unread-indicator-size / -2.5);
 		inset-inline-end: calc($unread-indicator-size / -2.5);
+		transition: all 0.1s ease-in-out;
 	}
 }
 </style>