From 353a28bfe75ef75983df965cedfea2053c3cccfa Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Mon, 17 Oct 2022 13:35:08 +0200
Subject: [PATCH] fix(editor): fix bottom menu hover bug (#4349)

* fix menu bottom hover

* fix recrusion bug

* fix last item padding

* fix bottom padding

* remove unused class
---
 .../src/components/N8nMenu/Menu.vue           |   8 +-
 .../src/components/N8nMenuItem/MenuItem.vue   | 103 +++++++++---------
 .../editor-ui/src/components/MainSidebar.vue  |   2 +-
 .../src/components/SettingsSidebar.vue        |   4 -
 4 files changed, 56 insertions(+), 61 deletions(-)

diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index 814558c9ec..ac4a694b13 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -22,7 +22,6 @@
 						:key="item.id"
 						:item="item"
 						:compact="collapsed"
-						:popperClass="$style.submenuPopper"
 						:tooltipDelay="tooltipDelay"
 						:mode="mode"
 						:activeTab="activeTab"
@@ -30,7 +29,7 @@
 					/>
 				</el-menu>
 			</div>
-			<div :class="{[$style.lowerContent]: true, ['pb-xs']: $slots.menuSuffix }">
+			<div :class="[$style.lowerContent, 'pb-2xs']">
 				<el-menu
 					:defaultActive="defaultActive"
 					:collapse="collapsed"
@@ -41,7 +40,6 @@
 						:key="item.id"
 						:item="item"
 						:compact="collapsed"
-						:popperClass="$style.submenuPopper"
 						:tooltipDelay="tooltipDelay"
 						:mode="mode"
 						:activeTab="activeTab"
@@ -158,10 +156,6 @@ export default Vue.extend({
 	ul {
 		padding-top: 0 !important;
 	}
-	.submenuPopper {
-		bottom: auto !important;
-		top: 0 !important;
-	}
 }
 
 .lowerContent {
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index 399e331e53..47ceed2af3 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -1,54 +1,55 @@
 <template>
-	<el-submenu
-		v-if="item.children && item.children.length > 0"
-		:id="item.id"
-		:class="{
-			[$style.submenu]: true,
-			[$style.item]: true,
-			[$style.compact]: compact,
-			[$style.active]: mode === 'router' && isItemActive(item)
-		}"
-		:index="item.id"
-		:popper-append-to-body="false"
-		:popper-class="`${$style.submenuPopper} ${popperClass}`"
-	>
+	<div :class="['n8n-menu-item', $style.item]">
+		<el-submenu
+			v-if="item.children && item.children.length > 0"
+			:id="item.id"
+			:class="{
+				[$style.submenu]: true,
+				[$style.compact]: compact,
+				[$style.active]: mode === 'router' && isItemActive(item)
+			}"
+			:index="item.id"
+			popper-append-to-body
+			:popper-class="`${$style.submenuPopper} ${popperClass}`"
+		>
 			<template slot="title">
 				<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" :size="item.customIconSize || 'large'" />
 				<span :class="$style.label">{{ item.label }}</span>
 			</template>
-		<el-menu-item
-			v-for="child in availableChildren"
-			:key="child.id"
-			:id="child.id"
-			:class="{
-				[$style.menuItem]: true,
-				[$style.disableActiveStyle]: !isItemActive(child),
-				[$style.active]: isItemActive(child),
-			}"
-			:index="child.id"
-			@click="onItemClick(child)"
-		>
-			<n8n-icon v-if="child.icon" :class="$style.icon" :icon="child.icon" />
-			<span :class="$style.label">{{ child.label }}</span>
-		</el-menu-item>
-	</el-submenu>
-	<n8n-tooltip v-else placement="right" :content="item.label" :disabled="!compact" :open-delay="tooltipDelay">
-		<el-menu-item
-			:id="item.id"
-			:class="{
-				[$style.menuItem]: true,
-				[$style.item]: true,
-				[$style.disableActiveStyle]: !isItemActive(item),
-				[$style.active]: isItemActive(item),
-				[$style.compact]: compact
-			}"
-			:index="item.id"
-			@click="onItemClick(item)"
-		>
-			<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" :size="item.customIconSize || 'large'" />
-			<span :class="$style.label">{{ item.label }}</span>
-		</el-menu-item>
-	</n8n-tooltip>
+			<el-menu-item
+				v-for="child in availableChildren"
+				:key="child.id"
+				:id="child.id"
+				:class="{
+					[$style.menuItem]: true,
+					[$style.disableActiveStyle]: !isItemActive(child),
+					[$style.active]: isItemActive(child),
+				}"
+				:index="child.id"
+				@click="onItemClick(child)"
+			>
+				<n8n-icon v-if="child.icon" :class="$style.icon" :icon="child.icon" />
+				<span :class="$style.label">{{ child.label }}</span>
+			</el-menu-item>
+		</el-submenu>
+		<n8n-tooltip v-else placement="right" :content="item.label" :disabled="!compact" :open-delay="tooltipDelay">
+			<el-menu-item
+				:id="item.id"
+				:class="{
+					[$style.menuItem]: true,
+					[$style.item]: true,
+					[$style.disableActiveStyle]: !isItemActive(item),
+					[$style.active]: isItemActive(item),
+					[$style.compact]: compact
+				}"
+				:index="item.id"
+				@click="onItemClick(item)"
+			>
+				<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" :size="item.customIconSize || 'large'" />
+				<span :class="$style.label">{{ item.label }}</span>
+			</el-menu-item>
+		</n8n-tooltip>
+	</div>
 </template>
 
 <script lang="ts">
@@ -155,6 +156,12 @@ export default Vue.extend({
 .submenu {
 	background: none !important;
 
+	&.compact :global(.el-submenu__title) {
+		i {
+			display: none;
+		}
+	}
+
 	:global(.el-submenu__title) {
 		display: flex;
 		align-items: center;
@@ -253,9 +260,6 @@ export default Vue.extend({
 
 .submenuPopper {
 	display: block;
-	left: 40px !important;
-	bottom: 110px !important;
-	top: auto !important;
 
 	ul {
 		padding: 0 var(--spacing-xs) !important;
@@ -263,6 +267,7 @@ export default Vue.extend({
 	.menuItem {
 		display: flex;
 		padding: var(--spacing-2xs) var(--spacing-xs) !important;
+		margin: var(--spacing-2xs) 0 !important;
 	}
 
 	.icon {
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 6943a557bb..758f436247 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -9,7 +9,7 @@
 			:class="{ ['clickable']: true, [$style.sideMenuCollapseButton]: true, [$style.expandedButton]: !isCollapsed }"
 			@click="toggleCollapse">
 		</div>
-			<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">
+		<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">
 			<template #header>
 				<div :class="$style.logo">
 					<img :src="basePath +  (isCollapsed ? 'n8n-logo-collapsed.svg' : 'n8n-logo-expanded.svg')" :class="$style.icon" alt="n8n"/>
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index 35ccc86cef..098a8500dc 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -27,7 +27,6 @@ import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
 import { userHelpers } from './mixins/userHelpers';
 import { pushConnection } from "@/components/mixins/pushConnection";
 import { IFakeDoor } from '@/Interface';
-import GiftNotificationIcon from './GiftNotificationIcon.vue';
 import { IMenuItem } from 'n8n-design-system';
 import { BaseTextKey } from '@/plugins/i18n';
 
@@ -36,9 +35,6 @@ export default mixins(
 	pushConnection,
 ).extend({
 	name: 'SettingsSidebar',
-	components: {
-		GiftNotificationIcon,
-	},
 	computed: {
 		...mapGetters('settings', ['versionCli']),
 		settingsFakeDoorFeatures(): IFakeDoor[] {