From 51e8f5ff22eec8c662c55ea58470a34d4cce6184 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Tue, 11 Oct 2022 17:10:35 +0200
Subject: [PATCH] fix(editor): menu UI fixes (no-changelog) (#4316)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* N8N-4964-menu-fixes

* 👌 Addressing PR review comments
---
 .../src/components/N8nMenuItem/MenuItem.vue          | 12 ++++++++----
 packages/editor-ui/src/components/MainSidebar.vue    |  7 ++++---
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index 7affae987f..399e331e53 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -153,10 +153,12 @@ export default Vue.extend({
 
 
 .submenu {
+	background: none !important;
+
 	:global(.el-submenu__title) {
 		display: flex;
 		align-items: center;
-		border-radius: var(--border-radius-base);
+		border-radius: var(--border-radius-base) !important;
 		padding: var(--spacing-2xs) var(--spacing-xs) !important;
 		user-select: none;
 
@@ -205,9 +207,11 @@ export default Vue.extend({
 }
 
 .active {
-	background-color: var(--color-foreground-base);
-	border-radius: var(--border-radius-base);
-	.icon { color: var(--color-text-dark) }
+	&, & :global(.el-submenu__title) {
+		background-color: var(--color-foreground-base);
+		border-radius: var(--border-radius-base);
+		.icon { color: var(--color-text-dark) }
+	}
 }
 
 .menuItem {
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 8d4828c46a..eaf85a60f0 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -82,6 +82,7 @@ import {
 } from '@/constants';
 import { userHelpers } from './mixins/userHelpers';
 import { debounceHelper } from './mixins/debounce';
+import Vue from 'vue';
 
 export default mixins(
 	genericHelpers,
@@ -160,7 +161,6 @@ export default mixins(
 								// @ts-ignore
 								label: item.properties ? item.properties.title : '',
 								position: item.position,
-								activateOnRouteNames: [ VIEWS.TEMPLATES ],
 								type: item.properties?.href ? 'link' : 'regular',
 								properties: item.properties,
 							} as IMenuItem,
@@ -277,8 +277,7 @@ export default mixins(
 				return [ ...items, ...regularItems ];
 			},
 		},
-		mounted() {
-			this.fullyExpanded = !this.isCollapsed;
+		async mounted() {
 			if (this.$refs.user) {
 				this.$externalHooks().run('mainSidebar.mounted', { userRef: this.$refs.user });
 			}
@@ -286,6 +285,8 @@ export default mixins(
 				this.$store.commit('ui/expandSidebarMenu');
 			}
 			this.checkWidthAndAdjustSidebar(window.innerWidth);
+			await Vue.nextTick();
+			this.fullyExpanded = !this.isCollapsed;
 		},
 		created() {
 			window.addEventListener("resize", this.onResize);