Merge pull request #4161 from nextcloud/backport/4153/stable7

[stable7] make navigation-collapsible always visible

src/components/NcAppNavigationItem/NcAppNavigationItem.vue

@@ -259,7 +259,6 @@ Just set the `pinned` prop.
 			:to="to"
 			:exact="isRouterLink ? exact : null">
 			<div :class="{
-					'app-navigation-entry--no-icon': !isIconShown,
 					'app-navigation-entry--editing': editingActive,
 					'app-navigation-entry--deleted': undo,
 					'active': isActive && to,
@@ -280,10 +279,10 @@ Just set the `pinned` prop.
 
 					<!-- icon if not collapsible -->
 					<!-- never show the icon over the collapsible if mobile -->
-					<div :class="{ [icon]: icon && isIconShown }"
+					<div :class="{ [icon]: icon }"
 						class="app-navigation-entry-icon">
 						<NcLoadingIcon v-if="loading" />
-						<slot v-else-if="isIconShown" name="icon" />
+						<slot v-else name="icon" />
 					</div>
 					<span v-if="!editingActive" class="app-navigation-entry__title">
 						{{ nameTitleFallback }}
@@ -624,13 +623,6 @@ export default {
 			return this.allowCollapse && !!this.$slots.default
 		},
 
-		// is the icon shown?
-		// we don't show it on mobile if the entry is collapsible
-		// we show the collapse toggle directly!
-		isIconShown() {
-			return !this.collapsible || (this.collapsible && !this.isMobile)
-		},
-
 		// Checks if the component is already a children of another
 		// instance of AppNavigationItem
 		canHaveChildren() {
@@ -921,31 +913,6 @@ export default {
 	}
 }
 
-/* Makes the icon of the collapsible element disappear
- * When hovering on the root element
- */
-.app-navigation-entry--collapsible {
-	// hides the triangle button
-	.icon-collapse {
-		display: none;
-	}
-	&.app-navigation-entry--no-icon,
-	&:hover, &:focus {
-		a .app-navigation-entry-icon {
-			visibility: visible;
-		}
-		.icon-collapse {
-			// shows the triangle button
-			display: initial;
-		}
-		// prevent the icon of children elements from being hidden
-		// by the previous rule
-		.app-navigation-entry__children li:not(.app-navigation-entry--collapsible) a :first-child {
-			visibility: visible;
-		}
-	}
-}
-
 /* counter and actions */
 .app-navigation-entry__utils {
 	display: flex;