Merge pull request #47140 from nextcloud/fix/app-menu-focus

fix: Make focused app menu entry wider to see full name

core/src/components/AppMenu.vue

@@ -7,7 +7,8 @@
 	<nav ref="appMenu"
 		class="app-menu"
 		:aria-label="t('core', 'Applications menu')">
-		<ul class="app-menu__list">
+		<ul :aria-label="t('core', 'Apps')"
+			class="app-menu__list">
 			<AppMenuEntry v-for="app in mainAppList"
 				:key="app.id"
 				:app="app" />
@@ -112,6 +113,8 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .app-menu {
+	// The size the currently focussed entry will grow to show the full name
+	--app-menu-entry-growth: calc(var(--default-grid-baseline) * 4);
 	display: flex;
 	flex: 1 1;
 	width: 0;
@@ -119,6 +122,17 @@ export default defineComponent({
 	&__list {
 		display: flex;
 		flex-wrap: nowrap;
+		margin-inline: calc(var(--app-menu-entry-growth) / 2);
+		transition: margin-inline var(--animation-quick) ease-in-out;
+
+		// Remove padding if the first child is focussed
+		&:has(.app-menu-entry:hover:first-child, .app-menu-entry:focus-within:first-child) {
+			margin-inline: 0 calc(var(--app-menu-entry-growth) / 2);
+		}
+		// Remove padding if the last child is focussed
+		&:has(.app-menu-entry:hover:last-child, .app-menu-entry:focus-within:last-child) {
+			margin-inline: calc(var(--app-menu-entry-growth) / 2) 0;
+		}
 	}
 
 	&__overflow {

core/src/components/AppMenuEntry.vue

@@ -37,6 +37,8 @@ defineProps<{
 	width: var(--header-height);
 	height: var(--header-height);
 	position: relative;
+	// Needed to prevent jumping when hover an entry (keep in sync with :hover styles)
+	transition: width var(--animation-quick) ease-in-out;
 
 	&__link {
 		position: relative;
@@ -95,14 +97,14 @@ defineProps<{
 			left: 50%;
 			bottom: 8px;
 			display: block;
-			transition: all 0.1s ease-in-out;
+			transition: all var(--animation-quick) ease-in-out;
 			opacity: 1;
 		}
 	}
 
 	&__icon,
 	&__label {
-		transition: all 0.1s ease-in-out;
+		transition: all var(--animation-quick) ease-in-out;
 	}
 
 	// Make the hovered entry bold to see that it is hovered
@@ -110,6 +112,30 @@ defineProps<{
 	&:focus-within .app-menu-entry__label {
 		font-weight: bold;
 	}
+
+	// Adjust the width when an entry is focussed
+	// The focussed / hovered entry should grow, while both neighbors need to shrink
+	&:hover,
+	&:focus-within {
+		width: calc(var(--header-height) + var(--app-menu-entry-growth));
+
+		// The next entry needs to shrink half the growth
+		+ .app-menu-entry {
+			width: calc(var(--header-height) - (var(--app-menu-entry-growth) / 2));
+			.app-menu-entry__icon {
+				margin-inline-end: calc(var(--app-menu-entry-growth) / 2);
+			}
+		}
+	}
+
+	// The previous entry needs to shrink half the growth
+	&:has(+ .app-menu-entry:hover),
+	&:has(+ .app-menu-entry:focus-within) {
+		width: calc(var(--header-height) - (var(--app-menu-entry-growth) / 2));
+		.app-menu-entry__icon {
+			margin-inline-start: calc(var(--app-menu-entry-growth) / 2);
+		}
+	}
 }
 </style>