From aee8912c01a72eb8cc5766b11ed7ac8c9818900c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Thu, 15 Sep 2022 10:01:41 +0200
Subject: [PATCH 01/39] refactor(editor): N8N-4540 Main navigation layout
 rework (#4060)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Implemented new editor layout using css grid

* ✨ Reworking main navigation layout, migrating some styling to css modules

* ✨ Reworking main sidebar layout and responsiveness

* 💄 Minor type update

* ✨ Updated editor grid layout so empty cells are collapsed (`fit-content`), fixed updates menu items styling

* ✨ Implemented new user area look & feel in main sidebar

* 💄 Adjusting sidebar bottom padding when user area is not shown

* 💄 CSS cleanup/refactor + minor vue refactoring

* ✨ Fixing overscoll issue in chrome and scrolling behaviour of the content view

* 👌 Addressing review feedback

* ✨ Added collapsed and expanded versions of n8n logo

* ✨ Updating infinite scrolling in templates view to work with the new layout

* 💄 Updating main sidebar expanded width and templates view left margin

* 💄 Updating main content height

* 💄 Adding global styles for scrollable views with centered content, minor updates to user area

* ✨ Updating zoomToFit logic, lasso select box position and new nodes positioning

* ✨ Fixing new node drop position now that mouse detection has been adjusted

* 👌 Updating templates view scroll to top logic and responsive padding, aligning menu items titles

* 💄 Moving template layout style from global css class to component level
---
 packages/design-system/theme/src/reset.scss   |   2 +-
 .../editor-ui/public/n8n-logo-collapsed.svg   |   3 +
 .../editor-ui/public/n8n-logo-expanded.svg    |   6 +
 packages/editor-ui/src/App.vue                |  48 +-
 .../src/components/MainHeader/MainHeader.vue  |   7 -
 .../editor-ui/src/components/MainSidebar.vue  | 715 ++++++++++--------
 .../editor-ui/src/components/TemplateList.vue |  10 +-
 .../src/components/mixins/mouseSelect.ts      |   5 +-
 packages/editor-ui/src/modules/ui.ts          |   3 +
 packages/editor-ui/src/n8n-theme.scss         |   2 +-
 packages/editor-ui/src/plugins/icons.ts       |   2 +
 packages/editor-ui/src/views/NodeView.vue     |  19 +-
 .../src/views/TemplatesCollectionView.vue     |  11 +-
 .../src/views/TemplatesSearchView.vue         |  11 +-
 .../editor-ui/src/views/TemplatesView.vue     |  12 +-
 .../src/views/TemplatesWorkflowView.vue       |  10 +-
 packages/editor-ui/src/views/canvasHelpers.ts |  11 +-
 17 files changed, 494 insertions(+), 383 deletions(-)
 create mode 100644 packages/editor-ui/public/n8n-logo-collapsed.svg
 create mode 100644 packages/editor-ui/public/n8n-logo-expanded.svg

diff --git a/packages/design-system/theme/src/reset.scss b/packages/design-system/theme/src/reset.scss
index 6688cb9621eef..546de883be185 100644
--- a/packages/design-system/theme/src/reset.scss
+++ b/packages/design-system/theme/src/reset.scss
@@ -15,7 +15,7 @@ html {
 body {
 	height: 100%;
 	width: 100%;
-	overscroll-behavior-x: none;
+	overscroll-behavior: none;
 	line-height: 1;
 	font-size: var(--font-size-m);
 	font-weight: var(--font-weight-regular);
diff --git a/packages/editor-ui/public/n8n-logo-collapsed.svg b/packages/editor-ui/public/n8n-logo-collapsed.svg
new file mode 100644
index 0000000000000..62e0c21bb7486
--- /dev/null
+++ b/packages/editor-ui/public/n8n-logo-collapsed.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="16" viewBox="0 0 32 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.0125 6.4C26.5214 6.4 25.2686 5.38018 24.9133 4H21.2456C20.4635 4 19.796 4.56546 19.6674 5.33696L19.5359 6.12608C19.411 6.87531 19.032 7.52738 18.496 8C19.032 8.47262 19.411 9.12469 19.5359 9.87392L19.6674 10.663C19.796 11.4345 20.4635 12 21.2456 12H21.7133C22.0686 10.6198 23.3214 9.6 24.8125 9.6C26.5798 9.6 28.0125 11.0327 28.0125 12.8C28.0125 14.5673 26.5798 16 24.8125 16C23.3214 16 22.0685 14.9802 21.7133 13.6H21.2456C19.6813 13.6 18.3463 12.4691 18.0891 10.9261L17.9576 10.137C17.829 9.36546 17.1615 8.8 16.3794 8.8H15.1117C14.7565 10.1802 13.5036 11.2 12.0125 11.2C10.5214 11.2 9.26855 10.1802 8.91331 8.8H7.11169C6.75645 10.1802 5.50357 11.2 4.0125 11.2C2.24519 11.2 0.8125 9.76731 0.8125 8C0.8125 6.23269 2.24519 4.8 4.0125 4.8C5.50357 4.8 6.75645 5.81982 7.11169 7.2H8.91331C9.26855 5.81982 10.5214 4.8 12.0125 4.8C13.5036 4.8 14.7565 5.81982 15.1117 7.2H16.3794C17.1615 7.2 17.829 6.63454 17.9576 5.86304L18.0891 5.07392C18.3463 3.53092 19.6813 2.4 21.2456 2.4L24.9133 2.4C25.2685 1.01982 26.5214 0 28.0125 0C29.7798 0 31.2125 1.43269 31.2125 3.2C31.2125 4.96731 29.7798 6.4 28.0125 6.4ZM28.0125 4.8C28.8962 4.8 29.6125 4.08366 29.6125 3.2C29.6125 2.31634 28.8962 1.6 28.0125 1.6C27.1288 1.6 26.4125 2.31634 26.4125 3.2C26.4125 4.08366 27.1288 4.8 28.0125 4.8ZM4.0125 9.6C4.89616 9.6 5.6125 8.88366 5.6125 8C5.6125 7.11634 4.89616 6.4 4.0125 6.4C3.12884 6.4 2.4125 7.11634 2.4125 8C2.4125 8.88366 3.12884 9.6 4.0125 9.6ZM13.6125 8C13.6125 8.88366 12.8962 9.6 12.0125 9.6C11.1288 9.6 10.4125 8.88366 10.4125 8C10.4125 7.11634 11.1288 6.4 12.0125 6.4C12.8962 6.4 13.6125 7.11634 13.6125 8ZM26.4125 12.8C26.4125 13.6837 25.6962 14.4 24.8125 14.4C23.9288 14.4 23.2125 13.6837 23.2125 12.8C23.2125 11.9163 23.9288 11.2 24.8125 11.2C25.6962 11.2 26.4125 11.9163 26.4125 12.8Z" fill="#EA4B71"/>
+</svg>
diff --git a/packages/editor-ui/public/n8n-logo-expanded.svg b/packages/editor-ui/public/n8n-logo-expanded.svg
new file mode 100644
index 0000000000000..29dbf38f910e8
--- /dev/null
+++ b/packages/editor-ui/public/n8n-logo-expanded.svg
@@ -0,0 +1,6 @@
+<svg width="58" height="16" viewBox="0 0 58 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2 6.4C25.7089 6.4 24.4561 5.38018 24.1008 4H20.4331C19.651 4 18.9835 4.56546 18.8549 5.33696L18.7234 6.12608C18.5985 6.87531 18.2195 7.52738 17.6835 8C18.2195 8.47262 18.5985 9.12469 18.7234 9.87392L18.8549 10.663C18.9835 11.4345 19.651 12 20.4331 12H20.9008C21.2561 10.6198 22.5089 9.6 24 9.6C25.7673 9.6 27.2 11.0327 27.2 12.8C27.2 14.5673 25.7673 16 24 16C22.5089 16 21.256 14.9802 20.9008 13.6H20.4331C18.8688 13.6 17.5338 12.4691 17.2766 10.9261L17.1451 10.137C17.0165 9.36546 16.349 8.8 15.5669 8.8H14.2992C13.944 10.1802 12.6911 11.2 11.2 11.2C9.70893 11.2 8.45605 10.1802 8.10081 8.8H6.29919C5.94395 10.1802 4.69107 11.2 3.2 11.2C1.43269 11.2 0 9.76731 0 8C0 6.23269 1.43269 4.8 3.2 4.8C4.69107 4.8 5.94395 5.81982 6.29919 7.2H8.10081C8.45605 5.81982 9.70893 4.8 11.2 4.8C12.6911 4.8 13.944 5.81982 14.2992 7.2H15.5669C16.349 7.2 17.0165 6.63454 17.1451 5.86304L17.2766 5.07392C17.5338 3.53092 18.8688 2.4 20.4331 2.4L24.1008 2.4C24.456 1.01982 25.7089 0 27.2 0C28.9673 0 30.4 1.43269 30.4 3.2C30.4 4.96731 28.9673 6.4 27.2 6.4ZM27.2 4.8C28.0837 4.8 28.8 4.08366 28.8 3.2C28.8 2.31634 28.0837 1.6 27.2 1.6C26.3163 1.6 25.6 2.31634 25.6 3.2C25.6 4.08366 26.3163 4.8 27.2 4.8ZM3.2 9.6C4.08366 9.6 4.8 8.88366 4.8 8C4.8 7.11634 4.08366 6.4 3.2 6.4C2.31634 6.4 1.6 7.11634 1.6 8C1.6 8.88366 2.31634 9.6 3.2 9.6ZM12.8 8C12.8 8.88366 12.0837 9.6 11.2 9.6C10.3163 9.6 9.6 8.88366 9.6 8C9.6 7.11634 10.3163 6.4 11.2 6.4C12.0837 6.4 12.8 7.11634 12.8 8ZM25.6 12.8C25.6 13.6837 24.8837 14.4 24 14.4C23.1163 14.4 22.4 13.6837 22.4 12.8C22.4 11.9163 23.1163 11.2 24 11.2C24.8837 11.2 25.6 11.9163 25.6 12.8Z" fill="#EA4B71"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.0015 6.91832V6.84207C48.5598 6.5625 49.118 6.07959 49.118 5.12649C49.118 3.75402 47.9888 2.928 46.4282 2.928C44.8296 2.928 43.6877 3.80486 43.6877 5.15191C43.6877 6.06688 44.2206 6.5625 44.8042 6.84207V6.91832C44.1571 7.14707 43.3832 7.8333 43.3832 8.97702C43.3832 10.3622 44.5251 11.328 46.4155 11.328C48.306 11.328 49.4098 10.3622 49.4098 8.97702C49.4098 7.8333 48.6486 7.15977 48.0015 6.91832ZM46.4155 4.09714C47.0499 4.09714 47.5194 4.5038 47.5194 5.19003C47.5194 5.87626 47.0372 6.28292 46.4155 6.28292C45.7938 6.28292 45.2737 5.87626 45.2737 5.19003C45.2737 4.49109 45.7685 4.09714 46.4155 4.09714ZM46.4155 10.108C45.6797 10.108 45.0833 9.63784 45.0833 8.83723C45.0833 8.11287 45.5782 7.56643 46.4029 7.56643C47.2149 7.56643 47.7097 8.10017 47.7097 8.86265C47.7097 9.63784 47.1387 10.108 46.4155 10.108Z" fill="#101330"/>
+<path d="M51.3672 11.2009H52.9912V7.75705C52.9912 6.62604 53.6763 6.13042 54.4503 6.13042C55.2116 6.13042 55.8079 6.63874 55.8079 7.6808V11.2009H57.4319V7.35039C57.4319 5.68564 56.4676 4.71983 54.9578 4.71983C54.0062 4.71983 53.4733 5.10107 53.0927 5.59669H52.9912L52.8516 4.84691H51.3672V11.2009Z" fill="#101330"/>
+<path d="M36.9912 11.2009H35.3672V4.84691H36.8516L36.9912 5.59669H37.0927C37.4733 5.10107 38.0062 4.71983 38.9578 4.71983C40.4676 4.71983 41.4319 5.68564 41.4319 7.35039V11.2009H39.8079V7.6808C39.8079 6.63874 39.2116 6.13042 38.4503 6.13042C37.6763 6.13042 36.9912 6.62604 36.9912 7.75705V11.2009Z" fill="#101330"/>
+</svg>
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index f48dcfb2176f7..09a06b373851d 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -1,14 +1,21 @@
 <template>
-	<div :class="$style.container">
+	<div :class="{[$style.app]: true, ['root-container']: true, ['menu-collapsed']: sidebarMenuCollapsed}">
 		<LoadingView v-if="loading" />
-		<div v-else id="app" :class="$style.container">
-			<div id="header" :class="$style.header">
+		<div
+			v-else
+			id="app"
+			:class="{
+				[$style.container]: true,
+				[$style.sidebarCollapsed]: sidebarMenuCollapsed
+			}"
+		>
+			<div id="header" :class="$style['header']">
 				<router-view name="header"></router-view>
 			</div>
-			<div id="sidebar" :class="$style.sidebar">
+			<div id="sidebar" :class="$style['sidebar']">
 				<router-view name="sidebar"></router-view>
 			</div>
-			<div id="content" :class="$style.content">
+			<div id="content" :class="$style['content']">
 				<router-view />
 			</div>
 			<Modals />
@@ -47,6 +54,7 @@ export default mixins(
 	computed: {
 		...mapGetters('settings', ['isHiringBannerEnabled', 'isTemplatesEnabled', 'isTemplatesEndpointReachable', 'isUserManagementEnabled', 'showSetupPage']),
 		...mapGetters('users', ['currentUser']),
+		...mapGetters('ui', ['sidebarMenuCollapsed']),
 		defaultLocale (): string {
 			return this.$store.getters.defaultLocale;
 		},
@@ -180,26 +188,34 @@ export default mixins(
 </script>
 
 <style lang="scss" module>
+.app {
+	height: 100vh;
+	overflow: hidden;
+}
+
 .container {
-	height: 100%;
-	width: 100%;
+	display: grid;
+  grid-template-areas:
+    "sidebar header"
+    "sidebar content";
+  grid-auto-columns: fit-content($--sidebar-expanded-width) 1fr;
+  grid-template-rows: fit-content($--sidebar-width) 1fr;
 }
 
 .content {
-	composes: container;
-	background-color: var(--color-background-light);
-	position: relative;
+	grid-area: content;
+	overflow: auto;
+	height: 100vh;
 }
 
 .header {
-	z-index: 10;
-	position: fixed;
-	width: 100%;
+	grid-area: header;
+	z-index: 999;
 }
 
 .sidebar {
-	z-index: 15;
-	position: fixed;
+	grid-area: sidebar;
+	height: 100vh;
+	z-index: 999;
 }
 </style>
-
diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
index c76322fb66bb5..e222dd9871e87 100644
--- a/packages/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -55,18 +55,11 @@ export default mixins(
 
 <style lang="scss">
 .main-header {
-	position: fixed;
-	top: 0;
 	background-color: var(--color-background-xlight);
 	height: 65px;
 	width: 100%;
 	box-sizing: border-box;
 
-	padding-left: $--sidebar-width;
-
-	&.expanded {
-		padding-left: $--sidebar-expanded-width;
-	}
 }
 
 .top-menu {
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 1c7f527f564c7..dec10e14704e5 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -1,177 +1,195 @@
 <template>
-	<div id="side-menu">
+	<div id="side-menu" :class="['side-menu', $style.sideMenu]">
 		<input type="file" ref="importFile" style="display: none" v-on:change="handleFileImport()">
 
-		<div class="side-menu-wrapper" :class="{expanded: !isCollapsed}">
-			<div id="collapse-change-button" class="clickable" @click="toggleCollapse">
-				<font-awesome-icon icon="angle-right" class="icon" />
+		<div :class="$style.sideMenuWrapper">
+			<div
+				id="collapse-change-button"
+				:class="['clickable', $style.sideMenuCollapseButton]"
+				@click="toggleCollapse"
+			>
+				<font-awesome-icon v-if="isCollapsed" icon="angle-right" :class="$style.iconCollapsed" />
+				<font-awesome-icon v-else icon="angle-left" :class="$style.iconExpanded" />
 			</div>
 			<n8n-menu default-active="workflow" @select="handleSelect" :collapse="isCollapsed">
+				<div :class="$style.sideMenuFlexContainer">
+					<div :class="$style.sideMenuUpper">
+						<n8n-menu-item
+							index="logo"
+							:class="{[$style.logoItem]: true, [$style.logoItemCollapsed]: isCollapsed}"
+						>
+							<a href="https://n8n.io" target="_blank" :class="$style['logo-link']">
+								<img v-if="isCollapsed" :src="basePath + 'n8n-logo-collapsed.svg'" :class="$style['icon']" alt="n8n"/>
+								<img v-else :src="basePath + 'n8n-logo-expanded.svg'" :class="$style['icon']" alt="n8n"/>
+							</a>
+						</n8n-menu-item>
+
+						<MenuItemsIterator :items="sidebarMenuTopItems" :root="true"/>
+
+						<el-submenu index="workflow" title="Workflow" popperClass="sidebar-popper">
+							<template slot="title">
+								<font-awesome-icon icon="network-wired"/>&nbsp;
+								<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.workflows') }}</span>
+							</template>
+
+							<n8n-menu-item index="workflow-new">
+								<template slot="title">
+									<font-awesome-icon icon="file"/>&nbsp;
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.new') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item v-if="isTemplatesEnabled" index="template-new">
+								<template slot="title">
+									<font-awesome-icon icon="box-open"/>&nbsp;
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.newTemplate') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-open">
+								<template slot="title">
+									<font-awesome-icon icon="folder-open"/>&nbsp;
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.open') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-save" :disabled="!onWorkflowPage">
+								<template slot="title">
+									<font-awesome-icon icon="save"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.save') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-duplicate" :disabled="!onWorkflowPage || !currentWorkflow">
+								<template slot="title">
+									<font-awesome-icon icon="copy"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.duplicate') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-delete" :disabled="!onWorkflowPage || !currentWorkflow">
+								<template slot="title">
+									<font-awesome-icon icon="trash"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.delete') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-download" :disabled="!onWorkflowPage">
+								<template slot="title">
+									<font-awesome-icon icon="file-download"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.download') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-import-url" :disabled="!onWorkflowPage">
+								<template slot="title">
+									<font-awesome-icon icon="cloud"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.importFromUrl') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-import-file" :disabled="!onWorkflowPage">
+								<template slot="title">
+									<font-awesome-icon icon="hdd"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.importFromFile') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-settings" :disabled="!onWorkflowPage || !currentWorkflow">
+								<template slot="title">
+									<font-awesome-icon icon="cog"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.settings') }}</span>
+								</template>
+							</n8n-menu-item>
+						</el-submenu>
 
-				<n8n-menu-item index="logo" class="logo-item">
-					<a href="https://n8n.io" target="_blank">
-						<img :src="basePath + 'n8n-icon-small.png'" class="icon" alt="n8n.io"/>
-						<span class="logo-text" slot="title">n8n.io</span>
-					</a>
-				</n8n-menu-item>
-
-				<MenuItemsIterator :items="sidebarMenuTopItems" :root="true"/>
-
-				<el-submenu index="workflow" title="Workflow" popperClass="sidebar-popper">
-					<template slot="title">
-						<font-awesome-icon icon="network-wired"/>&nbsp;
-						<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.workflows') }}</span>
-					</template>
-
-					<n8n-menu-item index="workflow-new">
-						<template slot="title">
-							<font-awesome-icon icon="file"/>&nbsp;
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.new') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item v-if="isTemplatesEnabled" index="template-new">
-						<template slot="title">
+						<n8n-menu-item v-if="isTemplatesEnabled" index="templates">
 							<font-awesome-icon icon="box-open"/>&nbsp;
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.newTemplate') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-open">
-						<template slot="title">
-							<font-awesome-icon icon="folder-open"/>&nbsp;
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.open') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-save" :disabled="!onWorkflowPage">
-						<template slot="title">
-							<font-awesome-icon icon="save"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.save') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-duplicate" :disabled="!onWorkflowPage || !currentWorkflow">
-						<template slot="title">
-							<font-awesome-icon icon="copy"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.duplicate') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-delete" :disabled="!onWorkflowPage || !currentWorkflow">
-						<template slot="title">
-							<font-awesome-icon icon="trash"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.delete') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-download" :disabled="!onWorkflowPage">
-						<template slot="title">
-							<font-awesome-icon icon="file-download"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.download') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-import-url" :disabled="!onWorkflowPage">
-						<template slot="title">
-							<font-awesome-icon icon="cloud"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.importFromUrl') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-import-file" :disabled="!onWorkflowPage">
-						<template slot="title">
-							<font-awesome-icon icon="hdd"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.importFromFile') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-settings" :disabled="!onWorkflowPage || !currentWorkflow">
-						<template slot="title">
-							<font-awesome-icon icon="cog"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.settings') }}</span>
-						</template>
-					</n8n-menu-item>
-				</el-submenu>
-
-				<n8n-menu-item v-if="isTemplatesEnabled" index="templates">
-					<font-awesome-icon icon="box-open"/>&nbsp;
-					<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.templates') }}</span>
-				</n8n-menu-item>
-
-				<el-submenu index="credentials" :title="$locale.baseText('mainSidebar.credentials')" popperClass="sidebar-popper">
-					<template slot="title">
-						<font-awesome-icon icon="key"/>&nbsp;
-						<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.credentials') }}</span>
-					</template>
-
-					<n8n-menu-item index="credentials-new">
-						<template slot="title">
-							<font-awesome-icon icon="file"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.new') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="credentials-open">
-						<template slot="title">
-							<font-awesome-icon icon="folder-open"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.open') }}</span>
-						</template>
-					</n8n-menu-item>
-				</el-submenu>
-
-				<n8n-menu-item index="executions">
-					<font-awesome-icon icon="tasks"/>&nbsp;
-					<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.executions') }}</span>
-				</n8n-menu-item>
-
-				<n8n-menu-item index="settings" v-if="canUserAccessSettings && currentUser">
-					<font-awesome-icon icon="cog"/>&nbsp;
-					<span slot="title" class="item-title-root">{{ $locale.baseText('settings') }}</span>
-				</n8n-menu-item>
-
-				<el-submenu index="help" class="help-menu" title="Help" popperClass="sidebar-popper">
-					<template slot="title">
-						<font-awesome-icon icon="question"/>&nbsp;
-						<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.help') }}</span>
-					</template>
-
-					<MenuItemsIterator :items="helpMenuItems" :afterItemClick="trackHelpItemClick" />
-
-					<n8n-menu-item index="help-about">
-						<template slot="title">
-							<font-awesome-icon class="about-icon" icon="info"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.aboutN8n') }}</span>
-						</template>
-					</n8n-menu-item>
-				</el-submenu>
-
-				<MenuItemsIterator :items="sidebarMenuBottomItems" :root="true"/>
-
-				<div :class="`footer-menu-items ${currentUser ? 'logged-in': ''}`">
-					<n8n-menu-item index="updates" class="updates" v-if="hasVersionUpdates" @click="openUpdatesPanel">
-						<div class="gift-container">
-							<GiftNotificationIcon />
-						</div>
-						<span slot="title" class="item-title-root">{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available</span>
-					</n8n-menu-item>
-					<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle" v-if="canUserAccessSidebarUserInfo && currentUser">
-						<div ref="user">
-							<n8n-menu-item class="user">
-								<div class="avatar">
-									<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
+							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.templates') }}</span>
+						</n8n-menu-item>
+
+						<el-submenu index="credentials" :title="$locale.baseText('mainSidebar.credentials')" popperClass="sidebar-popper">
+							<template slot="title">
+								<font-awesome-icon icon="key"/>&nbsp;
+								<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.credentials') }}</span>
+							</template>
+
+							<n8n-menu-item index="credentials-new">
+								<template slot="title">
+									<font-awesome-icon icon="file"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.new') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="credentials-open">
+								<template slot="title">
+									<font-awesome-icon icon="folder-open"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.open') }}</span>
+								</template>
+							</n8n-menu-item>
+						</el-submenu>
+
+						<n8n-menu-item index="executions">
+							<font-awesome-icon icon="tasks"/>&nbsp;
+							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.executions') }}</span>
+						</n8n-menu-item>
+					</div>
+					<div :class="$style.sideMenuLower">
+						<n8n-menu-item index="settings" v-if="canUserAccessSettings && currentUser">
+							<font-awesome-icon icon="cog"/>&nbsp;
+							<span slot="title" class="item-title-root">{{ $locale.baseText('settings') }}</span>
+						</n8n-menu-item>
+
+						<el-submenu index="help" :class="$style.helpMenu" title="Help" popperClass="sidebar-popper">
+							<template slot="title">
+								<font-awesome-icon icon="question"/>&nbsp;
+								<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.help') }}</span>
+							</template>
+
+							<MenuItemsIterator :items="helpMenuItems" :afterItemClick="trackHelpItemClick" />
+
+							<n8n-menu-item index="help-about">
+								<template slot="title">
+									<font-awesome-icon :class="$style['about-icon']" icon="info"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.aboutN8n') }}</span>
+								</template>
+							</n8n-menu-item>
+						</el-submenu>
+
+						<MenuItemsIterator :items="sidebarMenuBottomItems" :root="true"/>
+
+						<div :class="{
+							[$style.footerMenuItems] : true,
+							[$style.loggedIn]: showUserArea,
+						}">
+							<n8n-menu-item index="updates" :class="$style.updatesSubmenu" v-if="hasVersionUpdates" @click="openUpdatesPanel">
+								<div :class="$style.giftContainer">
+									<GiftNotificationIcon />
 								</div>
-								<span slot="title" class="item-title-root" v-if="!isCollapsed">
-									{{currentUser.fullName}}
+								<span slot="title" :class="['item-title-root', $style.updatesLabel]">
+									{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available
 								</span>
 							</n8n-menu-item>
+							<div ref="user" v-if="showUserArea">
+								<n8n-menu-item :class="$style.userSubmenu">
+									<!-- This dropdown is only enabled when sidebar is collapsed -->
+									<el-dropdown :disabled="!isCollapsed" placement="right-end" trigger="click" @command="onUserActionToggle">
+										<div :class="{[$style.avatar]: true, ['clickable']: isCollapsed }">
+											<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
+											<el-dropdown-menu slot="dropdown">
+												<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
+												<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
+											</el-dropdown-menu>
+										</div>
+									</el-dropdown>
+									<div slot="title" :class="['item-title-root', $style.username ]" v-if="!isCollapsed">
+										<span>{{currentUser.fullName}}</span>
+										<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle">
+											<div :class="{[$style.userActions]: true, ['user-actions']: true }">
+												<n8n-icon icon="ellipsis-v" />
+												<el-dropdown-menu slot="dropdown" :class="$style.userActionsMenu">
+													<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
+													<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
+												</el-dropdown-menu>
+											</div>
+										</el-dropdown>
+									</div>
+								</n8n-menu-item>
+							</div>
 						</div>
-						<el-dropdown-menu slot="dropdown">
-							<el-dropdown-item
-								command="settings"
-							>
-								{{ $locale.baseText('settings') }}
-							</el-dropdown-item>
-							<el-dropdown-item
-								command="logout"
-							>
-								{{ $locale.baseText('auth.signout') }}
-							</el-dropdown-item>
-						</el-dropdown-menu>
-					</el-dropdown>
+					</div>
 				</div>
 			</n8n-menu>
-
 		</div>
 	</div>
 
@@ -259,11 +277,15 @@ export default mixins(
 			]),
 			...mapGetters('settings', [
 				'isTemplatesEnabled',
+				'isUserManagementEnabled',
 			]),
 			canUserAccessSettings(): boolean {
 				const accessibleRoute = this.findFirstAccessibleSettingsRoute();
 				return accessibleRoute !== null;
 			},
+			showUserArea(): boolean {
+				return this.isUserManagementEnabled && this.canUserAccessSidebarUserInfo && this.currentUser;
+			},
 			helpMenuItems (): object[] {
 				return [
 					{
@@ -365,17 +387,28 @@ export default mixins(
 			if (this.$refs.user) {
 				this.$externalHooks().run('mainSidebar.mounted', { userRef: this.$refs.user });
 			}
+			this.checkWidthAndAdjustSidebar(window.outerWidth);
+		},
+		created() {
+			window.addEventListener("resize", this.onResize);
+		},
+		destroyed() {
+			window.removeEventListener("resize", this.onResize);
 		},
 		methods: {
 			trackHelpItemClick (itemType: string) {
 				this.$telemetry.track('User clicked help resource', { type: itemType, workflow_id: this.$store.getters.workflowId });
 			},
 			async onUserActionToggle(action: string) {
-				if (action === 'logout') {
-					this.onLogout();
-				}
-				else {
-					this.$router.push({name: VIEWS.PERSONAL_SETTINGS});
+				switch (action) {
+					case 'logout':
+						this.onLogout();
+						break;
+					case 'settings':
+						this.$router.push({name: VIEWS.PERSONAL_SETTINGS});
+						break;
+					default:
+						break;
 				}
 			},
 			async onLogout() {
@@ -645,10 +678,187 @@ export default mixins(
 				}
 				return defaultSettingsRoute;
 			},
+			onResize (event: UIEvent) {
+				this.callDebounced("onResizeEnd", { debounceTime: 100 }, event);
+			},
+			onResizeEnd (event: UIEvent) {
+				const browserWidth = (event.target as Window).outerWidth;
+				this.checkWidthAndAdjustSidebar(browserWidth);
+			},
+			checkWidthAndAdjustSidebar (width: number) {
+				if (width < 900) {
+					this.$store.commit('ui/collapseSidebarMenu');
+				}
+			},
 		},
 	});
 </script>
 
+<style lang="scss" module>
+
+$--n8n-logo-text-color: #101330;
+
+.sideMenu {
+	height: 100%;
+}
+
+.sideMenuWrapper {
+	height: 100%;
+	position: relative;
+	ul { height: 100%; }
+}
+
+.sideMenuCollapseButton {
+	position: absolute;
+	right: -10px;
+	top: 50%;
+	z-index: 999;
+	color: var(--color-text-base);
+	background-color: var(--color-foreground-xlight);
+	width: 20px;
+	height: 20px;
+	border: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+	text-align: center;
+	border-radius: 50%;
+
+	svg {
+		position: relative;
+		top: .5px;
+	}
+
+	.iconCollapsed { left: .5px; }
+	.iconExpanded { left: -.5px; }
+
+	&:hover {
+		color: var(--color-primary-shade-1);
+	}
+}
+
+.sideMenuFlexContainer {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	height: 100%;
+}
+
+.logoItem {
+	display: flex;
+	justify-content: space-between;
+	height: $--header-height;
+	line-height: $--header-height;
+	&:hover { background-color: initial; }
+
+	* { vertical-align: middle; }
+	.icon { height: 18px; }
+
+	.logoText {
+		position: relative;
+		left: 5px;
+		font-weight: bold;
+		color: $--n8n-logo-text-color;
+		text-decoration: none;
+	}
+}
+
+.logoItemCollapsed {
+	border-bottom: var(--border-base);
+
+	.logoText { display: none; }
+}
+
+.footerMenuItems {
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+	justify-content: flex-end;
+	padding-bottom: 20px;
+
+	&.loggedIn {
+		padding-bottom: var(--spacing-m);
+	}
+}
+
+.aboutIcon {
+	margin-left: 5px;
+}
+
+.updatesSubmenu {
+	color: $--sidebar-inactive-color !important;
+
+	.updatesLabel {
+		position: relative !important;
+		font-size: var(--font-size-xs);
+		top: 0 !important;
+		left: -2px !important;
+	}
+
+	&:hover {
+		color: $--sidebar-active-color;
+	}
+
+	.giftContainer {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		height: 100%;
+		width: 100%;
+	}
+}
+
+.userSubmenu {
+	position: relative;
+	border-top: var(--border-width-base) var(--border-style-base) var(--color-foreground-light);
+	cursor: default;
+
+	&:hover {
+		background-color: unset;
+	}
+
+	.avatar {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: default;
+	}
+
+	.username {
+		position: relative !important;
+		display: flex !important;
+		width: 68%;
+		left: 13px !important;
+		justify-content: space-between;
+		color: var(--color-text-base);
+		font-weight: var(--font-weight-bold);
+		font-size: var(--font-size-xs);
+		cursor: default;
+
+		span {
+			width: 100px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.userActions {
+		position: relative;
+		left: 10px;
+		cursor: pointer;
+
+		&:hover {
+			color: var(--color-primary);
+		}
+	}
+}
+
+.userActionsMenu {
+	margin-left: 25px !important;
+}
+
+@media screen and (max-height: 470px) {
+	.helpMenu { display: none; }
+}
+</style>
+
 <style lang="scss">
 .sidebar-popper{
 	.el-menu-item {
@@ -656,7 +866,7 @@ export default mixins(
 		height: 35px;
 		line-height: 35px;
 		color: $--custom-dialog-text-color;
-		--menu-item-hover-fill: var(--color-primary-tint-3);
+		--menu-item-hover-fill: var(--color-foreground-base);
 
 		.item-title {
 			position: absolute;
@@ -676,11 +886,7 @@ export default mixins(
 	.el-menu {
 		border: none;
 		font-size: 14px;
-		--menu-item-hover-fill: var(--color-primary-tint-3);
-
-		.el-menu--collapse {
-			width: 75px;
-		}
+		--menu-item-hover-fill: var(--color-foreground-base);
 
 		.el-menu--popup,
 		.el-menu--inline {
@@ -694,10 +900,12 @@ export default mixins(
 
 		.el-menu-item,
 		.el-submenu__title {
-			color: $--color-primary;
+			display: flex;
+			align-items: center;
+			color: var(--color-text-dark);
 			font-size: 1.2em;
 			.el-submenu__icon-arrow {
-				color: $--color-primary;
+				color: var(--color-text-dark);
 				font-weight: 800;
 				font-size: 1em;
 			}
@@ -726,6 +934,7 @@ export default mixins(
 	}
 
 	.el-menu-item {
+		min-width: 200px;
 		a {
 			color: var(--color-text-base);
 
@@ -734,160 +943,20 @@ export default mixins(
 				vertical-align: baseline;
 			}
 		}
-
-		&.logo-item {
-			background-color: $--color-primary !important;
-			height: $--header-height;
-			line-height: $--header-height;
-			* {
-				vertical-align: middle;
-			}
-
-
-			.icon {
-				position: relative;
-				height: 23px;
-				left: -10px;
-				top: -2px;
-			}
-		}
 	}
 }
 
-.about-icon {
-	margin-left: 5px;
-}
-
-#collapse-change-button {
-	position: absolute;
-	z-index: 10;
-	top: 55px;
-	left: 25px;
-	text-align: right;
-	line-height: 24px;
-	height: 20px;
-	width: 20px;
-	background-color: var(--color-foreground-xlight);
-	border: none;
-	border-radius: 15px;
-
-	-webkit-transition-duration: 0.5s;
-	-moz-transition-duration: 0.5s;
-	-o-transition-duration: 0.5s;
-	transition-duration: 0.5s;
-
-	-webkit-transition-property: -webkit-transform;
-	-moz-transition-property: -moz-transform;
-	-o-transition-property: -o-transform;
-	transition-property: transform;
-
-	overflow: hidden;
-
-	.icon {
-		position: relative;
-		left: -5px;
-		top: -2px;
-	}
-}
-#collapse-change-button:hover {
-	transform: scale(1.1);
+.el-menu--collapse .el-submenu .el-submenu__title span,
+.el-menu--collapse .el-submenu__icon-arrow {
+  height: 0;
+  width: 0;
+  overflow: hidden;
+  visibility: hidden;
+  display: inline-block;
 }
 
-.logo-text {
-	position: relative;
-	top: -3px;
-	left: 5px;
-	font-weight: bold;
-	color: var(--color-foreground-xlight);
-	text-decoration: none;
-}
 
-.expanded #collapse-change-button {
-	-webkit-transform: translateX(60px) rotate(180deg);
-	-moz-transform: translateX(60px) rotate(180deg);
-	-o-transform: translateX(60px) rotate(180deg);
-	transform: translateX(60px) rotate(180deg);
+.el-menu--collapse .el-menu-item {
+	min-width: auto !important;
 }
-
-#side-menu {
-	position: fixed;
-	height: 100%;
-
-	.el-menu {
-		height: 100%;
-	}
-}
-
-.side-menu-wrapper {
-	height: 100%;
-	width: $--sidebar-width;
-
-	&.expanded {
-		width: $--sidebar-expanded-width;
-	}
-
-	ul {
-		display: flex;
-		flex-direction: column;
-	}
-}
-
-.footer-menu-items {
-	display: flex;
-	flex-grow: 1;
-	flex-direction: column;
-	justify-content: flex-end;
-	padding-bottom: 32px;
-
-	&.logged-in {
-		padding-bottom: 8px;
-	}
-}
-
-.el-menu-item.updates {
-	color: $--sidebar-inactive-color !important;
-	.item-title-root {
-		font-size: 13px;
-		top: 0 !important;
-	}
-
-	&:hover {
-		color: $--sidebar-active-color;
-	}
-
-	.gift-container {
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-		height: 100%;
-		width: 100%;
-	}
-}
-
-.el-menu-item.user {
-	position: relative;
-
-	&:hover {
-		background-color: unset;
-	}
-
-	.avatar {
-		top: 25%;
-		left: 18px;
-		position: absolute;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.item-title-root {
-		color: var(--color-text-base);
-		font-weight: var(--font-weight-bold);
-		font-size: var(--font-size-s);
-		max-width: 130px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-}
-
 </style>
diff --git a/packages/editor-ui/src/components/TemplateList.vue b/packages/editor-ui/src/components/TemplateList.vue
index 7f9fcc685bc80..a6183a6e79e34 100644
--- a/packages/editor-ui/src/components/TemplateList.vue
+++ b/packages/editor-ui/src/components/TemplateList.vue
@@ -59,11 +59,17 @@ export default mixins(genericHelpers).extend({
 	},
 	mounted() {
 		if (this.infiniteScrollEnabled) {
-			window.addEventListener('scroll', this.onScroll);
+			const content = document.getElementById('content');
+			if (content) {
+				content.addEventListener('scroll', this.onScroll);
+			}
 		}
 	},
 	destroyed() {
-		window.removeEventListener('scroll', this.onScroll);
+		const content = document.getElementById('content');
+		if (content) {
+			content.removeEventListener('scroll', this.onScroll);
+		}
 	},
 	components: {
 		TemplateCard,
diff --git a/packages/editor-ui/src/components/mixins/mouseSelect.ts b/packages/editor-ui/src/components/mixins/mouseSelect.ts
index dbe6890a48446..f15dae838b345 100644
--- a/packages/editor-ui/src/components/mixins/mouseSelect.ts
+++ b/packages/editor-ui/src/components/mixins/mouseSelect.ts
@@ -3,7 +3,7 @@ import { INodeUi, XYPosition } from '@/Interface';
 import mixins from 'vue-typed-mixins';
 
 import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers';
-import { getMousePosition, getRelativePosition } from '@/views/canvasHelpers';
+import { getMousePosition, getRelativePosition, HEADER_HEIGHT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_EXPANDED } from '@/views/canvasHelpers';
 
 export const mouseSelect = mixins(
 	deviceSupportHelpers,
@@ -43,8 +43,9 @@ export const mouseSelect = mixins(
 		},
 		getMousePositionWithinNodeView (event: MouseEvent | TouchEvent): XYPosition {
 			const [x, y] = getMousePosition(event);
+			const sidebarOffset = this.$store.getters['ui/sidebarMenuCollapsed'] ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_EXPANDED;
 			// @ts-ignore
-			return getRelativePosition(x, y, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition);
+			return getRelativePosition(x - sidebarOffset, y - HEADER_HEIGHT, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition);
 		},
 		showSelectBox (event: MouseEvent) {
 			const [x, y] = this.getMousePositionWithinNodeView(event);
diff --git a/packages/editor-ui/src/modules/ui.ts b/packages/editor-ui/src/modules/ui.ts
index 23cfb0ebe8c12..255924bbdaac1 100644
--- a/packages/editor-ui/src/modules/ui.ts
+++ b/packages/editor-ui/src/modules/ui.ts
@@ -236,6 +236,9 @@ const module: Module<IUiState, IRootState> = {
 		toggleSidebarMenuCollapse: (state: IUiState) => {
 			state.sidebarMenuCollapsed = !state.sidebarMenuCollapsed;
 		},
+		collapseSidebarMenu: (state: IUiState) => {
+			state.sidebarMenuCollapsed = true;
+		},
 		setCurrentView: (state: IUiState, currentView: string) => {
 			state.currentView = currentView;
 		},
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index 04f2c0b6980d5..3c8b409785be2 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -3,7 +3,7 @@
 @import "~n8n-design-system/theme/dist/index.css";
 
 .clickable {
-	cursor: pointer;
+	cursor: pointer !important;
 }
 .primary-color {
 	color: $--color-primary;
diff --git a/packages/editor-ui/src/plugins/icons.ts b/packages/editor-ui/src/plugins/icons.ts
index 428dafa1fa0e6..1c0e1237d1880 100644
--- a/packages/editor-ui/src/plugins/icons.ts
+++ b/packages/editor-ui/src/plugins/icons.ts
@@ -4,6 +4,7 @@ import { IconDefinition, library } from '@fortawesome/fontawesome-svg-core';
 import {
 	faAngleDoubleLeft,
 	faAngleDown,
+	faAngleLeft,
 	faAngleRight,
 	faAngleUp,
 	faArrowLeft,
@@ -115,6 +116,7 @@ function addIcon(icon: any) { // tslint:disable-line:no-any
 
 addIcon(faAngleDoubleLeft);
 addIcon(faAngleDown);
+addIcon(faAngleLeft);
 addIcon(faAngleRight);
 addIcon(faAngleUp);
 addIcon(faArrowLeft);
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 550bc22a576ac..bedf721452a97 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1176,7 +1176,7 @@ export default mixins(
 					return;
 				}
 
-				const {zoomLevel, offset} = CanvasHelpers.getZoomToFit(nodes, !this.isDemo);
+				const {zoomLevel, offset} = CanvasHelpers.getZoomToFit(nodes, this.sidebarMenuCollapsed, !this.isDemo);
 
 				this.setZoomLevel(zoomLevel);
 				this.$store.commit('setNodeViewOffsetPosition', {newOffset: offset});
@@ -1468,9 +1468,13 @@ export default mixins(
 				const nodeTypeName = event.dataTransfer.getData('nodeTypeName');
 				if (nodeTypeName) {
 					const mousePosition = this.getMousePositionWithinNodeView(event);
+					const sidebarOffset = this.sidebarMenuCollapsed ? CanvasHelpers.SIDEBAR_WIDTH : CanvasHelpers.SIDEBAR_WIDTH_EXPANDED;
 
 					this.addNodeButton(nodeTypeName, {
-						position: [mousePosition[0] - CanvasHelpers.NODE_SIZE / 2, mousePosition[1] - CanvasHelpers.NODE_SIZE / 2],
+						position: [
+							mousePosition[0] - CanvasHelpers.NODE_SIZE / 2,
+							mousePosition[1] - CanvasHelpers.NODE_SIZE / 2,
+						],
 						dragAndDrop: true,
 					});
 					this.createNodeActive = false;
@@ -3286,19 +3290,14 @@ export default mixins(
 }
 
 .node-view-root {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	left: 0;
-	top: 0;
 	overflow: hidden;
 	background-color: var(--color-canvas-background);
+	width: 100%;
+	height: 100%;
 }
 
 .node-view-wrapper {
 	position: fixed;
-	width: 100%;
-	height: 100%;
 }
 
 .node-view {
@@ -3306,6 +3305,7 @@ export default mixins(
 	width: 100%;
 	height: 100%;
 	transform-origin: 0 0;
+	z-index: -1;
 }
 
 .node-view-background {
@@ -3313,6 +3313,7 @@ export default mixins(
 	position: absolute;
 	width: 10000px;
 	height: 10000px;
+	z-index: -2;
 }
 
 .move-active {
diff --git a/packages/editor-ui/src/views/TemplatesCollectionView.vue b/packages/editor-ui/src/views/TemplatesCollectionView.vue
index 42c40b5612aac..5fe7df5843544 100644
--- a/packages/editor-ui/src/views/TemplatesCollectionView.vue
+++ b/packages/editor-ui/src/views/TemplatesCollectionView.vue
@@ -96,10 +96,13 @@ export default mixins(workflowHelpers).extend({
 	methods: {
 		scrollToTop() {
 			setTimeout(() => {
-				window.scrollTo({
-					top: 0,
-					behavior: 'smooth',
-				});
+				const contentArea = document.getElementById('content');
+				if (contentArea) {
+					contentArea.scrollTo({
+						top: 0,
+						behavior: 'smooth',
+					});
+				}
 			}, 50);
 		},
 		onOpenTemplate({event, id}: {event: MouseEvent, id: string}) {
diff --git a/packages/editor-ui/src/views/TemplatesSearchView.vue b/packages/editor-ui/src/views/TemplatesSearchView.vue
index ba2b24f40fb72..f37e82ba21357 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@@ -321,10 +321,13 @@ export default mixins(genericHelpers).extend({
 		},
 		scrollToTop() {
 			setTimeout(() => {
-				window.scrollTo({
-					top: 0,
-					behavior: 'smooth',
-				});
+				const contentArea = document.getElementById('content');
+				if (contentArea) {
+					contentArea.scrollTo({
+						top: 0,
+						behavior: 'smooth',
+					});
+				}
 			}, 100);
 		},
 	},
diff --git a/packages/editor-ui/src/views/TemplatesView.vue b/packages/editor-ui/src/views/TemplatesView.vue
index 9a3a830065389..f3522655fa012 100644
--- a/packages/editor-ui/src/views/TemplatesView.vue
+++ b/packages/editor-ui/src/views/TemplatesView.vue
@@ -1,7 +1,6 @@
 <template>
 	<div :class="$style.template">
-		<div :class="isMenuCollapsed ? $style.menu : $style.expandedMenu"></div>
-		<div :class="$style.container">
+		<div :class="{[$style.container]: true, [$style.menuCollapsed]: isMenuCollapsed}">
 			<div :class="$style.header">
 				<div :class="$style.goBack" v-if="goBackEnabled">
 					<GoBackButton />
@@ -39,6 +38,11 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" module>
+.template {
+	display: flex;
+	padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-4xl) var(--spacing-xl);
+}
+
 .mockMenu {
 	height: 100%;
 	min-height: 100vh;
@@ -54,14 +58,10 @@ export default Vue.extend({
 	min-width: $--sidebar-expanded-width;
 }
 
-.template {
-	display: flex;
-}
 
 .container {
 	width: 100%;
 	max-width: 1024px;
-	padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-4xl) var(--spacing-3xl);
 	margin: 0 auto;
 
 	@media (max-width: $--breakpoint-md) {
diff --git a/packages/editor-ui/src/views/TemplatesWorkflowView.vue b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
index 271144534c832..32a74cbd0c05b 100644
--- a/packages/editor-ui/src/views/TemplatesWorkflowView.vue
+++ b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
@@ -110,9 +110,13 @@ export default mixins(workflowHelpers).extend({
 			this.showPreview = false;
 		},
 		scrollToTop() {
-			window.scrollTo({
-				top: 0,
-			});
+			const contentArea = document.getElementById('content');
+
+			if (contentArea) {
+				contentArea.scrollTo({
+					top: 0,
+				});
+			}
 		},
 	},
 	watch: {
diff --git a/packages/editor-ui/src/views/canvasHelpers.ts b/packages/editor-ui/src/views/canvasHelpers.ts
index 47893dd124d86..6d5c73aa5fd98 100644
--- a/packages/editor-ui/src/views/canvasHelpers.ts
+++ b/packages/editor-ui/src/views/canvasHelpers.ts
@@ -28,10 +28,11 @@ const MIN_X_TO_SHOW_OUTPUT_LABEL = 90;
 const MIN_Y_TO_SHOW_OUTPUT_LABEL = 100;
 
 export const NODE_SIZE = 100;
-export const DEFAULT_START_POSITION_X = 240;
-export const DEFAULT_START_POSITION_Y = 300;
+export const DEFAULT_START_POSITION_X = 175;
+export const DEFAULT_START_POSITION_Y = 235;
 export const HEADER_HEIGHT = 65;
 export const SIDEBAR_WIDTH = 65;
+export const SIDEBAR_WIDTH_EXPANDED = 200;
 export const MAX_X_TO_PUSH_DOWNSTREAM_NODES = 300;
 export const PUSH_NODES_OFFSET = NODE_SIZE * 2 + GRID_SIZE;
 const LOOPBACK_MINIMUM = 140;
@@ -612,9 +613,9 @@ export const addConnectionOutputSuccess = (connection: Connection, output: {tota
 };
 
 
-export const getZoomToFit = (nodes: INodeUi[], addComponentPadding = true): {offset: XYPosition, zoomLevel: number} => {
+export const getZoomToFit = (nodes: INodeUi[], isSidebarCollapsed: boolean, addComponentPadding = true): {offset: XYPosition, zoomLevel: number} => {
 	const {minX, minY, maxX, maxY} = getWorkflowCorners(nodes);
-	const sidebarWidth = addComponentPadding? SIDEBAR_WIDTH: 0;
+	const sidebarWidth = addComponentPadding? isSidebarCollapsed ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_EXPANDED : 0;
 	const headerHeight = addComponentPadding? HEADER_HEIGHT: 0;
 	const footerHeight = addComponentPadding? 200: 100;
 
@@ -637,7 +638,7 @@ export const getZoomToFit = (nodes: INodeUi[], addComponentPadding = true): {off
 
 	return {
 		zoomLevel,
-		offset: [xOffset, yOffset],
+		offset: [xOffset - sidebarWidth, yOffset - headerHeight],
 	};
 };
 

From 3b15c76eb28d70578f7564480a1466c5fdaf18c9 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 15 Sep 2022 15:36:35 +0200
Subject: [PATCH 02/39] =?UTF-8?q?=E2=9C=A8=20Moved=20'Workflows'=20=20menu?=
 =?UTF-8?q?=20to=20node=20view=20header.=20Added=20new=20dropdown=20compon?=
 =?UTF-8?q?ent=20for=20user=20area=20and=20the=20new=20WF=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/Interface.ts           |   9 +
 .../src/components/ActionDropdown.vue         |  98 ++++++
 .../components/MainHeader/WorkflowDetails.vue | 192 +++++++++++-
 .../editor-ui/src/components/MainSidebar.vue  | 295 ++----------------
 packages/editor-ui/src/constants.ts           |  10 +
 .../src/plugins/i18n/locales/en.json          |  14 +-
 packages/editor-ui/src/plugins/icons.ts       |   2 +
 7 files changed, 348 insertions(+), 272 deletions(-)
 create mode 100644 packages/editor-ui/src/components/ActionDropdown.vue

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index a752171ed8c3e..c3ca418bb5500 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1068,3 +1068,12 @@ export interface ITab {
 	align?: 'right';
 	tooltip?: string;
 }
+
+export interface IActionDropdownItem {
+	id: string,
+	label: string,
+	icon?: string,
+	divided?: boolean,
+	disabled?: boolean,
+	customClass?: string,
+}
diff --git a/packages/editor-ui/src/components/ActionDropdown.vue b/packages/editor-ui/src/components/ActionDropdown.vue
new file mode 100644
index 0000000000000..3b2e3d1d599c1
--- /dev/null
+++ b/packages/editor-ui/src/components/ActionDropdown.vue
@@ -0,0 +1,98 @@
+<template>
+	<div :class="['action-dropdown-container', $style.actionDropdownContainer]">
+		<el-dropdown :placement="placement" :trigger="trigger" @command="onSelect">
+			<div :class="$style.activator">
+				<n8n-icon :icon="activatorIcon"/>
+			</div>
+			<el-dropdown-menu slot="dropdown" :class="$style.userActionsMenu">
+				<el-dropdown-item
+					v-for="item in items"
+					:key="item.id"
+					:command="item.id"
+					:disabled="item.disabled"
+					:divided="item.divided"
+				>
+					<div :class="[$style.itemContainer, $style[item.customClass]]">
+						<span v-if="item.icon" :class="$style.icon">
+							<font-awesome-icon :icon="item.icon"/>
+						</span>
+						<span :class="$style.label">
+							{{ item.label }}
+						</span>
+					</div>
+				</el-dropdown-item>
+			</el-dropdown-menu>
+		</el-dropdown>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from "vue";
+import { IActionDropdownItem } from "@/Interface";
+
+export default Vue.extend({
+	name: 'ActionDropDown',
+	props: {
+		items: {
+			type: Array as PropType<IActionDropdownItem[]>,
+			required: true,
+		},
+		placement: {
+			type: String,
+			default: 'bottom',
+			validator: (value: string): boolean =>
+				['top', 'top-end', 'top-start', 'bottom', 'bottom-end', 'bottom-start'].includes(value),
+		},
+		activatorIcon: {
+			type: String,
+			default: 'ellipsis-v',
+		},
+		trigger: {
+			type: String,
+			default: 'click',
+			validator: (value: string): boolean =>
+				['click', 'hover'].includes(value),
+		},
+	},
+	methods: {
+		onSelect(action: string) : void {
+			this.$emit('select', action);
+		},
+	},
+});
+
+</script>
+
+<style lang="scss" module>
+
+.activator {
+	cursor: pointer;
+	padding: var(--spacing-2xs);
+	border-radius: var(--border-radius-base);
+	line-height: normal !important;
+
+	svg {
+		position: static !important;
+	}
+
+	&:hover {
+		background-color: var(--color-background-base);
+	}
+}
+
+.itemContainer {
+	display: flex;
+}
+
+.icon {
+	text-align: center;
+	margin-right: var(--spacing-2xs);
+
+	svg { width: 1.2em !important; }
+}
+
+.deleteItem {
+	color: var(--color-danger);
+}
+
+</style>
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index b4e61a8dc17b6..a435d84a58eef 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -70,6 +70,10 @@
 					:disabled="isWorkflowSaving"
 					@click="onSaveButtonClick"
 				/>
+				<div :class="$style.workflowMenuContainer">
+					<input :class="$style.hiddenInput" type="file" ref="importFile" @change="handleFileImport()">
+					<action-drop-down :items="workflowMenuItems" @select="onWorkflowMenuSelect"></action-drop-down>
+				</div>
 			</template>
 		</PushConnectionTracker>
 	</div>
@@ -79,7 +83,12 @@
 import Vue from "vue";
 import mixins from "vue-typed-mixins";
 import { mapGetters } from "vuex";
-import { MAX_WORKFLOW_NAME_LENGTH } from "@/constants";
+import {
+	DUPLICATE_MODAL_KEY,
+	MAX_WORKFLOW_NAME_LENGTH,
+	VIEWS, WORKFLOW_MENU_ACTIONS,
+	WORKFLOW_SETTINGS_MODAL_KEY
+} from "@/constants";
 
 import ShortenName from "@/components/ShortenName.vue";
 import TagsContainer from "@/components/TagsContainer.vue";
@@ -90,6 +99,12 @@ import SaveButton from "@/components/SaveButton.vue";
 import TagsDropdown from "@/components/TagsDropdown.vue";
 import InlineTextEdit from "@/components/InlineTextEdit.vue";
 import BreakpointsObserver from "@/components/BreakpointsObserver.vue";
+import ActionDropDown from "@/components/ActionDropdown.vue";
+import { IActionDropdownItem, IWorkflowDataUpdate, IWorkflowToShare } from "@/Interface";
+
+import { saveAs } from 'file-saver';
+import { MessageBoxInputData } from 'element-ui/types/message-box';
+import { titleChange } from "../mixins/titleChange";
 
 const hasChanged = (prev: string[], curr: string[]) => {
 	if (prev.length !== curr.length) {
@@ -100,9 +115,10 @@ const hasChanged = (prev: string[], curr: string[]) => {
 	return curr.reduce((accu, val) => accu || !set.has(val), false);
 };
 
-export default mixins(workflowHelpers).extend({
+export default mixins(workflowHelpers, titleChange).extend({
 	name: "WorkflowDetails",
 	components: {
+		ActionDropDown,
 		TagsContainer,
 		PushConnectionTracker,
 		ShortenName,
@@ -139,6 +155,42 @@ export default mixins(workflowHelpers).extend({
 		currentWorkflowId(): string {
 			return this.$route.params.name;
 		},
+		currentWorkflow (): string {
+			return this.$route.params.name;
+		},
+		workflowName (): string {
+			return this.$store.getters.workflowName;
+		},
+		workflowMenuItems(): IActionDropdownItem[] {
+			return [
+					{
+						id: WORKFLOW_MENU_ACTIONS.DUPLICATE,
+						label: this.$locale.baseText('menuActions.duplicate'),
+					},
+					{
+						id: WORKFLOW_MENU_ACTIONS.DOWNLOAD,
+						label: this.$locale.baseText('menuActions.download'),
+					},
+					{
+						id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL,
+						label: this.$locale.baseText('menuActions.importFromUrl'),
+					},
+					{
+						id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE,
+						label: this.$locale.baseText('menuActions.importFromFile'),
+					},
+					{
+						id: WORKFLOW_MENU_ACTIONS.SETTINGS,
+						label: this.$locale.baseText('generic.settings'),
+					},
+					{
+						id: WORKFLOW_MENU_ACTIONS.DELETE,
+						label: this.$locale.baseText('menuActions.delete'),
+						customClass: 'deleteItem',
+						divided: true,
+					},
+				];
+		},
 	},
 	methods: {
 		async onSaveButtonClick () {
@@ -220,6 +272,132 @@ export default mixins(workflowHelpers).extend({
 			}
 			cb(saved);
 		},
+		async handleFileImport(): Promise<void> {
+			const reader = new FileReader();
+			reader.onload = (event: ProgressEvent) => {
+				const data = (event.target as FileReader).result;
+
+				let workflowData: IWorkflowDataUpdate;
+				try {
+					workflowData = JSON.parse(data as string);
+				} catch (error) {
+					this.$showMessage({
+						title: this.$locale.baseText('mainSidebar.showMessage.handleFileImport.title'),
+						message: this.$locale.baseText('mainSidebar.showMessage.handleFileImport.message'),
+						type: 'error',
+					});
+					return;
+				}
+
+				this.$root.$emit('importWorkflowData', { data: workflowData });
+			};
+
+			const input = this.$refs.importFile as HTMLInputElement;
+			if (input !== null && input.files !== null && input.files.length !== 0) {
+				reader.readAsText(input!.files[0]!);
+			}
+		},
+		async onWorkflowMenuSelect(action: string): Promise<void> {
+			switch (action) {
+				case WORKFLOW_MENU_ACTIONS.DUPLICATE: {
+					this.$store.dispatch('ui/openModal', DUPLICATE_MODAL_KEY);
+					break;
+				}
+				case WORKFLOW_MENU_ACTIONS.DOWNLOAD: {
+					const workflowData = await this.getWorkflowDataToSave();
+					const {tags, ...data} = workflowData;
+					if (data.id && typeof data.id === 'string') {
+						data.id = parseInt(data.id, 10);
+					}
+
+					const exportData: IWorkflowToShare = {
+						...data,
+						meta: {
+							instanceId: this.$store.getters.instanceId,
+						},
+						tags: (tags || []).map(tagId => {
+							const {usageCount, ...tag} = this.$store.getters["tags/getTagById"](tagId);
+
+							return tag;
+						}),
+					};
+
+					const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+						type: 'application/json;charset=utf-8',
+					});
+
+					let workflowName = this.$store.getters.workflowName || 'unsaved_workflow';
+					workflowName = workflowName.replace(/[^a-z0-9]/gi, '_');
+
+					this.$telemetry.track('User exported workflow', { workflow_id: workflowData.id });
+					saveAs(blob, workflowName + '.json');
+					break;
+				}
+				case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL: {
+					try {
+						const promptResponse = await this.$prompt(
+						this.$locale.baseText('mainSidebar.prompt.workflowUrl') + ':',
+						this.$locale.baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':',
+						{
+							confirmButtonText: this.$locale.baseText('mainSidebar.prompt.import'),
+							cancelButtonText: this.$locale.baseText('mainSidebar.prompt.cancel'),
+							inputErrorMessage: this.$locale.baseText('mainSidebar.prompt.invalidUrl'),
+							inputPattern: /^http[s]?:\/\/.*\.json$/i,
+						},
+					) as MessageBoxInputData;
+
+					this.$root.$emit('importWorkflowUrl', { url: promptResponse.value });
+				} catch (e) {}
+					break;
+				}
+				case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE: {
+					(this.$refs.importFile as HTMLInputElement).click();
+					break;
+				}
+				case WORKFLOW_MENU_ACTIONS.SETTINGS: {
+					this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
+					break;
+				}
+				case WORKFLOW_MENU_ACTIONS.DELETE: {
+					const deleteConfirmed = await this.confirmMessage(
+						this.$locale.baseText(
+							'mainSidebar.confirmMessage.workflowDelete.message',
+							{ interpolate: { workflowName: this.workflowName } },
+						),
+						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
+						'warning',
+						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.confirmButtonText'),
+						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.cancelButtonText'),
+					);
+
+					if (deleteConfirmed === false) {
+						return;
+					}
+
+					try {
+						await this.restApi().deleteWorkflow(this.currentWorkflow);
+					} catch (error) {
+						this.$showError(
+							error,
+							this.$locale.baseText('mainSidebar.showError.stopExecution.title'),
+						);
+						return;
+					}
+					this.$store.commit('setStateDirty', false);
+					// Reset tab title since workflow is deleted.
+					this.$titleReset();
+					this.$showMessage({
+						title: this.$locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
+						type: 'success',
+					});
+
+					this.$router.push({ name: VIEWS.NEW_WORKFLOW });
+					break;
+				}
+				default:
+					break;
+			}
+		},
 	},
 	watch: {
 		currentWorkflowId() {
@@ -291,3 +469,13 @@ $--header-spacing: 20px;
 	align-items: center;
 }
 </style>
+
+<style module lang="scss">
+.workflowMenuContainer {
+	margin-left: var(--spacing-2xs);
+}
+
+.hiddenInput {
+	display: none;
+}
+</style>
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index dec10e14704e5..503b81e26729b 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -1,7 +1,5 @@
 <template>
 	<div id="side-menu" :class="['side-menu', $style.sideMenu]">
-		<input type="file" ref="importFile" style="display: none" v-on:change="handleFileImport()">
-
 		<div :class="$style.sideMenuWrapper">
 			<div
 				id="collapse-change-button"
@@ -11,7 +9,7 @@
 				<font-awesome-icon v-if="isCollapsed" icon="angle-right" :class="$style.iconCollapsed" />
 				<font-awesome-icon v-else icon="angle-left" :class="$style.iconExpanded" />
 			</div>
-			<n8n-menu default-active="workflow" @select="handleSelect" :collapse="isCollapsed">
+			<n8n-menu default-active="workflows" @select="handleSelect" :collapse="isCollapsed">
 				<div :class="$style.sideMenuFlexContainer">
 					<div :class="$style.sideMenuUpper">
 						<n8n-menu-item
@@ -26,73 +24,10 @@
 
 						<MenuItemsIterator :items="sidebarMenuTopItems" :root="true"/>
 
-						<el-submenu index="workflow" title="Workflow" popperClass="sidebar-popper">
-							<template slot="title">
-								<font-awesome-icon icon="network-wired"/>&nbsp;
-								<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.workflows') }}</span>
-							</template>
-
-							<n8n-menu-item index="workflow-new">
-								<template slot="title">
-									<font-awesome-icon icon="file"/>&nbsp;
-									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.new') }}</span>
-								</template>
-							</n8n-menu-item>
-							<n8n-menu-item v-if="isTemplatesEnabled" index="template-new">
-								<template slot="title">
-									<font-awesome-icon icon="box-open"/>&nbsp;
-									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.newTemplate') }}</span>
-								</template>
-							</n8n-menu-item>
-							<n8n-menu-item index="workflow-open">
-								<template slot="title">
-									<font-awesome-icon icon="folder-open"/>&nbsp;
-									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.open') }}</span>
-								</template>
-							</n8n-menu-item>
-							<n8n-menu-item index="workflow-save" :disabled="!onWorkflowPage">
-								<template slot="title">
-									<font-awesome-icon icon="save"/>
-									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.save') }}</span>
-								</template>
-							</n8n-menu-item>
-							<n8n-menu-item index="workflow-duplicate" :disabled="!onWorkflowPage || !currentWorkflow">
-								<template slot="title">
-									<font-awesome-icon icon="copy"/>
-									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.duplicate') }}</span>
-								</template>
-							</n8n-menu-item>
-							<n8n-menu-item index="workflow-delete" :disabled="!onWorkflowPage || !currentWorkflow">
-								<template slot="title">
-									<font-awesome-icon icon="trash"/>
-									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.delete') }}</span>
-								</template>
-							</n8n-menu-item>
-							<n8n-menu-item index="workflow-download" :disabled="!onWorkflowPage">
-								<template slot="title">
-									<font-awesome-icon icon="file-download"/>
-									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.download') }}</span>
-								</template>
-							</n8n-menu-item>
-							<n8n-menu-item index="workflow-import-url" :disabled="!onWorkflowPage">
-								<template slot="title">
-									<font-awesome-icon icon="cloud"/>
-									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.importFromUrl') }}</span>
-								</template>
-							</n8n-menu-item>
-							<n8n-menu-item index="workflow-import-file" :disabled="!onWorkflowPage">
-								<template slot="title">
-									<font-awesome-icon icon="hdd"/>
-									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.importFromFile') }}</span>
-								</template>
-							</n8n-menu-item>
-							<n8n-menu-item index="workflow-settings" :disabled="!onWorkflowPage || !currentWorkflow">
-								<template slot="title">
-									<font-awesome-icon icon="cog"/>
-									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.settings') }}</span>
-								</template>
-							</n8n-menu-item>
-						</el-submenu>
+						<n8n-menu-item v-if="isTemplatesEnabled" index="workflows">
+							<font-awesome-icon icon="network-wired"/>&nbsp;
+							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.workflows') }}</span>
+						</n8n-menu-item>
 
 						<n8n-menu-item v-if="isTemplatesEnabled" index="templates">
 							<font-awesome-icon icon="box-open"/>&nbsp;
@@ -173,16 +108,15 @@
 										</div>
 									</el-dropdown>
 									<div slot="title" :class="['item-title-root', $style.username ]" v-if="!isCollapsed">
-										<span>{{currentUser.fullName}}</span>
-										<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle">
-											<div :class="{[$style.userActions]: true, ['user-actions']: true }">
-												<n8n-icon icon="ellipsis-v" />
-												<el-dropdown-menu slot="dropdown" :class="$style.userActionsMenu">
-													<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
-													<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
-												</el-dropdown-menu>
-											</div>
-										</el-dropdown>
+										<span :title="currentUser.fullName">{{currentUser.fullName}}</span>
+										<div :class="{[$style.userActions]: true, ['user-actions']: true }">
+											<action-drop-down
+												:items="userMenuItems"
+												placement="top-start"
+												@select="onUserActionToggle"
+											>
+											</action-drop-down>
+										</div>
 									</div>
 								</n8n-menu-item>
 							</div>
@@ -196,19 +130,16 @@
 </template>
 
 <script lang="ts">
-
-import { MessageBoxInputData } from 'element-ui/types/message-box';
-
 import {
 	IExecutionResponse,
 	IWorkflowDataUpdate,
 	IMenuItem,
-	IWorkflowToShare,
 } from '../Interface';
 
 import ExecutionsList from '@/components/ExecutionsList.vue';
 import GiftNotificationIcon from './GiftNotificationIcon.vue';
 import WorkflowSettings from '@/components/WorkflowSettings.vue';
+import ActionDropDown from '@/components/ActionDropdown.vue';
 
 import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { restApi } from '@/components/mixins/restApi';
@@ -217,8 +148,6 @@ import { titleChange } from '@/components/mixins/titleChange';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 import { workflowRun } from '@/components/mixins/workflowRun';
 
-import { saveAs } from 'file-saver';
-
 import mixins from 'vue-typed-mixins';
 import { mapGetters } from 'vuex';
 import MenuItemsIterator from './MenuItemsIterator.vue';
@@ -226,14 +155,8 @@ import {
 	ABOUT_MODAL_KEY,
 	CREDENTIAL_LIST_MODAL_KEY,
 	CREDENTIAL_SELECT_MODAL_KEY,
-	DUPLICATE_MODAL_KEY,
-	MODAL_CANCEL,
-	MODAL_CLOSE,
-	MODAL_CONFIRMED,
 	TAGS_MANAGER_MODAL_KEY,
 	VERSIONS_MODAL_KEY,
-	WORKFLOW_SETTINGS_MODAL_KEY,
-	WORKFLOW_OPEN_MODAL_KEY,
 	EXECUTIONS_MODAL_KEY,
 	VIEWS,
 } from '@/constants';
@@ -251,6 +174,7 @@ export default mixins(
 	.extend({
 		name: 'MainSidebar',
 		components: {
+			ActionDropDown,
 			ExecutionsList,
 			GiftNotificationIcon,
 			WorkflowSettings,
@@ -261,6 +185,18 @@ export default mixins(
 				// @ts-ignore
 				basePath: this.$store.getters.getBaseUrl,
 				stopExecutionInProgress: false,
+				userMenuItems: [
+					{
+						id: 'settings',
+						icon: 'cog',
+						label: this.$locale.baseText('settings'),
+					},
+					{
+						id: 'logout',
+						icon: 'sign-out-alt',
+						label: this.$locale.baseText('auth.signout'),
+					},
+				],
 			};
 		},
 		computed: {
@@ -464,182 +400,15 @@ export default mixins(
 
 				this.$store.commit('ui/closeAllModals');
 			},
-			async handleFileImport () {
-				const reader = new FileReader();
-
-				reader.onload = (event: ProgressEvent) => {
-					const data = (event.target as FileReader).result;
-
-					let workflowData: IWorkflowDataUpdate;
-					try {
-						workflowData = JSON.parse(data as string);
-					} catch (error) {
-						this.$showMessage({
-							title: this.$locale.baseText('mainSidebar.showMessage.handleFileImport.title'),
-							message: this.$locale.baseText('mainSidebar.showMessage.handleFileImport.message'),
-							type: 'error',
-						});
-						return;
-					}
-
-					this.$root.$emit('importWorkflowData', { data: workflowData });
-				};
-
-				const input = this.$refs.importFile as HTMLInputElement;
-				if (input !== null && input.files !== null && input.files.length !== 0) {
-					reader.readAsText(input!.files[0]!);
-				}
-			},
 			async handleSelect (key: string, keyPath: string) {
-				if (key === 'workflow-open') {
-					this.$store.dispatch('ui/openModal', WORKFLOW_OPEN_MODAL_KEY);
-				} else if (key === 'workflow-import-file') {
-					(this.$refs.importFile as HTMLInputElement).click();
-				} else if (key === 'workflow-import-url') {
-					try {
-						const promptResponse = await this.$prompt(
-							this.$locale.baseText('mainSidebar.prompt.workflowUrl') + ':',
-							this.$locale.baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':',
-							{
-								confirmButtonText: this.$locale.baseText('mainSidebar.prompt.import'),
-								cancelButtonText: this.$locale.baseText('mainSidebar.prompt.cancel'),
-								inputErrorMessage: this.$locale.baseText('mainSidebar.prompt.invalidUrl'),
-								inputPattern: /^http[s]?:\/\/.*\.json$/i,
-							},
-						) as MessageBoxInputData;
-
-						this.$root.$emit('importWorkflowUrl', { url: promptResponse.value });
-					} catch (e) {}
-				} else if (key === 'workflow-delete') {
-					const deleteConfirmed = await this.confirmMessage(
-						this.$locale.baseText(
-							'mainSidebar.confirmMessage.workflowDelete.message',
-							{ interpolate: { workflowName: this.workflowName } },
-						),
-						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
-						'warning',
-						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.confirmButtonText'),
-						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.cancelButtonText'),
-					);
-
-					if (deleteConfirmed === false) {
-						return;
-					}
-
-					try {
-						await this.restApi().deleteWorkflow(this.currentWorkflow);
-					} catch (error) {
-						this.$showError(
-							error,
-							this.$locale.baseText('mainSidebar.showError.stopExecution.title'),
-						);
-						return;
-					}
-					this.$store.commit('setStateDirty', false);
-					// Reset tab title since workflow is deleted.
-					this.$titleReset();
-					this.$showMessage({
-						title: this.$locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
-						type: 'success',
-					});
-
-					this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-				} else if (key === 'workflow-download') {
-					const workflowData = await this.getWorkflowDataToSave();
-
-					const {tags, ...data} = workflowData;
-					if (data.id && typeof data.id === 'string') {
-						data.id = parseInt(data.id, 10);
-					}
-
-					const exportData: IWorkflowToShare = {
-						...data,
-						meta: {
-							instanceId: this.$store.getters.instanceId,
-						},
-						tags: (tags || []).map(tagId => {
-							const {usageCount, ...tag} = this.$store.getters["tags/getTagById"](tagId);
-
-							return tag;
-						}),
-					};
-
-					const blob = new Blob([JSON.stringify(exportData, null, 2)], {
-						type: 'application/json;charset=utf-8',
-					});
-
-
-					let workflowName = this.$store.getters.workflowName || 'unsaved_workflow';
-
-					workflowName = workflowName.replace(/[^a-z0-9]/gi, '_');
-
-					this.$telemetry.track('User exported workflow', { workflow_id: workflowData.id });
-
-					saveAs(blob, workflowName + '.json');
-				} else if (key === 'workflow-save') {
-					const saved = await this.saveCurrentWorkflow();
-					if (saved) this.$store.dispatch('settings/fetchPromptsData');
-				} else if (key === 'workflow-duplicate') {
-					this.$store.dispatch('ui/openModal', DUPLICATE_MODAL_KEY);
+				if (key === 'workflows') {
+					// TODO: Update once workflows view is implemented
+					this.$router.push({name: VIEWS.NEW_WORKFLOW}).catch(()=>{});
 				} else if (key === 'help-about') {
 					this.trackHelpItemClick('about');
 					this.$store.dispatch('ui/openModal', ABOUT_MODAL_KEY);
-				} else if (key === 'workflow-settings') {
-					this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
 				} else if (key === 'user') {
 					this.$router.push({name: VIEWS.PERSONAL_SETTINGS});
-				} else if (key === 'workflow-new') {
-					const result = this.$store.getters.getStateIsDirty;
-					if(result) {
-						const confirmModal = await this.confirmModal(
-							this.$locale.baseText('mainSidebar.confirmMessage.workflowNew.message'),
-							this.$locale.baseText('mainSidebar.confirmMessage.workflowNew.headline'),
-							'warning',
-							this.$locale.baseText('mainSidebar.confirmMessage.workflowNew.confirmButtonText'),
-							this.$locale.baseText('mainSidebar.confirmMessage.workflowNew.cancelButtonText'),
-							true,
-						);
-
-						if (confirmModal === MODAL_CONFIRMED) {
-							const saved = await this.saveCurrentWorkflow({}, false);
-							if (saved) this.$store.dispatch('settings/fetchPromptsData');
-
-							if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
-								this.$root.$emit('newWorkflow');
-							} else {
-								this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-							}
-
-							this.$showMessage({
-								title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
-								type: 'success',
-							});
-						} else if (confirmModal === MODAL_CANCEL) {
-							this.$store.commit('setStateDirty', false);
-							if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
-								this.$root.$emit('newWorkflow');
-							} else {
-								this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-							}
-
-							this.$showMessage({
-								title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
-								type: 'success',
-							});
-						} else if (confirmModal === MODAL_CLOSE) {
-							return;
-						}
-					} else {
-						if (this.$router.currentRoute.name !== VIEWS.NEW_WORKFLOW) {
-							this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-						}
-
-						this.$showMessage({
-							title: this.$locale.baseText('mainSidebar.showMessage.handleSelect3.title'),
-							type: 'success',
-						});
-					}
-					this.$titleReset();
 				} else if (key === 'templates' || key === 'template-new') {
 					if (this.$router.currentRoute.name !== VIEWS.TEMPLATES) {
 						this.$router.push({ name: VIEWS.TEMPLATES });
@@ -824,7 +593,7 @@ $--n8n-logo-text-color: #101330;
 	.username {
 		position: relative !important;
 		display: flex !important;
-		width: 68%;
+		width: 73%;
 		left: 13px !important;
 		justify-content: space-between;
 		color: var(--color-text-base);
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 423c6e18e6109..653b0093560cb 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -284,6 +284,7 @@ export enum VIEWS {
 	NOT_FOUND = "NotFoundView",
 	FAKE_DOOR = "ComingSoon",
 	COMMUNITY_NODES = "CommunityNodes",
+	WORKFLOWS = "WorkflowsView",
 }
 
 export enum FAKE_DOOR_FEATURES {
@@ -309,3 +310,12 @@ export const MAPPING_PARAMS = [`$evaluateExpression`, `$item`, `$jmespath`, `$no
 
 export const DEFAULT_STICKY_HEIGHT = 160;
 export const DEFAULT_STICKY_WIDTH = 240;
+
+export enum WORKFLOW_MENU_ACTIONS {
+	DUPLICATE = 'duplicate',
+	DOWNLOAD = 'download',
+	IMPORT_FROM_URL = 'import-from-url',
+	IMPORT_FROM_FILE = 'import-from-file',
+	SETTINGS = 'settings',
+	DELETE = 'delete',
+}
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index f33622bd92118..d82859efa92ce 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -20,6 +20,7 @@
 	"generic.beta": "beta",
 	"generic.yes": "Yes",
 	"generic.no": "No",
+	"generic.settings": "Settings",
 	"about.aboutN8n": "About n8n",
 	"about.close": "Close",
 	"about.license": "License",
@@ -296,17 +297,12 @@
 	"mainSidebar.confirmMessage.workflowNew.headline": "Save changes before leaving?",
 	"mainSidebar.confirmMessage.workflowNew.message": "If you don't save, you will lose your changes.",
 	"mainSidebar.credentials": "Credentials",
-	"mainSidebar.delete": "Delete",
-	"mainSidebar.download": "Download",
-	"mainSidebar.duplicate": "Duplicate",
 	"mainSidebar.executions": "Executions",
 	"mainSidebar.help": "Help",
 	"mainSidebar.helpMenuItems.course": "Course",
 	"mainSidebar.helpMenuItems.documentation": "Documentation",
 	"mainSidebar.helpMenuItems.forum": "Forum",
 	"mainSidebar.helpMenuItems.quickstart": "Quickstart",
-	"mainSidebar.importFromFile": "Import from File",
-	"mainSidebar.importFromUrl": "Import from URL",
 	"mainSidebar.new": "New",
 	"mainSidebar.newTemplate": "New from template",
 	"mainSidebar.open": "Open",
@@ -316,7 +312,6 @@
 	"mainSidebar.prompt.invalidUrl": "Invalid URL",
 	"mainSidebar.prompt.workflowUrl": "Workflow URL",
 	"mainSidebar.save": "@:_reusableBaseText.save",
-	"mainSidebar.settings": "Settings",
 	"mainSidebar.showError.stopExecution.title": "Problem stopping execution",
 	"mainSidebar.showMessage.handleFileImport.message": "The file does not contain valid JSON data",
 	"mainSidebar.showMessage.handleFileImport.title": "Could not import file",
@@ -326,6 +321,11 @@
 	"mainSidebar.showMessage.stopExecution.title": "Execution stopped",
 	"mainSidebar.templates": "Templates",
 	"mainSidebar.workflows": "Workflows",
+	"menuActions.duplicate": "Duplicate",
+	"menuActions.download": "Download",
+	"menuActions.importFromUrl": "Import from URL...",
+	"menuActions.importFromFile": "Import from File...",
+	"menuActions.delete": "Delete",
 	"multipleParameter.addItem": "Add item",
 	"multipleParameter.currentlyNoItemsExist": "Currently no items exist",
 	"multipleParameter.deleteItem": "Delete item",
@@ -1034,7 +1034,7 @@
 	"workflowSettings.saveManualOptions.yes": "Yes",
 	"workflowSettings.seconds": "seconds",
 	"workflowSettings.selectOption": "Select Option",
-	"workflowSettings.settingsFor": "Settings for {workflowName} (#{workflowId})",
+	"workflowSettings.settingsFor": "Workflow settings for {workflowName} (#{workflowId})",
 	"workflowSettings.showError.saveSettings1.errorMessage": "Timeout is activated but set to 0",
 	"workflowSettings.showError.saveSettings1.message": "There was a problem saving the settings",
 	"workflowSettings.showError.saveSettings1.title": "Problem saving settings",
diff --git a/packages/editor-ui/src/plugins/icons.ts b/packages/editor-ui/src/plugins/icons.ts
index 1c0e1237d1880..73d68636a5a4c 100644
--- a/packages/editor-ui/src/plugins/icons.ts
+++ b/packages/editor-ui/src/plugins/icons.ts
@@ -83,6 +83,7 @@ import {
 	faSearchPlus,
 	faServer,
 	faSignInAlt,
+	faSignOutAlt,
 	faSlidersH,
 	faSpinner,
 	faStop,
@@ -195,6 +196,7 @@ addIcon(faSearchMinus);
 addIcon(faSearchPlus);
 addIcon(faServer);
 addIcon(faSignInAlt);
+addIcon(faSignOutAlt);
 addIcon(faSlidersH);
 addIcon(faSpinner);
 addIcon(faSolidStickyNote);

From 4cc564a677299b6815be8e59b5728d6bfc37b58f Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 15 Sep 2022 16:09:16 +0200
Subject: [PATCH 03/39] =?UTF-8?q?=F0=9F=92=84=20Updating=20disabled=20stat?=
 =?UTF-8?q?es=20in=20new=20WF=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/Interface.ts                  | 12 ++++++------
 packages/editor-ui/src/components/ActionDropdown.vue | 12 +++++++++++-
 .../src/components/MainHeader/WorkflowDetails.vue    |  9 +++++++++
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index c3ca418bb5500..53497fbaffa68 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1070,10 +1070,10 @@ export interface ITab {
 }
 
 export interface IActionDropdownItem {
-	id: string,
-	label: string,
-	icon?: string,
-	divided?: boolean,
-	disabled?: boolean,
-	customClass?: string,
+	id: string;
+	label: string;
+	icon?: string;
+	divided?: boolean;
+	disabled?: boolean;
+	customClass?: string;
 }
diff --git a/packages/editor-ui/src/components/ActionDropdown.vue b/packages/editor-ui/src/components/ActionDropdown.vue
index 3b2e3d1d599c1..3740ebe26c82f 100644
--- a/packages/editor-ui/src/components/ActionDropdown.vue
+++ b/packages/editor-ui/src/components/ActionDropdown.vue
@@ -12,7 +12,11 @@
 					:disabled="item.disabled"
 					:divided="item.divided"
 				>
-					<div :class="[$style.itemContainer, $style[item.customClass]]">
+					<div :class="{
+						[$style.itemContainer]: true,
+						[$style.hasCustomStyling]: item.customClass !== undefined,
+						[$style[item.customClass]]: item.customClass !== undefined,
+					}">
 						<span v-if="item.icon" :class="$style.icon">
 							<font-awesome-icon :icon="item.icon"/>
 						</span>
@@ -91,6 +95,12 @@ export default Vue.extend({
 	svg { width: 1.2em !important; }
 }
 
+:global(li.is-disabled) {
+	.hasCustomStyling {
+		color: inherit !important;
+	}
+}
+
 .deleteItem {
 	color: var(--color-danger);
 }
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index a435d84a58eef..49f768d51e375 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -161,31 +161,40 @@ export default mixins(workflowHelpers, titleChange).extend({
 		workflowName (): string {
 			return this.$store.getters.workflowName;
 		},
+		onWorkflowPage(): boolean {
+			return this.$route.meta && this.$route.meta.nodeView;
+		},
 		workflowMenuItems(): IActionDropdownItem[] {
 			return [
 					{
 						id: WORKFLOW_MENU_ACTIONS.DUPLICATE,
 						label: this.$locale.baseText('menuActions.duplicate'),
+						disabled: !this.onWorkflowPage || !this.currentWorkflow,
 					},
 					{
 						id: WORKFLOW_MENU_ACTIONS.DOWNLOAD,
 						label: this.$locale.baseText('menuActions.download'),
+						disabled: !this.onWorkflowPage,
 					},
 					{
 						id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL,
 						label: this.$locale.baseText('menuActions.importFromUrl'),
+						disabled: !this.onWorkflowPage,
 					},
 					{
 						id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE,
 						label: this.$locale.baseText('menuActions.importFromFile'),
+						disabled: !this.onWorkflowPage,
 					},
 					{
 						id: WORKFLOW_MENU_ACTIONS.SETTINGS,
 						label: this.$locale.baseText('generic.settings'),
+						disabled: !this.onWorkflowPage || !this.currentWorkflow,
 					},
 					{
 						id: WORKFLOW_MENU_ACTIONS.DELETE,
 						label: this.$locale.baseText('menuActions.delete'),
+						disabled: !this.onWorkflowPage || !this.currentWorkflow,
 						customClass: 'deleteItem',
 						divided: true,
 					},

From 0150e04ee63a60f73b69e2264d8718b203f8f294 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 15 Sep 2022 17:26:34 +0200
Subject: [PATCH 04/39] =?UTF-8?q?=F0=9F=92=84=20Initial=20stab=20at=20new?=
 =?UTF-8?q?=20sidebar=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor-ui/src/components/MainSidebar.vue  | 141 ++++++++++--------
 1 file changed, 80 insertions(+), 61 deletions(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 503b81e26729b..1503ecd6c7b4d 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -110,12 +110,7 @@
 									<div slot="title" :class="['item-title-root', $style.username ]" v-if="!isCollapsed">
 										<span :title="currentUser.fullName">{{currentUser.fullName}}</span>
 										<div :class="{[$style.userActions]: true, ['user-actions']: true }">
-											<action-drop-down
-												:items="userMenuItems"
-												placement="top-start"
-												@select="onUserActionToggle"
-											>
-											</action-drop-down>
+											<action-drop-down :items="userMenuItems" placement="top-start" @select="onUserActionToggle" />
 										</div>
 									</div>
 								</n8n-menu-item>
@@ -188,12 +183,10 @@ export default mixins(
 				userMenuItems: [
 					{
 						id: 'settings',
-						icon: 'cog',
 						label: this.$locale.baseText('settings'),
 					},
 					{
 						id: 'logout',
-						icon: 'sign-out-alt',
 						label: this.$locale.baseText('auth.signout'),
 					},
 				],
@@ -508,6 +501,7 @@ $--n8n-logo-text-color: #101330;
 	flex-direction: column;
 	justify-content: space-between;
 	height: 100%;
+	padding: 0 var(--spacing-2xs);
 }
 
 .logoItem {
@@ -578,6 +572,7 @@ $--n8n-logo-text-color: #101330;
 	position: relative;
 	border-top: var(--border-width-base) var(--border-style-base) var(--color-foreground-light);
 	cursor: default;
+	padding: 8px 12px !important;
 
 	&:hover {
 		background-color: unset;
@@ -596,6 +591,7 @@ $--n8n-logo-text-color: #101330;
 		width: 73%;
 		left: 13px !important;
 		justify-content: space-between;
+		align-items: center;
 		color: var(--color-text-base);
 		font-weight: var(--font-weight-bold);
 		font-size: var(--font-size-xs);
@@ -650,69 +646,92 @@ $--n8n-logo-text-color: #101330;
 }
 
 #side-menu {
-	// Menu
-	.el-menu--vertical,
 	.el-menu {
-		border: none;
-		font-size: 14px;
+		--menu-item-active-background-color: var(--color-foreground-base);
+		--menu-item-active-font-color: var(--color-text-dark);
 		--menu-item-hover-fill: var(--color-foreground-base);
+		--menu-item-hover-font-color: var(--color-text-dark);
 
-		.el-menu--popup,
-		.el-menu--inline {
-			font-size: 0.9em;
-			li.el-menu-item {
-				height: 35px;
-				line-height: 35px;
-				color: $--custom-dialog-text-color;
-			}
+		.el-icon-arrow-down:hover {
+			color: var(--color-primary);
 		}
 
-		.el-menu-item,
-		.el-submenu__title {
-			display: flex;
-			align-items: center;
-			color: var(--color-text-dark);
-			font-size: 1.2em;
-			.el-submenu__icon-arrow {
-				color: var(--color-text-dark);
-				font-weight: 800;
-				font-size: 1em;
-			}
-			.svg-inline--fa {
-				position: relative;
-				right: -3px;
-			}
-			.item-title {
-				position: absolute;
-				left: 56px;
-				font-size: var(--font-size-s);
-			}
-			.item-title-root {
-				position: absolute;
-				left: 60px;
-				top: 1px;
-			}
+		.el-menu-item, .el-submenu__title {
+			margin: 8px 0;
+			border-radius: var(--border-radius-base);
+			line-height: normal;
+			padding: 8px 12px;
+			height: auto;
 		}
 
-		.el-menu--inline {
-			.el-menu-item {
-				padding-left: 30px!important;
-			}
+		.svg-inline--fa {
+			margin-right: 12px;
 		}
 
 	}
-
-	.el-menu-item {
-		min-width: 200px;
-		a {
-			color: var(--color-text-base);
-
-			&.primary-item {
-				color: $--color-primary;
-				vertical-align: baseline;
-			}
-		}
-	}
+	// Menu
+	// .el-menu--vertical,
+	// .el-menu {
+	// 	border: none;
+	// 	font-size: 14px;
+	// 	--menu-item-hover-fill: var(--color-foreground-base);
+
+	// 	.el-menu--popup,
+	// 	.el-menu--inline {
+	// 		font-size: 0.9em;
+	// 		li.el-menu-item {
+	// 			height: 35px;
+	// 			line-height: 35px;
+	// 			color: $--custom-dialog-text-color;
+	// 		}
+	// 	}
+
+	// 	.el-menu-item,
+	// 	.el-submenu__title {
+	// 		display: flex;
+	// 		align-items: center;
+	// 		color: var(--color-text-dark);
+	// 		font-size: 1.2em;
+	// 		.el-submenu__icon-arrow {
+	// 			color: var(--color-text-dark);
+	// 			font-weight: 800;
+	// 			font-size: 1em;
+	// 		}
+	// 		.svg-inline--fa {
+	// 			position: relative;
+	// 			right: -3px;
+	// 		}
+	// 		.item-title {
+	// 			position: absolute;
+	// 			left: 56px;
+	// 			font-size: var(--font-size-s);
+	// 		}
+	// 		.item-title-root {
+	// 			position: absolute;
+	// 			left: 60px;
+	// 			top: 1px;
+	// 		}
+	// 	}
+
+	// 	.el-menu--inline {
+	// 		.el-menu-item {
+	// 			padding-left: 30px!important;
+	// 		}
+	// 	}
+
+	// }
+
+	// .el-menu-item {
+	// 	min-width: 200px;
+	// 	a {
+	// 		color: var(--color-text-base);
+
+	// 		&.primary-item {
+	// 			color: $--color-primary;
+	// 			vertical-align: baseline;
+	// 		}
+	// 	}
+	// }
 }
 
 .el-menu--collapse .el-submenu .el-submenu__title span,

From 1a9962131c16dea080c0fe98e057c9e8ba052d5a Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Fri, 16 Sep 2022 17:59:12 +0200
Subject: [PATCH 05/39] =?UTF-8?q?=E2=9C=A8=20Finished=20main=20navigation?=
 =?UTF-8?q?=20restyling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ActionDropdown.vue         |   1 +
 .../src/components/GiftNotificationIcon.vue   |   7 +-
 .../editor-ui/src/components/MainSidebar.vue  | 344 +++++++++---------
 packages/editor-ui/src/views/NodeView.vue     |   2 +-
 4 files changed, 184 insertions(+), 170 deletions(-)

diff --git a/packages/editor-ui/src/components/ActionDropdown.vue b/packages/editor-ui/src/components/ActionDropdown.vue
index 3740ebe26c82f..6e3217c24b998 100644
--- a/packages/editor-ui/src/components/ActionDropdown.vue
+++ b/packages/editor-ui/src/components/ActionDropdown.vue
@@ -70,6 +70,7 @@ export default Vue.extend({
 <style lang="scss" module>
 
 .activator {
+	width: 2em;
 	cursor: pointer;
 	padding: var(--spacing-2xs);
 	border-radius: var(--border-radius-base);
diff --git a/packages/editor-ui/src/components/GiftNotificationIcon.vue b/packages/editor-ui/src/components/GiftNotificationIcon.vue
index e10fa9c5aebea..ba861c9716655 100644
--- a/packages/editor-ui/src/components/GiftNotificationIcon.vue
+++ b/packages/editor-ui/src/components/GiftNotificationIcon.vue
@@ -12,6 +12,10 @@
   display: flex;
   position: relative;
 
+	svg {
+		margin-right: 0 !important;
+	}
+
   .notification {
     height: .47em;
     width: .47em;
@@ -30,7 +34,8 @@
       width: .36em;
       background-color: $--gift-notification-inner-color;
       border-radius: 50%;
+
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 1503ecd6c7b4d..ddc079221f445 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -1,5 +1,9 @@
 <template>
-	<div id="side-menu" :class="['side-menu', $style.sideMenu]">
+	<div id="side-menu" :class="{
+		['side-menu']: true,
+		[$style.sideMenu]: true,
+		[$style.sideMenuCollapsed]: isCollapsed
+	}">
 		<div :class="$style.sideMenuWrapper">
 			<div
 				id="collapse-change-button"
@@ -10,22 +14,22 @@
 				<font-awesome-icon v-else icon="angle-left" :class="$style.iconExpanded" />
 			</div>
 			<n8n-menu default-active="workflows" @select="handleSelect" :collapse="isCollapsed">
+				<n8n-menu-item
+					index="logo"
+					:class="{[$style.logoItem]: true, [$style.logoItemCollapsed]: isCollapsed}"
+				>
+					<a href="https://n8n.io" target="_blank" :class="$style['logo-link']">
+						<img v-if="isCollapsed" :src="basePath + 'n8n-logo-collapsed.svg'" :class="$style['icon']" alt="n8n"/>
+						<img v-else :src="basePath + 'n8n-logo-expanded.svg'" :class="$style['icon']" alt="n8n"/>
+					</a>
+				</n8n-menu-item>
 				<div :class="$style.sideMenuFlexContainer">
 					<div :class="$style.sideMenuUpper">
-						<n8n-menu-item
-							index="logo"
-							:class="{[$style.logoItem]: true, [$style.logoItemCollapsed]: isCollapsed}"
-						>
-							<a href="https://n8n.io" target="_blank" :class="$style['logo-link']">
-								<img v-if="isCollapsed" :src="basePath + 'n8n-logo-collapsed.svg'" :class="$style['icon']" alt="n8n"/>
-								<img v-else :src="basePath + 'n8n-logo-expanded.svg'" :class="$style['icon']" alt="n8n"/>
-							</a>
-						</n8n-menu-item>
 
 						<MenuItemsIterator :items="sidebarMenuTopItems" :root="true"/>
 
-						<n8n-menu-item v-if="isTemplatesEnabled" index="workflows">
-							<font-awesome-icon icon="network-wired"/>&nbsp;
+						<n8n-menu-item index="workflows">
+							<font-awesome-icon icon="network-wired"/>
 							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.workflows') }}</span>
 						</n8n-menu-item>
 
@@ -95,26 +99,24 @@
 									{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available
 								</span>
 							</n8n-menu-item>
-							<div ref="user" v-if="showUserArea">
-								<n8n-menu-item :class="$style.userSubmenu">
-									<!-- This dropdown is only enabled when sidebar is collapsed -->
-									<el-dropdown :disabled="!isCollapsed" placement="right-end" trigger="click" @command="onUserActionToggle">
-										<div :class="{[$style.avatar]: true, ['clickable']: isCollapsed }">
-											<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
-											<el-dropdown-menu slot="dropdown">
-												<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
-												<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
-											</el-dropdown-menu>
-										</div>
-									</el-dropdown>
-									<div slot="title" :class="['item-title-root', $style.username ]" v-if="!isCollapsed">
-										<span :title="currentUser.fullName">{{currentUser.fullName}}</span>
-										<div :class="{[$style.userActions]: true, ['user-actions']: true }">
-											<action-drop-down :items="userMenuItems" placement="top-start" @select="onUserActionToggle" />
-										</div>
+							<n8n-menu-item v-if="showUserArea" :class="$style.userSubmenu">
+								<!-- This dropdown is only enabled when sidebar is collapsed -->
+								<el-dropdown :disabled="!isCollapsed" placement="right-end" trigger="click" @command="onUserActionToggle">
+									<div :class="{[$style.avatar]: true, ['clickable']: isCollapsed }">
+										<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
+										<el-dropdown-menu slot="dropdown">
+											<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
+											<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
+										</el-dropdown-menu>
+									</div>
+								</el-dropdown>
+								<div slot="title" :class="['item-title-root', $style.username ]" v-if="!isCollapsed">
+									<span :title="currentUser.fullName">{{currentUser.fullName}}</span>
+									<div :class="{[$style.userActions]: true, ['user-actions']: true }">
+										<action-drop-down :items="userMenuItems" placement="top-start" @select="onUserActionToggle" />
 									</div>
-								</n8n-menu-item>
-							</div>
+								</div>
+							</n8n-menu-item>
 						</div>
 					</div>
 				</div>
@@ -456,17 +458,129 @@ export default mixins(
 	});
 </script>
 
+<style lang="scss">
+.sidebar-popper{
+	.el-menu-item {
+		--menu-item-height: 35px;
+		--submenu-item-height: 27px;
+		--menu-item-hover-fill: var(--color-foreground-base);
+		border-radius: var(--border-radius-base);
+		margin: 0 8px;
+
+		.item-title {
+			position: absolute;
+			left: 55px;
+		}
+
+		.svg-inline--fa {
+			color: var(--color-text-light);
+			position: relative;
+			right: -3px;
+		}
+
+		&:hover {
+			.svg-inline--fa {
+				color: var(--color-text-dark);
+			}
+		}
+	}
+}
+
+#side-menu {
+	.el-menu {
+		--menu-item-active-background-color: var(--color-foreground-base);
+		--menu-item-active-font-color: var(--color-text-dark);
+		--menu-item-hover-fill: var(--color-foreground-base);
+		--menu-item-hover-font-color: var(--color-text-dark);
+		--menu-item-height: 35px;
+		--submenu-item-height: 27px;
+
+		.el-icon-arrow-down {
+			right: 15px;
+
+			&:hover {
+				color: var(--color-primary);
+			}
+		}
+
+		.el-menu-item:hover, .el-submenu__title:hover, .el-menu-item.is-active {
+			svg {
+				color: var(--color-text-dark);
+			}
+		}
+
+		.el-menu-item, .el-menu-item .el-tooltip, .el-submenu__title {
+			padding: 0 12px !important;
+		}
+		.el-menu-item, .el-submenu__title {
+			margin: 8px 0;
+			border-radius: var(--border-radius-base);
+			user-select: none;
+
+			.item-title-root {
+				position: absolute;
+				left: 45px;
+			}
+
+			svg {
+				color: var(--color-text-light);
+			}
+		}
+
+		.el-submenu {
+			.el-menu-item {
+				height: var(--menu-item-height);
+				line-height: var(--menu-item-height);
+				padding-left: 24px !important;
+				min-width: auto;
+			}
+
+			.el-menu .el-menu-item {
+				height: var(--submenu-item-height);
+				margin: 4px 0 !important;
+
+				.item-title {
+					position: absolute;
+					left: 55px;
+				}
+			}
+
+		}
+
+		.svg-inline--fa {
+			margin-right: 15px;
+			position: relative;
+			left: 3px;
+		}
+
+	}
+}
+
+.el-menu--collapse .el-submenu .el-submenu__title span,
+.el-menu--collapse .el-submenu__icon-arrow {
+	display: none;
+}
+
+</style>
+
 <style lang="scss" module>
 
 $--n8n-logo-text-color: #101330;
 
 .sideMenu {
 	height: 100%;
+
+	&.sideMenuCollapsed {
+		.userSubmenu::before {
+			width: 136%;
+		}
+	}
 }
 
 .sideMenuWrapper {
 	height: 100%;
 	position: relative;
+	border: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
 	ul { height: 100%; }
 }
 
@@ -500,7 +614,10 @@ $--n8n-logo-text-color: #101330;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
-	height: 100%;
+	height: calc(100% - $--header-height);
+}
+
+.sideMenuUpper, .sideMenuLower {
 	padding: 0 var(--spacing-2xs);
 }
 
@@ -509,10 +626,17 @@ $--n8n-logo-text-color: #101330;
 	justify-content: space-between;
 	height: $--header-height;
 	line-height: $--header-height;
+	margin: 0 !important;
+	border-radius: 0 !important;
+	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-background-xlight);
 	&:hover { background-color: initial; }
 
 	* { vertical-align: middle; }
-	.icon { height: 18px; }
+	.icon {
+		height: 18px;
+		position: relative;
+		left: 2px;
+	}
 
 	.logoText {
 		position: relative;
@@ -549,10 +673,7 @@ $--n8n-logo-text-color: #101330;
 	color: $--sidebar-inactive-color !important;
 
 	.updatesLabel {
-		position: relative !important;
 		font-size: var(--font-size-xs);
-		top: 0 !important;
-		left: -2px !important;
 	}
 
 	&:hover {
@@ -570,47 +691,59 @@ $--n8n-logo-text-color: #101330;
 
 .userSubmenu {
 	position: relative;
-	border-top: var(--border-width-base) var(--border-style-base) var(--color-foreground-light);
 	cursor: default;
 	padding: 8px 12px !important;
+	margin: 0 !important;
+
+	&::before {
+		width: 109%;
+		border-top: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+		content: "";
+		position: absolute;
+		top: 0;
+		left: -9px;
+	}
 
 	&:hover {
 		background-color: unset;
 	}
 
 	.avatar {
+		position: relative;
+		left: -4px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		padding-top: 12px;
 		cursor: default;
 	}
 
 	.username {
 		position: relative !important;
 		display: flex !important;
-		width: 73%;
-		left: 13px !important;
+		left: 4px !important;
 		justify-content: space-between;
 		align-items: center;
 		color: var(--color-text-base);
 		font-weight: var(--font-weight-bold);
-		font-size: var(--font-size-xs);
+		font-size: var(--font-size-2xs);
+		padding-top: 12px;
 		cursor: default;
 
 		span {
-			width: 100px;
+			width: 104px;
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
 	}
 
 	.userActions {
-		position: relative;
-		left: 10px;
 		cursor: pointer;
 
 		&:hover {
 			color: var(--color-primary);
+
+			svg { color: initial; }
 		}
 	}
 }
@@ -623,128 +756,3 @@ $--n8n-logo-text-color: #101330;
 	.helpMenu { display: none; }
 }
 </style>
-
-<style lang="scss">
-.sidebar-popper{
-	.el-menu-item {
-		font-size: 0.9em;
-		height: 35px;
-		line-height: 35px;
-		color: $--custom-dialog-text-color;
-		--menu-item-hover-fill: var(--color-foreground-base);
-
-		.item-title {
-			position: absolute;
-			left: 55px;
-		}
-
-		.svg-inline--fa {
-			position: relative;
-			right: -3px;
-		}
-	}
-}
-
-#side-menu {
-	.el-menu {
-		--menu-item-active-background-color: var(--color-foreground-base);
-		--menu-item-active-font-color: var(--color-text-dark);
-		--menu-item-hover-fill: var(--color-foreground-base);
-		--menu-item-hover-font-color: var(--color-text-dark);
-
-		.el-icon-arrow-down:hover {
-			color: var(--color-primary);
-		}
-
-		.el-menu-item, .el-submenu__title {
-			margin: 8px 0;
-			border-radius: var(--border-radius-base);
-			line-height: normal;
-			padding: 8px 12px;
-			height: auto;
-		}
-
-		.svg-inline--fa {
-			margin-right: 12px;
-		}
-
-	}
-	// Menu
-	// .el-menu--vertical,
-	// .el-menu {
-	// 	border: none;
-	// 	font-size: 14px;
-	// 	--menu-item-hover-fill: var(--color-foreground-base);
-
-	// 	.el-menu--popup,
-	// 	.el-menu--inline {
-	// 		font-size: 0.9em;
-	// 		li.el-menu-item {
-	// 			height: 35px;
-	// 			line-height: 35px;
-	// 			color: $--custom-dialog-text-color;
-	// 		}
-	// 	}
-
-	// 	.el-menu-item,
-	// 	.el-submenu__title {
-	// 		display: flex;
-	// 		align-items: center;
-	// 		color: var(--color-text-dark);
-	// 		font-size: 1.2em;
-	// 		.el-submenu__icon-arrow {
-	// 			color: var(--color-text-dark);
-	// 			font-weight: 800;
-	// 			font-size: 1em;
-	// 		}
-	// 		.svg-inline--fa {
-	// 			position: relative;
-	// 			right: -3px;
-	// 		}
-	// 		.item-title {
-	// 			position: absolute;
-	// 			left: 56px;
-	// 			font-size: var(--font-size-s);
-	// 		}
-	// 		.item-title-root {
-	// 			position: absolute;
-	// 			left: 60px;
-	// 			top: 1px;
-	// 		}
-	// 	}
-
-	// 	.el-menu--inline {
-	// 		.el-menu-item {
-	// 			padding-left: 30px!important;
-	// 		}
-	// 	}
-
-	// }
-
-	// .el-menu-item {
-	// 	min-width: 200px;
-	// 	a {
-	// 		color: var(--color-text-base);
-
-	// 		&.primary-item {
-	// 			color: $--color-primary;
-	// 			vertical-align: baseline;
-	// 		}
-	// 	}
-	// }
-}
-
-.el-menu--collapse .el-submenu .el-submenu__title span,
-.el-menu--collapse .el-submenu__icon-arrow {
-  height: 0;
-  width: 0;
-  overflow: hidden;
-  visibility: hidden;
-  display: inline-block;
-}
-
-
-.el-menu--collapse .el-menu-item {
-	min-width: auto !important;
-}
-</style>
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index bedf721452a97..c2c56e1b75bea 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -3212,7 +3212,7 @@ export default mixins(
 <style scoped lang="scss">
 
 .zoom-menu {
-	$--zoom-menu-margin: 5;
+	$--zoom-menu-margin: 15;
 
 	position: fixed;
 	left: $--sidebar-width + $--zoom-menu-margin;

From cd3db90aa8ed94efd935ab5c2a8824b68f21f5d8 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Mon, 19 Sep 2022 10:33:26 +0200
Subject: [PATCH 06/39] =?UTF-8?q?=E2=9C=A8=20Updating=20`zoomToFit`=20and?=
 =?UTF-8?q?=20centering=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/views/canvasHelpers.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/views/canvasHelpers.ts b/packages/editor-ui/src/views/canvasHelpers.ts
index 6d5c73aa5fd98..8d8b8b9708f08 100644
--- a/packages/editor-ui/src/views/canvasHelpers.ts
+++ b/packages/editor-ui/src/views/canvasHelpers.ts
@@ -477,7 +477,17 @@ export const getRelativePosition = (x: number, y: number, scale: number, offset:
 };
 
 export const getMidCanvasPosition = (scale: number, offset: XYPosition): XYPosition => {
-	return getRelativePosition((window.innerWidth - SIDEBAR_WIDTH) / 2, (window.innerHeight - HEADER_HEIGHT) / 2, scale, offset);
+	let contentWidth = window.innerWidth;
+	let contentHeight = window.innerHeight;
+	const contentElement = document.getElementById('content');
+
+	if (contentElement) {
+		const contentBounds = contentElement.getBoundingClientRect();
+		contentWidth = contentBounds.width;
+		contentHeight = contentBounds.height;
+	}
+
+	return getRelativePosition((contentWidth - SIDEBAR_WIDTH) / 2, (contentHeight - HEADER_HEIGHT) / 2, scale, offset);
 };
 
 export const getBackgroundStyles = (scale: number, offsetPosition: XYPosition) => {
@@ -630,7 +640,7 @@ export const getZoomToFit = (nodes: INodeUi[], isSidebarCollapsed: boolean, addC
 	const scaleY = editorHeight / diffY;
 
 	const zoomLevel = Math.min(scaleX, scaleY, 1);
-	let xOffset = (minX * -1) * zoomLevel + sidebarWidth; // find top right corner
+	let xOffset = (minX * -1) * zoomLevel + SIDEBAR_WIDTH; // find top right corner
 	xOffset += (editorWidth - sidebarWidth - (maxX - minX) * zoomLevel) / 2; // add padding to center workflow
 
 	let yOffset = (minY * -1) * zoomLevel + headerHeight; // find top right corner

From 2d80d1d02d9344aedb2f84a35390bbd988f81434 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Mon, 19 Sep 2022 11:58:21 +0200
Subject: [PATCH 07/39] =?UTF-8?q?=E2=9C=A8=20Adding=20updates=20menu=20ite?=
 =?UTF-8?q?m=20to=20settings=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor-ui/src/components/MainSidebar.vue  |  7 +++
 .../src/components/SettingsSidebar.vue        | 49 ++++++++++++++++++-
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index ddc079221f445..71ab6271d06e7 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -689,6 +689,13 @@ $--n8n-logo-text-color: #101330;
 	}
 }
 
+.helpMenu {
+	svg {
+		position: relative;
+		left: 4px !important;
+	}
+}
+
 .userSubmenu {
 	position: relative;
 	cursor: default;
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index c90984969d8ee..a6151348dcf65 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -42,6 +42,14 @@
 				</i>
 				<span slot="title">{{ $locale.baseText('settings.communityNodes') }}</span>
 			</n8n-menu-item>
+			<n8n-menu-item :class="$style.updatesSubmenu" v-if="hasVersionUpdates" @click="openUpdatesPanel">
+				<div :class="$style.giftContainer">
+					<GiftNotificationIcon />
+				</div>
+				<span slot="title" :class="['item-title-root', $style.updatesLabel]">
+					{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available
+				</span>
+			</n8n-menu-item>
 		</n8n-menu>
 		<div :class="$style.versionContainer">
 			<n8n-link @click="onVersionClick" size="small">
@@ -54,16 +62,24 @@
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
 import { mapGetters } from 'vuex';
-import { ABOUT_MODAL_KEY, VIEWS } from '@/constants';
+import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
 import { userHelpers } from './mixins/userHelpers';
 import { IFakeDoor } from '@/Interface';
+import GiftNotificationIcon from './GiftNotificationIcon.vue';
 
 export default mixins(
 	userHelpers,
 ).extend({
 	name: 'SettingsSidebar',
+	components: {
+		GiftNotificationIcon,
+	},
 	computed: {
 		...mapGetters('settings', ['versionCli']),
+		...mapGetters('versions', [
+			'hasVersionUpdates',
+			'nextVersions',
+		]),
 		settingsFakeDoorFeatures(): IFakeDoor[] {
 			return this.$store.getters['ui/getFakeDoorByLocation']('settings');
 		},
@@ -87,6 +103,9 @@ export default mixins(
 		onReturn() {
 			this.$router.push({name: VIEWS.HOMEPAGE});
 		},
+		openUpdatesPanel() {
+			this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
+		},
 	},
 });
 </script>
@@ -99,6 +118,10 @@ export default mixins(
 	border-right: var(--border-base);
 	position: relative;
 	padding: var(--spacing-s);
+
+	ul {
+		height: 100%;
+	}
 }
 
 .tab {
@@ -131,6 +154,30 @@ export default mixins(
 	margin-right: 10px;
 }
 
+.updatesSubmenu {
+	position: absolute;
+	bottom: 25px;
+	color: $--sidebar-inactive-color !important;
+
+	.updatesLabel {
+		position: relative;
+		left: 10px;
+		font-size: var(--font-size-xs);
+	}
+
+	&:hover {
+		// color: $--sidebar-active-color;
+	}
+
+	.giftContainer {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		height: 100%;
+		width: 100%;
+	}
+}
+
 .versionContainer {
 	position: absolute;
 	left: 20px;

From e80827e675ea501eb3d9e7fc6b2d68bda8f19845 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Mon, 19 Sep 2022 16:15:35 +0200
Subject: [PATCH 08/39] =?UTF-8?q?=F0=9F=92=84=20Adding=20updates=20item=20?=
 =?UTF-8?q?to=20the=20settings=20sidebar=20and=20final=20touches=20on=20ma?=
 =?UTF-8?q?in=20sidebar=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ActionDropdown.vue         |   1 +
 .../src/components/MainHeader/MainHeader.vue  |   2 +-
 .../editor-ui/src/components/MainSidebar.vue  | 100 ++++++++++--------
 .../src/components/SettingsSidebar.vue        |   6 +-
 4 files changed, 58 insertions(+), 51 deletions(-)

diff --git a/packages/editor-ui/src/components/ActionDropdown.vue b/packages/editor-ui/src/components/ActionDropdown.vue
index 6e3217c24b998..25819ed42b9a4 100644
--- a/packages/editor-ui/src/components/ActionDropdown.vue
+++ b/packages/editor-ui/src/components/ActionDropdown.vue
@@ -82,6 +82,7 @@ export default Vue.extend({
 
 	&:hover {
 		background-color: var(--color-background-base);
+		color: initial !important;
 	}
 }
 
diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
index e222dd9871e87..6aa89e07a0851 100644
--- a/packages/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -59,7 +59,7 @@ export default mixins(
 	height: 65px;
 	width: 100%;
 	box-sizing: border-box;
-
+	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
 }
 
 .top-menu {
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 71ab6271d06e7..64edc9ddf6d4b 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -10,10 +10,10 @@
 				:class="['clickable', $style.sideMenuCollapseButton]"
 				@click="toggleCollapse"
 			>
-				<font-awesome-icon v-if="isCollapsed" icon="angle-right" :class="$style.iconCollapsed" />
-				<font-awesome-icon v-else icon="angle-left" :class="$style.iconExpanded" />
+				<span v-if="isCollapsed" :class="$style.iconCollapsed">›</span>
+				<span v-else :class="$style.iconExpanded">‹</span>
 			</div>
-			<n8n-menu default-active="workflows" @select="handleSelect" :collapse="isCollapsed">
+			<n8n-menu default-active="workflow" @select="handleSelect" :collapse="isCollapsed">
 				<n8n-menu-item
 					index="logo"
 					:class="{[$style.logoItem]: true, [$style.logoItemCollapsed]: isCollapsed}"
@@ -28,7 +28,7 @@
 
 						<MenuItemsIterator :items="sidebarMenuTopItems" :root="true"/>
 
-						<n8n-menu-item index="workflows">
+						<n8n-menu-item index="workflows" @click="openWorkflowsModal">
 							<font-awesome-icon icon="network-wired"/>
 							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.workflows') }}</span>
 						</n8n-menu-item>
@@ -38,25 +38,10 @@
 							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.templates') }}</span>
 						</n8n-menu-item>
 
-						<el-submenu index="credentials" :title="$locale.baseText('mainSidebar.credentials')" popperClass="sidebar-popper">
-							<template slot="title">
-								<font-awesome-icon icon="key"/>&nbsp;
-								<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.credentials') }}</span>
-							</template>
-
-							<n8n-menu-item index="credentials-new">
-								<template slot="title">
-									<font-awesome-icon icon="file"/>
-									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.new') }}</span>
-								</template>
-							</n8n-menu-item>
-							<n8n-menu-item index="credentials-open">
-								<template slot="title">
-									<font-awesome-icon icon="folder-open"/>
-									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.open') }}</span>
-								</template>
-							</n8n-menu-item>
-						</el-submenu>
+						<n8n-menu-item index="credentials">
+							<font-awesome-icon icon="key"/>
+							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.credentials') }}</span>
+						</n8n-menu-item>
 
 						<n8n-menu-item index="executions">
 							<font-awesome-icon icon="tasks"/>&nbsp;
@@ -96,10 +81,10 @@
 									<GiftNotificationIcon />
 								</div>
 								<span slot="title" :class="['item-title-root', $style.updatesLabel]">
-									{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available
+									{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}}
 								</span>
 							</n8n-menu-item>
-							<n8n-menu-item v-if="showUserArea" :class="$style.userSubmenu">
+							<n8n-menu-item v-if="showUserArea" :class="$style.userSubmenu" index="">
 								<!-- This dropdown is only enabled when sidebar is collapsed -->
 								<el-dropdown :disabled="!isCollapsed" placement="right-end" trigger="click" @command="onUserActionToggle">
 									<div :class="{[$style.avatar]: true, ['clickable']: isCollapsed }">
@@ -111,7 +96,7 @@
 									</div>
 								</el-dropdown>
 								<div slot="title" :class="['item-title-root', $style.username ]" v-if="!isCollapsed">
-									<span :title="currentUser.fullName">{{currentUser.fullName}}</span>
+									<span :title="currentUser.fullName" :class="$style.fullName">{{currentUser.fullName}}</span>
 									<div :class="{[$style.userActions]: true, ['user-actions']: true }">
 										<action-drop-down :items="userMenuItems" placement="top-start" @select="onUserActionToggle" />
 									</div>
@@ -156,6 +141,7 @@ import {
 	VERSIONS_MODAL_KEY,
 	EXECUTIONS_MODAL_KEY,
 	VIEWS,
+	WORKFLOW_OPEN_MODAL_KEY,
 } from '@/constants';
 import { userHelpers } from './mixins/userHelpers';
 
@@ -454,6 +440,9 @@ export default mixins(
 					this.$store.commit('ui/collapseSidebarMenu');
 				}
 			},
+			openWorkflowsModal (event: MouseEvent) {
+				this.$store.dispatch('ui/openModal', WORKFLOW_OPEN_MODAL_KEY);
+			},
 		},
 	});
 </script>
@@ -496,7 +485,9 @@ export default mixins(
 		--submenu-item-height: 27px;
 
 		.el-icon-arrow-down {
-			right: 15px;
+			color: var(--color-text-dark);
+			font-weight: bold;
+			right: 9px;
 
 			&:hover {
 				color: var(--color-primary);
@@ -510,7 +501,7 @@ export default mixins(
 		}
 
 		.el-menu-item, .el-menu-item .el-tooltip, .el-submenu__title {
-			padding: 0 12px !important;
+			padding: 0 8px !important;
 		}
 		.el-menu-item, .el-submenu__title {
 			margin: 8px 0;
@@ -533,6 +524,10 @@ export default mixins(
 				line-height: var(--menu-item-height);
 				padding-left: 24px !important;
 				min-width: auto;
+
+				svg {
+					width: 1.25em;
+				}
 			}
 
 			.el-menu .el-menu-item {
@@ -541,7 +536,7 @@ export default mixins(
 
 				.item-title {
 					position: absolute;
-					left: 55px;
+					left: 60px;
 				}
 			}
 
@@ -572,15 +567,15 @@ $--n8n-logo-text-color: #101330;
 
 	&.sideMenuCollapsed {
 		.userSubmenu::before {
-			width: 136%;
+			width: 160%;
 		}
 	}
 }
 
 .sideMenuWrapper {
-	height: 100%;
 	position: relative;
-	border: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+	height: 100%;
+	border-right: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
 	ul { height: 100%; }
 }
 
@@ -589,6 +584,9 @@ $--n8n-logo-text-color: #101330;
 	right: -10px;
 	top: 50%;
 	z-index: 999;
+	display: flex;
+	justify-content: center;
+	align-items: end;
 	color: var(--color-text-base);
 	background-color: var(--color-foreground-xlight);
 	width: 20px;
@@ -597,9 +595,9 @@ $--n8n-logo-text-color: #101330;
 	text-align: center;
 	border-radius: 50%;
 
-	svg {
+	span {
 		position: relative;
-		top: .5px;
+		font-size: 24px;
 	}
 
 	.iconCollapsed { left: .5px; }
@@ -615,10 +613,11 @@ $--n8n-logo-text-color: #101330;
 	flex-direction: column;
 	justify-content: space-between;
 	height: calc(100% - $--header-height);
+	padding: 2px 0;
 }
 
 .sideMenuUpper, .sideMenuLower {
-	padding: 0 var(--spacing-2xs);
+	padding: 0 var(--spacing-xs);
 }
 
 .logoItem {
@@ -635,7 +634,7 @@ $--n8n-logo-text-color: #101330;
 	.icon {
 		height: 18px;
 		position: relative;
-		left: 2px;
+		left: 6px;
 	}
 
 	.logoText {
@@ -671,6 +670,7 @@ $--n8n-logo-text-color: #101330;
 
 .updatesSubmenu {
 	color: $--sidebar-inactive-color !important;
+	margin-top: 0 !important;
 
 	.updatesLabel {
 		font-size: var(--font-size-xs);
@@ -699,20 +699,26 @@ $--n8n-logo-text-color: #101330;
 .userSubmenu {
 	position: relative;
 	cursor: default;
-	padding: 8px 12px !important;
+	padding: 12px !important;
 	margin: 0 !important;
 
+
 	&::before {
-		width: 109%;
+		width: 114%;
 		border-top: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
 		content: "";
 		position: absolute;
 		top: 0;
-		left: -9px;
+		left: -12px;
 	}
 
-	&:hover {
+	&:hover, &:global(.is-active) {
 		background-color: unset;
+
+		.userActions svg {
+			color: var(--color-text-base) !important;
+		}
+
 	}
 
 	.avatar {
@@ -721,35 +727,35 @@ $--n8n-logo-text-color: #101330;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding-top: 12px;
+		padding-top: 16px;
 		cursor: default;
 	}
 
 	.username {
 		position: relative !important;
 		display: flex !important;
-		left: 4px !important;
+		left: 9px !important;
 		justify-content: space-between;
 		align-items: center;
-		color: var(--color-text-base);
 		font-weight: var(--font-weight-bold);
 		font-size: var(--font-size-2xs);
-		padding-top: 12px;
+		padding-top: 16px;
 		cursor: default;
 
-		span {
+		.fullName {
 			width: 104px;
 			overflow: hidden;
 			text-overflow: ellipsis;
+			color: var(--color-text-dark);
 		}
 	}
 
 	.userActions {
+		position: relative;
+		left: -1px;
 		cursor: pointer;
 
 		&:hover {
-			color: var(--color-primary);
-
 			svg { color: initial; }
 		}
 	}
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index a6151348dcf65..f690a3bb4d41b 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -47,7 +47,7 @@
 					<GiftNotificationIcon />
 				</div>
 				<span slot="title" :class="['item-title-root', $style.updatesLabel]">
-					{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available
+					{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}}
 				</span>
 			</n8n-menu-item>
 		</n8n-menu>
@@ -117,7 +117,7 @@ export default mixins(
 	background-color: var(--color-background-xlight);
 	border-right: var(--border-base);
 	position: relative;
-	padding: var(--spacing-s);
+	padding: var(--spacing-xs);
 
 	ul {
 		height: 100%;
@@ -180,7 +180,7 @@ export default mixins(
 
 .versionContainer {
 	position: absolute;
-	left: 20px;
+	left: 23px;
 	bottom: 20px;
 }
 </style>

From c2fbb318baed1a8c26b5de3b1ea0573c7dab2f0b Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Mon, 19 Sep 2022 17:05:21 +0200
Subject: [PATCH 09/39] =?UTF-8?q?=F0=9F=92=84=20Removing=20old=20code=20&?=
 =?UTF-8?q?=20refactoring?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor-ui/src/components/MainSidebar.vue  | 196 ++++--------------
 1 file changed, 42 insertions(+), 154 deletions(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 64edc9ddf6d4b..64076bbdc0a02 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -28,7 +28,7 @@
 
 						<MenuItemsIterator :items="sidebarMenuTopItems" :root="true"/>
 
-						<n8n-menu-item index="workflows" @click="openWorkflowsModal">
+						<n8n-menu-item index="workflows">
 							<font-awesome-icon icon="network-wired"/>
 							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.workflows') }}</span>
 						</n8n-menu-item>
@@ -114,7 +114,6 @@
 <script lang="ts">
 import {
 	IExecutionResponse,
-	IWorkflowDataUpdate,
 	IMenuItem,
 } from '../Interface';
 
@@ -135,9 +134,6 @@ import { mapGetters } from 'vuex';
 import MenuItemsIterator from './MenuItemsIterator.vue';
 import {
 	ABOUT_MODAL_KEY,
-	CREDENTIAL_LIST_MODAL_KEY,
-	CREDENTIAL_SELECT_MODAL_KEY,
-	TAGS_MANAGER_MODAL_KEY,
 	VERSIONS_MODAL_KEY,
 	EXECUTIONS_MODAL_KEY,
 	VIEWS,
@@ -167,7 +163,6 @@ export default mixins(
 			return {
 				// @ts-ignore
 				basePath: this.$store.getters.getBaseUrl,
-				stopExecutionInProgress: false,
 				userMenuItems: [
 					{
 						id: 'settings',
@@ -247,58 +242,15 @@ export default mixins(
 					},
 				];
 			},
-			exeuctionId (): string | undefined {
-				return this.$route.params.id;
-			},
-			executionFinished (): boolean {
-				if (!this.isExecutionPage) {
-					// We are not on an execution page so return false
-					return false;
-				}
-
-				const fullExecution = this.$store.getters.getWorkflowExecution;
-
-				if (fullExecution === null) {
-					// No execution loaded so return also false
-					return false;
-				}
-
-				if (fullExecution.finished === true) {
-					return true;
-				}
-
-				return false;
-			},
-			executionWaitingForWebhook (): boolean {
-				return this.$store.getters.executionWaitingForWebhook;
-			},
-			isExecutionPage (): boolean {
-				return this.$route.name === VIEWS.EXECUTION;
-			},
-			isWorkflowActive (): boolean {
-				return this.$store.getters.isActive;
-			},
-			currentWorkflow (): string {
-				return this.$route.params.name;
-			},
 			workflowExecution (): IExecutionResponse | null {
 				return this.$store.getters.getWorkflowExecution;
 			},
-			workflowName (): string {
-				return this.$store.getters.workflowName;
-			},
-			workflowRunning (): boolean {
-				return this.$store.getters.isActionActive('workflowRunning');
-			},
 			sidebarMenuTopItems(): IMenuItem[] {
 				return this.$store.getters.sidebarMenuItems.filter((item: IMenuItem) => item.position === 'top');
 			},
 			sidebarMenuBottomItems(): IMenuItem[] {
 				return this.$store.getters.sidebarMenuItems.filter((item: IMenuItem) => item.position === 'bottom');
 			},
-			onWorkflowPage(): boolean {
-				return this.$route.meta && this.$route.meta.nodeView;
-			},
 		},
 		mounted() {
 			if (this.$refs.user) {
@@ -341,67 +293,16 @@ export default mixins(
 			toggleCollapse () {
 				this.$store.commit('ui/toggleSidebarMenuCollapse');
 			},
-			clearExecutionData () {
-				this.$store.commit('setWorkflowExecutionData', null);
-				this.updateNodesExecutionIssues();
-			},
-			openTagManager() {
-				this.$store.dispatch('ui/openModal', TAGS_MANAGER_MODAL_KEY);
-			},
 			openUpdatesPanel() {
 				this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
 			},
-			async stopExecution () {
-				const executionId = this.$store.getters.activeExecutionId;
-				if (executionId === null) {
-					return;
-				}
-
-				try {
-					this.stopExecutionInProgress = true;
-					await this.restApi().stopCurrentExecution(executionId);
-					this.$showMessage({
-						title: this.$locale.baseText('mainSidebar.showMessage.stopExecution.title'),
-						type: 'success',
-					});
-				} catch (error) {
-					this.$showError(
-						error,
-						this.$locale.baseText('mainSidebar.showError.stopExecution.title'),
-					);
-				}
-				this.stopExecutionInProgress = false;
-			},
-			async openWorkflow (workflowId: string) {
-				// Change to other workflow
-				this.$router.push({
-					name: VIEWS.WORKFLOW,
-					params: { name: workflowId },
-				});
-
-				this.$store.commit('ui/closeAllModals');
-			},
-			async handleSelect (key: string, keyPath: string) {
+			async handleSelect (key: string) {
 				if (key === 'workflows') {
-					// TODO: Update once workflows view is implemented
-					this.$router.push({name: VIEWS.NEW_WORKFLOW}).catch(()=>{});
-				} else if (key === 'help-about') {
-					this.trackHelpItemClick('about');
-					this.$store.dispatch('ui/openModal', ABOUT_MODAL_KEY);
-				} else if (key === 'user') {
-					this.$router.push({name: VIEWS.PERSONAL_SETTINGS});
-				} else if (key === 'templates' || key === 'template-new') {
+					this.$store.dispatch('ui/openModal', WORKFLOW_OPEN_MODAL_KEY);
+				} else if (key === 'templates') {
 					if (this.$router.currentRoute.name !== VIEWS.TEMPLATES) {
 						this.$router.push({ name: VIEWS.TEMPLATES });
 					}
-				} else if (key === 'credentials-open') {
-					this.$store.dispatch('ui/openModal', CREDENTIAL_LIST_MODAL_KEY);
-				} else if (key === 'credentials-new') {
-					this.$store.dispatch('ui/openModal', CREDENTIAL_SELECT_MODAL_KEY);
-				} else if (key === 'execution-open-workflow') {
-					if (this.workflowExecution !== null) {
-						this.openWorkflow(this.workflowExecution.workflowId as string);
-					}
 				} else if (key === 'executions') {
 					this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
 				} else if (key === 'settings') {
@@ -410,6 +311,9 @@ export default mixins(
 						const routeProps = this.$router.resolve({ name: defaultRoute });
 						this.$router.push(routeProps.route.path);
 					}
+				} else if (key === 'help-about') {
+					this.trackHelpItemClick('about');
+					this.$store.dispatch('ui/openModal', ABOUT_MODAL_KEY);
 				}
 			},
 			findFirstAccessibleSettingsRoute() {
@@ -440,41 +344,11 @@ export default mixins(
 					this.$store.commit('ui/collapseSidebarMenu');
 				}
 			},
-			openWorkflowsModal (event: MouseEvent) {
-				this.$store.dispatch('ui/openModal', WORKFLOW_OPEN_MODAL_KEY);
-			},
 		},
 	});
 </script>
 
 <style lang="scss">
-.sidebar-popper{
-	.el-menu-item {
-		--menu-item-height: 35px;
-		--submenu-item-height: 27px;
-		--menu-item-hover-fill: var(--color-foreground-base);
-		border-radius: var(--border-radius-base);
-		margin: 0 8px;
-
-		.item-title {
-			position: absolute;
-			left: 55px;
-		}
-
-		.svg-inline--fa {
-			color: var(--color-text-light);
-			position: relative;
-			right: -3px;
-		}
-
-		&:hover {
-			.svg-inline--fa {
-				color: var(--color-text-dark);
-			}
-		}
-	}
-}
-
 #side-menu {
 	.el-menu {
 		--menu-item-active-background-color: var(--color-foreground-base);
@@ -522,11 +396,11 @@ export default mixins(
 			.el-menu-item {
 				height: var(--menu-item-height);
 				line-height: var(--menu-item-height);
-				padding-left: 24px !important;
+				padding-left: var(--spacing-l) !important;
 				min-width: auto;
 
 				svg {
-					width: 1.25em;
+					width: var(--spacing-m);
 				}
 			}
 
@@ -543,9 +417,9 @@ export default mixins(
 		}
 
 		.svg-inline--fa {
-			margin-right: 15px;
 			position: relative;
 			left: 3px;
+			margin-right: 15px;
 		}
 
 	}
@@ -556,12 +430,36 @@ export default mixins(
 	display: none;
 }
 
+.sidebar-popper{
+	.el-menu-item {
+		--menu-item-height: 35px;
+		--submenu-item-height: 27px;
+		--menu-item-hover-fill: var(--color-foreground-base);
+		border-radius: var(--border-radius-base);
+		margin: 0 var(--spacing-2xs);
+
+		.item-title {
+			position: absolute;
+			left: 55px;
+		}
+
+		.svg-inline--fa {
+			color: var(--color-text-light);
+			position: relative;
+			right: -3px;
+		}
+
+		&:hover {
+			.svg-inline--fa {
+				color: var(--color-text-dark);
+			}
+		}
+	}
+}
 </style>
 
 <style lang="scss" module>
 
-$--n8n-logo-text-color: #101330;
-
 .sideMenu {
 	height: 100%;
 
@@ -586,7 +484,7 @@ $--n8n-logo-text-color: #101330;
 	z-index: 999;
 	display: flex;
 	justify-content: center;
-	align-items: end;
+	align-items: flex-end;
 	color: var(--color-text-base);
 	background-color: var(--color-foreground-xlight);
 	width: 20px;
@@ -613,7 +511,7 @@ $--n8n-logo-text-color: #101330;
 	flex-direction: column;
 	justify-content: space-between;
 	height: calc(100% - $--header-height);
-	padding: 2px 0;
+	padding: var(--spacing-5xs) 0;
 }
 
 .sideMenuUpper, .sideMenuLower {
@@ -636,20 +534,10 @@ $--n8n-logo-text-color: #101330;
 		position: relative;
 		left: 6px;
 	}
-
-	.logoText {
-		position: relative;
-		left: 5px;
-		font-weight: bold;
-		color: $--n8n-logo-text-color;
-		text-decoration: none;
-	}
 }
 
 .logoItemCollapsed {
 	border-bottom: var(--border-base);
-
-	.logoText { display: none; }
 }
 
 .footerMenuItems {
@@ -657,7 +545,7 @@ $--n8n-logo-text-color: #101330;
 	flex-grow: 1;
 	flex-direction: column;
 	justify-content: flex-end;
-	padding-bottom: 20px;
+	padding-bottom: var(-spacing-m);
 
 	&.loggedIn {
 		padding-bottom: var(--spacing-m);
@@ -699,10 +587,10 @@ $--n8n-logo-text-color: #101330;
 .userSubmenu {
 	position: relative;
 	cursor: default;
-	padding: 12px !important;
+	padding: var(--spacing-xs) !important;
 	margin: 0 !important;
 
-
+	// Fake border-top on user area
 	&::before {
 		width: 114%;
 		border-top: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
@@ -739,7 +627,7 @@ $--n8n-logo-text-color: #101330;
 		align-items: center;
 		font-weight: var(--font-weight-bold);
 		font-size: var(--font-size-2xs);
-		padding-top: 16px;
+		padding-top: var(--spacing-s);
 		cursor: default;
 
 		.fullName {

From a5ebb32b68e5f7317e30877a3876f129cae328df Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Tue, 20 Sep 2022 11:15:13 +0200
Subject: [PATCH 10/39] =?UTF-8?q?=F0=9F=92=84=20Minor=20CSS=20tweaks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor-ui/src/components/MainSidebar.vue  | 36 ++++++++++++++-----
 .../src/components/SettingsSidebar.vue        |  5 +++
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 64076bbdc0a02..29494ddb6e0ba 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -4,7 +4,7 @@
 		[$style.sideMenu]: true,
 		[$style.sideMenuCollapsed]: isCollapsed
 	}">
-		<div :class="$style.sideMenuWrapper">
+		<div :class="{[$style.sideMenuWrapper]: true, [$style.expanded]: !isCollapsed}">
 			<div
 				id="collapse-change-button"
 				:class="['clickable', $style.sideMenuCollapseButton]"
@@ -28,7 +28,7 @@
 
 						<MenuItemsIterator :items="sidebarMenuTopItems" :root="true"/>
 
-						<n8n-menu-item index="workflows">
+						<n8n-menu-item index="workflows" :class="$style.disableActiveStyle">
 							<font-awesome-icon icon="network-wired"/>
 							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.workflows') }}</span>
 						</n8n-menu-item>
@@ -43,7 +43,7 @@
 							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.credentials') }}</span>
 						</n8n-menu-item>
 
-						<n8n-menu-item index="executions">
+						<n8n-menu-item index="executions"  :class="$style.disableActiveStyle">
 							<font-awesome-icon icon="tasks"/>&nbsp;
 							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.executions') }}</span>
 						</n8n-menu-item>
@@ -474,6 +474,11 @@ export default mixins(
 	position: relative;
 	height: 100%;
 	border-right: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+
+	&.expanded {
+		width: $--sidebar-expanded-width;
+	}
+
 	ul { height: 100%; }
 }
 
@@ -518,6 +523,24 @@ export default mixins(
 	padding: 0 var(--spacing-xs);
 }
 
+
+li:global(.is-active) {
+	.sideMenuLower &, &.disableActiveStyle {
+		background-color: initial;
+
+		svg {
+			color: var(--color-text-base) !important;
+		}
+
+		&:hover {
+			background-color: var(--color-foreground-base);
+			svg {
+				color: var(--color-text-dark) !important;
+			}
+		}
+	}
+}
+
 .logoItem {
 	display: flex;
 	justify-content: space-between;
@@ -557,17 +580,12 @@ export default mixins(
 }
 
 .updatesSubmenu {
-	color: $--sidebar-inactive-color !important;
 	margin-top: 0 !important;
 
 	.updatesLabel {
 		font-size: var(--font-size-xs);
 	}
 
-	&:hover {
-		color: $--sidebar-active-color;
-	}
-
 	.giftContainer {
 		display: flex;
 		justify-content: flex-start;
@@ -601,7 +619,7 @@ export default mixins(
 	}
 
 	&:hover, &:global(.is-active) {
-		background-color: unset;
+		background-color: initial !important;
 
 		.userActions svg {
 			color: var(--color-text-base) !important;
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index f690a3bb4d41b..77e695ced7950 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -118,6 +118,7 @@ export default mixins(
 	border-right: var(--border-base);
 	position: relative;
 	padding: var(--spacing-xs);
+	overflow: auto;
 
 	ul {
 		height: 100%;
@@ -183,4 +184,8 @@ export default mixins(
 	left: 23px;
 	bottom: 20px;
 }
+
+@media screen and (max-height: 420px) {
+	.updatesSubmenu, .versionContainer { display: none; }
+}
 </style>

From 31da5bcc848960cda2fbdb38a8f932d0a4fa419f Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Tue, 20 Sep 2022 11:57:03 +0200
Subject: [PATCH 11/39] =?UTF-8?q?=F0=9F=92=84=20Opening=20credentials=20mo?=
 =?UTF-8?q?dal=20on=20sidebar=20menu=20item=20click.=20Minor=20CSS=20updat?=
 =?UTF-8?q?es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor-ui/src/components/MainSidebar.vue  | 54 +++++++++++++------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 29494ddb6e0ba..03684b1a05662 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -38,7 +38,7 @@
 							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.templates') }}</span>
 						</n8n-menu-item>
 
-						<n8n-menu-item index="credentials">
+						<n8n-menu-item index="credentials" :class="$style.disableActiveStyle">
 							<font-awesome-icon icon="key"/>
 							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.credentials') }}</span>
 						</n8n-menu-item>
@@ -54,7 +54,7 @@
 							<span slot="title" class="item-title-root">{{ $locale.baseText('settings') }}</span>
 						</n8n-menu-item>
 
-						<el-submenu index="help" :class="$style.helpMenu" title="Help" popperClass="sidebar-popper">
+						<el-submenu index="help" :class="[$style.helpMenu, $style.disableActiveStyle]" title="Help" popperClass="sidebar-popper">
 							<template slot="title">
 								<font-awesome-icon icon="question"/>&nbsp;
 								<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.help') }}</span>
@@ -138,6 +138,7 @@ import {
 	EXECUTIONS_MODAL_KEY,
 	VIEWS,
 	WORKFLOW_OPEN_MODAL_KEY,
+	CREDENTIAL_LIST_MODAL_KEY,
 } from '@/constants';
 import { userHelpers } from './mixins/userHelpers';
 
@@ -297,23 +298,39 @@ export default mixins(
 				this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
 			},
 			async handleSelect (key: string) {
-				if (key === 'workflows') {
-					this.$store.dispatch('ui/openModal', WORKFLOW_OPEN_MODAL_KEY);
-				} else if (key === 'templates') {
-					if (this.$router.currentRoute.name !== VIEWS.TEMPLATES) {
-						this.$router.push({ name: VIEWS.TEMPLATES });
+				switch (key) {
+					case 'workflows': {
+						this.$store.dispatch('ui/openModal', WORKFLOW_OPEN_MODAL_KEY);
+						break;
+					}
+					case 'templates': {
+						if (this.$router.currentRoute.name !== VIEWS.TEMPLATES) {
+							this.$router.push({ name: VIEWS.TEMPLATES });
+						}
+						break;
 					}
-				} else if (key === 'executions') {
-					this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
-				} else if (key === 'settings') {
-					const defaultRoute = this.findFirstAccessibleSettingsRoute();
-					if (defaultRoute) {
-						const routeProps = this.$router.resolve({ name: defaultRoute });
-						this.$router.push(routeProps.route.path);
+					case 'credentials': {
+						this.$store.dispatch('ui/openModal', CREDENTIAL_LIST_MODAL_KEY);
+						break;
+					}
+					case 'executions': {
+						this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
+						break;
 					}
-				} else if (key === 'help-about') {
-					this.trackHelpItemClick('about');
-					this.$store.dispatch('ui/openModal', ABOUT_MODAL_KEY);
+					case 'settings': {
+						const defaultRoute = this.findFirstAccessibleSettingsRoute();
+						if (defaultRoute) {
+							const routeProps = this.$router.resolve({ name: defaultRoute });
+							this.$router.push(routeProps.route.path);
+						}
+						break;
+					}
+					case 'help-about': {
+						this.trackHelpItemClick('about');
+						this.$store.dispatch('ui/openModal', ABOUT_MODAL_KEY);
+						break;
+					}
+					default: break;
 				}
 			},
 			findFirstAccessibleSettingsRoute() {
@@ -537,6 +554,9 @@ li:global(.is-active) {
 			svg {
 				color: var(--color-text-dark) !important;
 			}
+			&:global(.el-submenu) {
+				background-color: unset;
+			}
 		}
 	}
 }

From 3b8e182a26829d574a2fc5f438c697ff5af864a5 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Tue, 20 Sep 2022 13:36:44 +0200
Subject: [PATCH 12/39] =?UTF-8?q?=F0=9F=92=84=20Updating=20sidebar=20expan?=
 =?UTF-8?q?d/collapse=20animation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor-ui/src/components/MainSidebar.vue  | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 03684b1a05662..8041de71a5791 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -442,11 +442,6 @@ export default mixins(
 	}
 }
 
-.el-menu--collapse .el-submenu .el-submenu__title span,
-.el-menu--collapse .el-submenu__icon-arrow {
-	display: none;
-}
-
 .sidebar-popper{
 	.el-menu-item {
 		--menu-item-height: 35px;
@@ -481,6 +476,15 @@ export default mixins(
 	height: 100%;
 
 	&.sideMenuCollapsed {
+		:global(.item-title-root),
+		// :global(.el-submenu) :global(.el-submenu__title) span,
+		:global(.el-menu--collapse) :global(.el-submenu__icon-arrow) {
+			display: none;
+		}
+
+		.logoItem {
+			border-bottom: var(--border-base);
+		}
 		.userSubmenu::before {
 			width: 160%;
 		}
@@ -490,7 +494,9 @@ export default mixins(
 .sideMenuWrapper {
 	position: relative;
 	height: 100%;
+	width: $--sidebar-width;
 	border-right: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+	transition: width 150ms ease-in-out;
 
 	&.expanded {
 		width: $--sidebar-expanded-width;
@@ -579,10 +585,6 @@ li:global(.is-active) {
 	}
 }
 
-.logoItemCollapsed {
-	border-bottom: var(--border-base);
-}
-
 .footerMenuItems {
 	display: flex;
 	flex-grow: 1;

From ade2165493397e08f2d9c2d5ad57f3a564fcb36f Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Tue, 20 Sep 2022 14:36:31 +0200
Subject: [PATCH 13/39] =?UTF-8?q?=F0=9F=92=84=20Few=20more=20refinements?=
 =?UTF-8?q?=20of=20sidebar=20animation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/components/MainSidebar.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 8041de71a5791..cfc88996643a9 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -16,11 +16,10 @@
 			<n8n-menu default-active="workflow" @select="handleSelect" :collapse="isCollapsed">
 				<n8n-menu-item
 					index="logo"
-					:class="{[$style.logoItem]: true, [$style.logoItemCollapsed]: isCollapsed}"
+					:class="$style.logoItem"
 				>
-					<a href="https://n8n.io" target="_blank" :class="$style['logo-link']">
-						<img v-if="isCollapsed" :src="basePath + 'n8n-logo-collapsed.svg'" :class="$style['icon']" alt="n8n"/>
-						<img v-else :src="basePath + 'n8n-logo-expanded.svg'" :class="$style['icon']" alt="n8n"/>
+					<a href="https://n8n.io" target="_blank">
+						<img :src="basePath +  (isCollapsed ? 'n8n-logo-collapsed.svg' : 'n8n-logo-expanded.svg')" :class="$style.icon" alt="n8n"/>
 					</a>
 				</n8n-menu-item>
 				<div :class="$style.sideMenuFlexContainer">
@@ -476,9 +475,10 @@ export default mixins(
 	height: 100%;
 
 	&.sideMenuCollapsed {
+		.fullName,
 		:global(.item-title-root),
-		// :global(.el-submenu) :global(.el-submenu__title) span,
-		:global(.el-menu--collapse) :global(.el-submenu__icon-arrow) {
+		:global(.el-menu--collapse) :global(.el-submenu__icon-arrow),
+		:global(.el-icon-arrow-down) {
 			display: none;
 		}
 

From 2391ab2e43b11f6ce4a5eda0da098b1d4d82685d Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Tue, 20 Sep 2022 16:11:23 +0200
Subject: [PATCH 14/39] =?UTF-8?q?=F0=9F=91=8C=20Addressing=20code=20review?=
 =?UTF-8?q?=20comments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/App.vue                |  2 +-
 .../src/components/ActionDropdown.vue         |  8 +--
 .../components/MainHeader/WorkflowDetails.vue | 72 ++++++++++---------
 .../src/components/SettingsSidebar.vue        |  4 --
 packages/editor-ui/src/plugins/icons.ts       |  2 -
 5 files changed, 42 insertions(+), 46 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 09a06b373851d..1359f769a86bf 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="{[$style.app]: true, ['root-container']: true, ['menu-collapsed']: sidebarMenuCollapsed}">
+	<div :class="[$style.app, 'root-container']">
 		<LoadingView v-if="loading" />
 		<div
 			v-else
diff --git a/packages/editor-ui/src/components/ActionDropdown.vue b/packages/editor-ui/src/components/ActionDropdown.vue
index 25819ed42b9a4..792a4c037ff49 100644
--- a/packages/editor-ui/src/components/ActionDropdown.vue
+++ b/packages/editor-ui/src/components/ActionDropdown.vue
@@ -15,7 +15,7 @@
 					<div :class="{
 						[$style.itemContainer]: true,
 						[$style.hasCustomStyling]: item.customClass !== undefined,
-						[$style[item.customClass]]: item.customClass !== undefined,
+						[item.customClass]: item.customClass !== undefined,
 					}">
 						<span v-if="item.icon" :class="$style.icon">
 							<font-awesome-icon :icon="item.icon"/>
@@ -35,7 +35,7 @@ import Vue, { PropType } from "vue";
 import { IActionDropdownItem } from "@/Interface";
 
 export default Vue.extend({
-	name: 'ActionDropDown',
+	name: 'action-dropdown',
 	props: {
 		items: {
 			type: Array as PropType<IActionDropdownItem[]>,
@@ -103,8 +103,4 @@ export default Vue.extend({
 	}
 }
 
-.deleteItem {
-	color: var(--color-danger);
-}
-
 </style>
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index 49f768d51e375..124987b1f4504 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -165,40 +165,42 @@ export default mixins(workflowHelpers, titleChange).extend({
 			return this.$route.meta && this.$route.meta.nodeView;
 		},
 		workflowMenuItems(): IActionDropdownItem[] {
+			console.log(this.$style.deleteItem);
+
 			return [
-					{
-						id: WORKFLOW_MENU_ACTIONS.DUPLICATE,
-						label: this.$locale.baseText('menuActions.duplicate'),
-						disabled: !this.onWorkflowPage || !this.currentWorkflow,
-					},
-					{
-						id: WORKFLOW_MENU_ACTIONS.DOWNLOAD,
-						label: this.$locale.baseText('menuActions.download'),
-						disabled: !this.onWorkflowPage,
-					},
-					{
-						id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL,
-						label: this.$locale.baseText('menuActions.importFromUrl'),
-						disabled: !this.onWorkflowPage,
-					},
-					{
-						id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE,
-						label: this.$locale.baseText('menuActions.importFromFile'),
-						disabled: !this.onWorkflowPage,
-					},
-					{
-						id: WORKFLOW_MENU_ACTIONS.SETTINGS,
-						label: this.$locale.baseText('generic.settings'),
-						disabled: !this.onWorkflowPage || !this.currentWorkflow,
-					},
-					{
-						id: WORKFLOW_MENU_ACTIONS.DELETE,
-						label: this.$locale.baseText('menuActions.delete'),
-						disabled: !this.onWorkflowPage || !this.currentWorkflow,
-						customClass: 'deleteItem',
-						divided: true,
-					},
-				];
+				{
+					id: WORKFLOW_MENU_ACTIONS.DUPLICATE,
+					label: this.$locale.baseText('menuActions.duplicate'),
+					disabled: !this.onWorkflowPage || !this.currentWorkflow,
+				},
+				{
+					id: WORKFLOW_MENU_ACTIONS.DOWNLOAD,
+					label: this.$locale.baseText('menuActions.download'),
+					disabled: !this.onWorkflowPage,
+				},
+				{
+					id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL,
+					label: this.$locale.baseText('menuActions.importFromUrl'),
+					disabled: !this.onWorkflowPage,
+				},
+				{
+					id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE,
+					label: this.$locale.baseText('menuActions.importFromFile'),
+					disabled: !this.onWorkflowPage,
+				},
+				{
+					id: WORKFLOW_MENU_ACTIONS.SETTINGS,
+					label: this.$locale.baseText('generic.settings'),
+					disabled: !this.onWorkflowPage || !this.currentWorkflow,
+				},
+				{
+					id: WORKFLOW_MENU_ACTIONS.DELETE,
+					label: this.$locale.baseText('menuActions.delete'),
+					disabled: !this.onWorkflowPage || !this.currentWorkflow,
+					customClass: this.$style.deleteItem,
+					divided: true,
+				},
+			];
 		},
 	},
 	methods: {
@@ -487,4 +489,8 @@ $--header-spacing: 20px;
 .hiddenInput {
 	display: none;
 }
+
+.deleteItem {
+	color: var(--color-danger);
+}
 </style>
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index 77e695ced7950..0076e8dd41394 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -166,10 +166,6 @@ export default mixins(
 		font-size: var(--font-size-xs);
 	}
 
-	&:hover {
-		// color: $--sidebar-active-color;
-	}
-
 	.giftContainer {
 		display: flex;
 		justify-content: flex-start;
diff --git a/packages/editor-ui/src/plugins/icons.ts b/packages/editor-ui/src/plugins/icons.ts
index 73d68636a5a4c..1c0e1237d1880 100644
--- a/packages/editor-ui/src/plugins/icons.ts
+++ b/packages/editor-ui/src/plugins/icons.ts
@@ -83,7 +83,6 @@ import {
 	faSearchPlus,
 	faServer,
 	faSignInAlt,
-	faSignOutAlt,
 	faSlidersH,
 	faSpinner,
 	faStop,
@@ -196,7 +195,6 @@ addIcon(faSearchMinus);
 addIcon(faSearchPlus);
 addIcon(faServer);
 addIcon(faSignInAlt);
-addIcon(faSignOutAlt);
 addIcon(faSlidersH);
 addIcon(faSpinner);
 addIcon(faSolidStickyNote);

From 985d842579fafc79ede8e8b8733d2a6265016d75 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Wed, 21 Sep 2022 11:03:17 +0200
Subject: [PATCH 15/39] =?UTF-8?q?=E2=9C=A8=20Moved=20ActionDropdown=20comp?=
 =?UTF-8?q?onent=20to=20design=20system?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActionDropdown.stories.ts                 | 72 +++++++++++++++++++
 .../N8nActionDropdown}/ActionDropdown.vue     | 30 +++++++-
 .../__tests__/ActionDropdown.spec.ts          | 52 ++++++++++++++
 .../__snapshots__/ActionDropdown.spec.ts.snap | 42 +++++++++++
 .../src/components/N8nActionDropdown/index.ts |  2 +
 .../src/plugins/n8nComponents.ts              |  2 +
 packages/editor-ui/src/Interface.ts           |  9 ---
 .../components/MainHeader/WorkflowDetails.vue | 12 ++--
 .../editor-ui/src/components/MainSidebar.vue  |  9 ++-
 9 files changed, 207 insertions(+), 23 deletions(-)
 create mode 100644 packages/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts
 rename packages/{editor-ui/src/components => design-system/src/components/N8nActionDropdown}/ActionDropdown.vue (71%)
 create mode 100644 packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts
 create mode 100644 packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
 create mode 100644 packages/design-system/src/components/N8nActionDropdown/index.ts

diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts
new file mode 100644
index 0000000000000..149d255ba0f20
--- /dev/null
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts
@@ -0,0 +1,72 @@
+import N8nActionDropdown from "./ActionDropdown.vue";
+import { StoryFn } from '@storybook/vue';
+
+export default {
+	title: 'Atoms/ActionDropdown',
+	component: N8nActionDropdown,
+	argTypes: {
+		placement: {
+			control: {
+				type: 'select',
+				options: ['top', 'top-end', 'top-start', 'bottom', 'bottom-end', 'bottom-start'],
+			},
+		},
+		activatorIcon: {
+			control: {
+				type: 'text',
+			},
+		},
+		trigger: {
+			control: {
+				type: 'select',
+				options: ['click', 'hover'],
+			},
+		},
+	},
+};
+
+const template: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nActionDropdown,
+	},
+	template: `<n8n-action-dropdown v-bind="$props" />`,
+});
+
+export const defaultActionDropdown = template.bind({});
+defaultActionDropdown.args = {
+	items: [
+		{
+			id: 'item1',
+			label: 'Action 1',
+		},
+		{
+			id: 'item2',
+			label: 'Action 2',
+		},
+	],
+};
+
+export const customStyling = template.bind({});
+customStyling.args = {
+	activatorIcon: 'bars',
+	items: [
+		{
+			id: 'item1',
+			label: 'Action 1',
+			icon: 'thumbs-up',
+		},
+		{
+			id: 'item2',
+			label: 'Action 2',
+			icon: 'thumbs-down',
+			disabled: true,
+		},
+		{
+			id: 'item3',
+			label: 'Action 3',
+			icon: 'heart',
+			divided: true,
+		},
+	],
+};
diff --git a/packages/editor-ui/src/components/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
similarity index 71%
rename from packages/editor-ui/src/components/ActionDropdown.vue
rename to packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index 792a4c037ff49..149d7a381dfd8 100644
--- a/packages/editor-ui/src/components/ActionDropdown.vue
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -18,7 +18,7 @@
 						[item.customClass]: item.customClass !== undefined,
 					}">
 						<span v-if="item.icon" :class="$style.icon">
-							<font-awesome-icon :icon="item.icon"/>
+							<n8n-icon :icon="item.icon"/>
 						</span>
 						<span :class="$style.label">
 							{{ item.label }}
@@ -32,10 +32,34 @@
 
 <script lang="ts">
 import Vue, { PropType } from "vue";
-import { IActionDropdownItem } from "@/Interface";
+import ElDropdown from 'element-ui/lib/dropdown';
+import ElDropdownMenu from 'element-ui/lib/dropdown-menu';
+import ElDropdownItem from 'element-ui/lib/dropdown-item';
+import N8nIcon from '../N8nIcon';
 
+interface IActionDropdownItem {
+	id: string;
+	label: string;
+	icon?: string;
+	divided?: boolean;
+	disabled?: boolean;
+	customClass?: string;
+}
+
+// This component is visually similar to the ActionToggle component
+// but it offers more options when it comes to dropdown items styling
+// (supports icons, separators, custom styling and all options provided
+// by Element UI dropdown component).
+// It can be used in different parts of editor UI while ActionToggle
+// is designed to be used in card components.
 export default Vue.extend({
-	name: 'action-dropdown',
+	name: 'n8n-action-dropdown',
+	components: {
+		ElDropdownMenu,
+		ElDropdown,
+		ElDropdownItem,
+		N8nIcon,
+	},
 	props: {
 		items: {
 			type: Array as PropType<IActionDropdownItem[]>,
diff --git a/packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts b/packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts
new file mode 100644
index 0000000000000..8af723b476b47
--- /dev/null
+++ b/packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts
@@ -0,0 +1,52 @@
+import { render } from '@testing-library/vue';
+import N8nActionDropdown from '../ActionDropdown.vue';
+
+describe('components', () => {
+	describe('N8nActionDropdown', () => {
+		it('should render default styling correctly', () => {
+			const wrapper = render(N8nActionDropdown, {
+				props: {
+					items: [
+						{
+							id: 'item1',
+							label: 'Action 1',
+						},
+						{
+							id: 'item2',
+							label: 'Action 2',
+						},
+					],
+				},
+				stubs: ['n8n-icon', 'el-dropdown', 'el-dropdown-menu', 'el-dropdown-item'],
+			});
+			expect(wrapper.html()).toMatchSnapshot();
+		});
+		it('should render custom styling correctly', () => {
+			const wrapper = render(N8nActionDropdown, {
+				props: {
+					items: [
+						{
+							id: 'item1',
+							label: 'Action 1',
+							icon: 'thumbs-up',
+						},
+						{
+							id: 'item2',
+							label: 'Action 2',
+							icon: 'thumbs-down',
+							disabled: true,
+						},
+						{
+							id: 'item3',
+							label: 'Action 3',
+							icon: 'heart',
+							divided: true,
+						},
+					],
+				},
+				stubs: ['n8n-icon', 'el-dropdown', 'el-dropdown-menu', 'el-dropdown-item'],
+			});
+			expect(wrapper.html()).toMatchSnapshot();
+		});
+	});
+});
diff --git a/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap b/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
new file mode 100644
index 0000000000000..1c9974bf3a386
--- /dev/null
+++ b/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
@@ -0,0 +1,42 @@
+// Vitest Snapshot v1
+
+exports[`components > N8nActionDropdown > should render custom styling correctly 1`] = `
+"<div class=\\"action-dropdown-container\\">
+  <el-dropdown-stub trigger=\\"click\\" size=\\"\\" hideonclick=\\"true\\" placement=\\"bottom\\" visiblearrow=\\"true\\" showtimeout=\\"250\\" hidetimeout=\\"150\\" tabindex=\\"0\\">
+    <div class=\\"_activator_hogvu_1\\">
+      <n8n-icon-stub icon=\\"ellipsis-v\\" size=\\"medium\\"></n8n-icon-stub>
+    </div>
+    <el-dropdown-menu-stub transformorigin=\\"true\\" placement=\\"bottom\\" boundariespadding=\\"5\\" offset=\\"0\\" visiblearrow=\\"true\\" arrowoffset=\\"0\\" appendtobody=\\"true\\" popperoptions=\\"[object Object]\\">
+      <el-dropdown-item-stub command=\\"item1\\">
+        <div class=\\"_itemContainer_hogvu_16\\"><span class=\\"_icon_hogvu_20\\"><n8n-icon-stub icon=\\"thumbs-up\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 1 </span></div>
+      </el-dropdown-item-stub>
+      <el-dropdown-item-stub command=\\"item2\\" disabled=\\"true\\">
+        <div class=\\"_itemContainer_hogvu_16\\"><span class=\\"_icon_hogvu_20\\"><n8n-icon-stub icon=\\"thumbs-down\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 2 </span></div>
+      </el-dropdown-item-stub>
+      <el-dropdown-item-stub command=\\"item3\\" divided=\\"true\\">
+        <div class=\\"_itemContainer_hogvu_16\\"><span class=\\"_icon_hogvu_20\\"><n8n-icon-stub icon=\\"heart\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 3 </span></div>
+      </el-dropdown-item-stub>
+    </el-dropdown-menu-stub>
+  </el-dropdown-stub>
+</div>"
+`;
+
+exports[`components > N8nActionDropdown > should render default styling correctly 1`] = `
+"<div class=\\"action-dropdown-container\\">
+  <el-dropdown-stub trigger=\\"click\\" size=\\"\\" hideonclick=\\"true\\" placement=\\"bottom\\" visiblearrow=\\"true\\" showtimeout=\\"250\\" hidetimeout=\\"150\\" tabindex=\\"0\\">
+    <div class=\\"_activator_hogvu_1\\">
+      <n8n-icon-stub icon=\\"ellipsis-v\\" size=\\"medium\\"></n8n-icon-stub>
+    </div>
+    <el-dropdown-menu-stub transformorigin=\\"true\\" placement=\\"bottom\\" boundariespadding=\\"5\\" offset=\\"0\\" visiblearrow=\\"true\\" arrowoffset=\\"0\\" appendtobody=\\"true\\" popperoptions=\\"[object Object]\\">
+      <el-dropdown-item-stub command=\\"item1\\">
+        <div class=\\"_itemContainer_hogvu_16\\">
+          <!----><span> Action 1 </span></div>
+      </el-dropdown-item-stub>
+      <el-dropdown-item-stub command=\\"item2\\">
+        <div class=\\"_itemContainer_hogvu_16\\">
+          <!----><span> Action 2 </span></div>
+      </el-dropdown-item-stub>
+    </el-dropdown-menu-stub>
+  </el-dropdown-stub>
+</div>"
+`;
diff --git a/packages/design-system/src/components/N8nActionDropdown/index.ts b/packages/design-system/src/components/N8nActionDropdown/index.ts
new file mode 100644
index 0000000000000..e0b58950d4a3c
--- /dev/null
+++ b/packages/design-system/src/components/N8nActionDropdown/index.ts
@@ -0,0 +1,2 @@
+import N8nActionDropdown from './ActionDropdown.vue';
+export default N8nActionDropdown;
diff --git a/packages/design-system/src/plugins/n8nComponents.ts b/packages/design-system/src/plugins/n8nComponents.ts
index 1f18a04114c6b..7148b685a854b 100644
--- a/packages/design-system/src/plugins/n8nComponents.ts
+++ b/packages/design-system/src/plugins/n8nComponents.ts
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import N8nInfoAccordion from '../components/N8nInfoAccordion';
 import N8nActionBox from '../components/N8nActionBox';
+import N8nActionDropdown from '../components/N8nActionDropdown';
 import N8nActionToggle from '../components/N8nActionToggle';
 import N8nAvatar from '../components/N8nAvatar';
 import N8nButton from '../components/N8nButton';
@@ -42,6 +43,7 @@ export default {
 	install: (app: typeof Vue, options?: {}) => {
 		app.component('n8n-info-accordion', N8nInfoAccordion);
 		app.component('n8n-action-box', N8nActionBox);
+		app.component('n8n-action-dropdown', N8nActionDropdown);
 		app.component('n8n-action-toggle', N8nActionToggle);
 		app.component('n8n-avatar', N8nAvatar);
 		app.component('n8n-button', N8nButton);
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 53497fbaffa68..a752171ed8c3e 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1068,12 +1068,3 @@ export interface ITab {
 	align?: 'right';
 	tooltip?: string;
 }
-
-export interface IActionDropdownItem {
-	id: string;
-	label: string;
-	icon?: string;
-	divided?: boolean;
-	disabled?: boolean;
-	customClass?: string;
-}
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index 124987b1f4504..c837978b073de 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -72,7 +72,7 @@
 				/>
 				<div :class="$style.workflowMenuContainer">
 					<input :class="$style.hiddenInput" type="file" ref="importFile" @change="handleFileImport()">
-					<action-drop-down :items="workflowMenuItems" @select="onWorkflowMenuSelect"></action-drop-down>
+					<n8n-action-dropdown :items="workflowMenuItems" @select="onWorkflowMenuSelect" />
 				</div>
 			</template>
 		</PushConnectionTracker>
@@ -87,7 +87,7 @@ import {
 	DUPLICATE_MODAL_KEY,
 	MAX_WORKFLOW_NAME_LENGTH,
 	VIEWS, WORKFLOW_MENU_ACTIONS,
-	WORKFLOW_SETTINGS_MODAL_KEY
+	WORKFLOW_SETTINGS_MODAL_KEY,
 } from "@/constants";
 
 import ShortenName from "@/components/ShortenName.vue";
@@ -99,8 +99,7 @@ import SaveButton from "@/components/SaveButton.vue";
 import TagsDropdown from "@/components/TagsDropdown.vue";
 import InlineTextEdit from "@/components/InlineTextEdit.vue";
 import BreakpointsObserver from "@/components/BreakpointsObserver.vue";
-import ActionDropDown from "@/components/ActionDropdown.vue";
-import { IActionDropdownItem, IWorkflowDataUpdate, IWorkflowToShare } from "@/Interface";
+import { IWorkflowDataUpdate, IWorkflowToShare } from "@/Interface";
 
 import { saveAs } from 'file-saver';
 import { MessageBoxInputData } from 'element-ui/types/message-box';
@@ -118,7 +117,6 @@ const hasChanged = (prev: string[], curr: string[]) => {
 export default mixins(workflowHelpers, titleChange).extend({
 	name: "WorkflowDetails",
 	components: {
-		ActionDropDown,
 		TagsContainer,
 		PushConnectionTracker,
 		ShortenName,
@@ -164,9 +162,7 @@ export default mixins(workflowHelpers, titleChange).extend({
 		onWorkflowPage(): boolean {
 			return this.$route.meta && this.$route.meta.nodeView;
 		},
-		workflowMenuItems(): IActionDropdownItem[] {
-			console.log(this.$style.deleteItem);
-
+		workflowMenuItems(): Array<{}> {
 			return [
 				{
 					id: WORKFLOW_MENU_ACTIONS.DUPLICATE,
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index cfc88996643a9..d9bfe141edb5a 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -97,7 +97,7 @@
 								<div slot="title" :class="['item-title-root', $style.username ]" v-if="!isCollapsed">
 									<span :title="currentUser.fullName" :class="$style.fullName">{{currentUser.fullName}}</span>
 									<div :class="{[$style.userActions]: true, ['user-actions']: true }">
-										<action-drop-down :items="userMenuItems" placement="top-start" @select="onUserActionToggle" />
+										<n8n-action-dropdown :items="userMenuItems" placement="top-start" @select="onUserActionToggle" />
 									</div>
 								</div>
 							</n8n-menu-item>
@@ -119,7 +119,6 @@ import {
 import ExecutionsList from '@/components/ExecutionsList.vue';
 import GiftNotificationIcon from './GiftNotificationIcon.vue';
 import WorkflowSettings from '@/components/WorkflowSettings.vue';
-import ActionDropDown from '@/components/ActionDropdown.vue';
 
 import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { restApi } from '@/components/mixins/restApi';
@@ -153,7 +152,6 @@ export default mixins(
 	.extend({
 		name: 'MainSidebar',
 		components: {
-			ActionDropDown,
 			ExecutionsList,
 			GiftNotificationIcon,
 			WorkflowSettings,
@@ -500,6 +498,11 @@ export default mixins(
 
 	&.expanded {
 		width: $--sidebar-expanded-width;
+
+		.icon {
+			position: relative;
+			left: 16px;
+		}
 	}
 
 	ul { height: 100%; }

From 7f9604b178a512f1f2d5effe8a6fabf69c838c3d Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Wed, 21 Sep 2022 16:23:57 +0200
Subject: [PATCH 16/39] =?UTF-8?q?=F0=9F=91=8C=20Fixing=20bugs=20reported?=
 =?UTF-8?q?=20during=20code=20review=20and=20testing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../N8nActionDropdown/ActionDropdown.vue      |  2 +-
 .../editor-ui/src/components/MainSidebar.vue  |  8 ++-
 .../src/components/SettingsSidebar.vue        |  5 ++
 .../editor-ui/src/components/TagsDropdown.vue | 12 -----
 .../src/components/mixins/mouseSelect.ts      | 11 ++++-
 packages/editor-ui/src/views/NodeView.vue     |  2 +-
 packages/editor-ui/src/views/canvasHelpers.ts | 49 ++++++++++---------
 7 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index 149d7a381dfd8..8034fb2bd9f6a 100644
--- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -94,9 +94,9 @@ export default Vue.extend({
 <style lang="scss" module>
 
 .activator {
-	width: 2em;
 	cursor: pointer;
 	padding: var(--spacing-2xs);
+	margin: 0;
 	border-radius: var(--border-radius-base);
 	line-height: normal !important;
 
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index d9bfe141edb5a..fc3922895517e 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -16,7 +16,7 @@
 			<n8n-menu default-active="workflow" @select="handleSelect" :collapse="isCollapsed">
 				<n8n-menu-item
 					index="logo"
-					:class="$style.logoItem"
+					:class="[$style.logoItem, $style.disableActiveStyle]"
 				>
 					<a href="https://n8n.io" target="_blank">
 						<img :src="basePath +  (isCollapsed ? 'n8n-logo-collapsed.svg' : 'n8n-logo-expanded.svg')" :class="$style.icon" alt="n8n"/>
@@ -578,7 +578,10 @@ li:global(.is-active) {
 	margin: 0 !important;
 	border-radius: 0 !important;
 	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-background-xlight);
-	&:hover { background-color: initial; }
+
+	&:hover, &:global(.is-active):hover {
+		background-color: initial !important;
+	}
 
 	* { vertical-align: middle; }
 	.icon {
@@ -586,6 +589,7 @@ li:global(.is-active) {
 		position: relative;
 		left: 6px;
 	}
+
 }
 
 .footerMenuItems {
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index 0076e8dd41394..7cf8552df981a 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -66,9 +66,11 @@ import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
 import { userHelpers } from './mixins/userHelpers';
 import { IFakeDoor } from '@/Interface';
 import GiftNotificationIcon from './GiftNotificationIcon.vue';
+import { newVersions } from './mixins/newVersions';
 
 export default mixins(
 	userHelpers,
+	newVersions,
 ).extend({
 	name: 'SettingsSidebar',
 	components: {
@@ -84,6 +86,9 @@ export default mixins(
 			return this.$store.getters['ui/getFakeDoorByLocation']('settings');
 		},
 	},
+	mounted() {
+		this.checkForNewVersions();
+	},
 	methods: {
 		canAccessPersonalSettings(): boolean {
 			return this.canUserAccessRouteByName(VIEWS.PERSONAL_SETTINGS);
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index d3fd0f9fc9cc6..c31d867c8d5ee 100644
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@@ -180,24 +180,12 @@ export default mixins(showMessage).extend({
 			else if (tags && tags[0] && tags[0].hoverItem) {
 				// @ts-ignore
 				tags[0].hoverItem();
-
-				// @ts-ignore
-				if (tags[0] && tags[0].$el && tags[0].$el.scrollIntoView) {
-					// @ts-ignore
-					tags[0].$el.scrollIntoView();
-				}
 			}
 		},
 		focusOnTag(tagId: string) {
 			const tagOptions = (this.$refs.tag as Vue[]) || [];
 			if (tagOptions && tagOptions.length) {
 				const added = tagOptions.find((ref: any) => ref.value === tagId); // tslint:disable-line:no-any
-				// @ts-ignore // focus on newly created item
-				if (added && added.$el && added.$el.scrollIntoView && added.hoverItem) {
-					// @ts-ignore
-					added.hoverItem();
-					added.$el.scrollIntoView();
-				}
 			}
 		},
 		focusOnInput() {
diff --git a/packages/editor-ui/src/components/mixins/mouseSelect.ts b/packages/editor-ui/src/components/mixins/mouseSelect.ts
index f15dae838b345..dcee43e1179fc 100644
--- a/packages/editor-ui/src/components/mixins/mouseSelect.ts
+++ b/packages/editor-ui/src/components/mixins/mouseSelect.ts
@@ -4,6 +4,7 @@ import mixins from 'vue-typed-mixins';
 
 import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers';
 import { getMousePosition, getRelativePosition, HEADER_HEIGHT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_EXPANDED } from '@/views/canvasHelpers';
+import { VIEWS } from '@/constants';
 
 export const mouseSelect = mixins(
 	deviceSupportHelpers,
@@ -17,6 +18,11 @@ export const mouseSelect = mixins(
 	mounted () {
 		this.createSelectBox();
 	},
+	computed: {
+		isDemo (): boolean {
+			return this.$route.name === VIEWS.DEMO;
+		},
+	},
 	methods: {
 		createSelectBox () {
 			this.selectBox.id = 'select-box';
@@ -43,9 +49,10 @@ export const mouseSelect = mixins(
 		},
 		getMousePositionWithinNodeView (event: MouseEvent | TouchEvent): XYPosition {
 			const [x, y] = getMousePosition(event);
-			const sidebarOffset = this.$store.getters['ui/sidebarMenuCollapsed'] ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_EXPANDED;
+			const sidebarOffset = this.isDemo ? 0 : this.$store.getters['ui/sidebarMenuCollapsed'] ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_EXPANDED;
+			const headerOffset = this.isDemo ? 0 : HEADER_HEIGHT;
 			// @ts-ignore
-			return getRelativePosition(x - sidebarOffset, y - HEADER_HEIGHT, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition);
+			return getRelativePosition(x - sidebarOffset, y - headerOffset, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition);
 		},
 		showSelectBox (event: MouseEvent) {
 			const [x, y] = this.getMousePositionWithinNodeView(event);
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index c2c56e1b75bea..91848b0b5b1a1 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1176,7 +1176,7 @@ export default mixins(
 					return;
 				}
 
-				const {zoomLevel, offset} = CanvasHelpers.getZoomToFit(nodes, this.sidebarMenuCollapsed, !this.isDemo);
+				const {zoomLevel, offset} = CanvasHelpers.getZoomToFit(nodes, !this.isDemo);
 
 				this.setZoomLevel(zoomLevel);
 				this.$store.commit('setNodeViewOffsetPosition', {newOffset: offset});
diff --git a/packages/editor-ui/src/views/canvasHelpers.ts b/packages/editor-ui/src/views/canvasHelpers.ts
index 8d8b8b9708f08..eb9cb0d86856f 100644
--- a/packages/editor-ui/src/views/canvasHelpers.ts
+++ b/packages/editor-ui/src/views/canvasHelpers.ts
@@ -477,17 +477,8 @@ export const getRelativePosition = (x: number, y: number, scale: number, offset:
 };
 
 export const getMidCanvasPosition = (scale: number, offset: XYPosition): XYPosition => {
-	let contentWidth = window.innerWidth;
-	let contentHeight = window.innerHeight;
-	const contentElement = document.getElementById('content');
-
-	if (contentElement) {
-		const contentBounds = contentElement.getBoundingClientRect();
-		contentWidth = contentBounds.width;
-		contentHeight = contentBounds.height;
-	}
-
-	return getRelativePosition((contentWidth - SIDEBAR_WIDTH) / 2, (contentHeight - HEADER_HEIGHT) / 2, scale, offset);
+	const { editorWidth, editorHeight } = getContentDimensions();
+	return getRelativePosition((editorWidth - SIDEBAR_WIDTH) / 2, (editorHeight - HEADER_HEIGHT) / 2, scale, offset);
 };
 
 export const getBackgroundStyles = (scale: number, offsetPosition: XYPosition) => {
@@ -623,32 +614,46 @@ export const addConnectionOutputSuccess = (connection: Connection, output: {tota
 };
 
 
-export const getZoomToFit = (nodes: INodeUi[], isSidebarCollapsed: boolean, addComponentPadding = true): {offset: XYPosition, zoomLevel: number} => {
+const getContentDimensions = (): { editorWidth: number, editorHeight: number } => {
+	let contentWidth = window.innerWidth;
+	let contentHeight = window.innerHeight;
+	const contentElement = document.getElementById('content');
+
+	if (contentElement) {
+		const contentBounds = contentElement.getBoundingClientRect();
+		contentWidth = contentBounds.width;
+		contentHeight = contentBounds.height;
+	}
+	return {
+		editorWidth: contentWidth,
+		editorHeight: contentHeight,
+	};
+};
+
+export const getZoomToFit = (nodes: INodeUi[], addComponentPadding = true): {offset: XYPosition, zoomLevel: number} => {
 	const {minX, minY, maxX, maxY} = getWorkflowCorners(nodes);
-	const sidebarWidth = addComponentPadding? isSidebarCollapsed ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_EXPANDED : 0;
-	const headerHeight = addComponentPadding? HEADER_HEIGHT: 0;
-	const footerHeight = addComponentPadding? 200: 100;
+	const { editorWidth, editorHeight } = getContentDimensions();
+	const sidebarWidth = addComponentPadding ? SIDEBAR_WIDTH : 0;
 
 	const PADDING = NODE_SIZE * 4;
 
-	const editorWidth = window.innerWidth;
 	const diffX = maxX - minX + sidebarWidth + PADDING;
 	const scaleX = editorWidth / diffX;
 
-	const editorHeight = window.innerHeight;
-	const diffY = maxY - minY + headerHeight + PADDING;
+	const diffY = maxY - minY + HEADER_HEIGHT + PADDING;
 	const scaleY = editorHeight / diffY;
 
 	const zoomLevel = Math.min(scaleX, scaleY, 1);
-	let xOffset = (minX * -1) * zoomLevel + SIDEBAR_WIDTH; // find top right corner
+
+	let xOffset = (minX * -1) * zoomLevel + sidebarWidth; // find top right corner
 	xOffset += (editorWidth - sidebarWidth - (maxX - minX) * zoomLevel) / 2; // add padding to center workflow
 
-	let yOffset = (minY * -1) * zoomLevel + headerHeight; // find top right corner
-	yOffset += (editorHeight - headerHeight - (maxY - minY + footerHeight) * zoomLevel) / 2; // add padding to center workflow
+	let yOffset = (minY * -1) * zoomLevel + HEADER_HEIGHT; // find top right corner
+	yOffset += (editorHeight - HEADER_HEIGHT - (maxY - minY) * zoomLevel) / 2; // add padding to center workflow
 
 	return {
 		zoomLevel,
-		offset: [xOffset - sidebarWidth, yOffset - headerHeight],
+		offset: [xOffset - sidebarWidth, yOffset - HEADER_HEIGHT],
 	};
 };
 

From 7eb31bfa45c690db5f0c9b7becf7bc46b7b31818 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Wed, 21 Sep 2022 18:49:34 +0200
Subject: [PATCH 17/39] =?UTF-8?q?=F0=9F=91=8C=20Addressing=20design=20revi?=
 =?UTF-8?q?ew=20comments=20for=20the=20new=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MainHeader/WorkflowDetails.vue |  2 +
 .../editor-ui/src/components/MainSidebar.vue  | 96 +++++++++++--------
 .../src/components/SettingsSidebar.vue        |  7 +-
 packages/editor-ui/src/modules/ui.ts          |  5 +
 4 files changed, 71 insertions(+), 39 deletions(-)

diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index c837978b073de..2b124683182da 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -420,6 +420,8 @@ $--text-line-height: 24px;
 $--header-spacing: 20px;
 
 .container {
+	position: relative;
+	top: -1px;
 	width: 100%;
 	display: flex;
 	align-items: center;
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index fc3922895517e..b00eac6d151c3 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -7,48 +7,47 @@
 		<div :class="{[$style.sideMenuWrapper]: true, [$style.expanded]: !isCollapsed}">
 			<div
 				id="collapse-change-button"
-				:class="['clickable', $style.sideMenuCollapseButton]"
+				:class="{
+					['clickable']: true,
+					[$style.sideMenuCollapseButton]: true,
+					[$style.expandedButton]: !isCollapsed
+				}"
 				@click="toggleCollapse"
-			>
-				<span v-if="isCollapsed" :class="$style.iconCollapsed">›</span>
-				<span v-else :class="$style.iconExpanded">‹</span>
-			</div>
+			></div>
 			<n8n-menu default-active="workflow" @select="handleSelect" :collapse="isCollapsed">
 				<n8n-menu-item
 					index="logo"
 					:class="[$style.logoItem, $style.disableActiveStyle]"
 				>
-					<a href="https://n8n.io" target="_blank">
-						<img :src="basePath +  (isCollapsed ? 'n8n-logo-collapsed.svg' : 'n8n-logo-expanded.svg')" :class="$style.icon" alt="n8n"/>
-					</a>
+					<img :src="basePath +  (isCollapsed ? 'n8n-logo-collapsed.svg' : 'n8n-logo-expanded.svg')" :class="$style.icon" alt="n8n"/>
 				</n8n-menu-item>
 				<div :class="$style.sideMenuFlexContainer">
 					<div :class="$style.sideMenuUpper">
 
 						<MenuItemsIterator :items="sidebarMenuTopItems" :root="true"/>
 
-						<n8n-menu-item index="workflows" :class="$style.disableActiveStyle">
+						<n8n-menu-item index="workflows" :class="[$style.disableActiveStyle, $style.workflowSubmenu]">
 							<font-awesome-icon icon="network-wired"/>
 							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.workflows') }}</span>
 						</n8n-menu-item>
 
-						<n8n-menu-item v-if="isTemplatesEnabled" index="templates">
+						<n8n-menu-item v-if="isTemplatesEnabled" index="templates" :class="$style.templatesSubmenu">
 							<font-awesome-icon icon="box-open"/>&nbsp;
 							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.templates') }}</span>
 						</n8n-menu-item>
 
-						<n8n-menu-item index="credentials" :class="$style.disableActiveStyle">
+						<n8n-menu-item index="credentials" :class="[$style.disableActiveStyle, $style.credentialsSubmenu]">
 							<font-awesome-icon icon="key"/>
 							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.credentials') }}</span>
 						</n8n-menu-item>
 
-						<n8n-menu-item index="executions"  :class="$style.disableActiveStyle">
+						<n8n-menu-item index="executions"  :class="[$style.disableActiveStyle, $style.executionsSubmenu]">
 							<font-awesome-icon icon="tasks"/>&nbsp;
 							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.executions') }}</span>
 						</n8n-menu-item>
 					</div>
 					<div :class="$style.sideMenuLower">
-						<n8n-menu-item index="settings" v-if="canUserAccessSettings && currentUser">
+						<n8n-menu-item index="settings" v-if="canUserAccessSettings && currentUser" :class="$style.settingsSubmenu">
 							<font-awesome-icon icon="cog"/>&nbsp;
 							<span slot="title" class="item-title-root">{{ $locale.baseText('settings') }}</span>
 						</n8n-menu-item>
@@ -176,6 +175,7 @@ export default mixins(
 		computed: {
 			...mapGetters('ui', {
 				isCollapsed: 'sidebarMenuCollapsed',
+				isNodeView: 'isNodeView',
 			}),
 			...mapGetters('versions', [
 				'hasVersionUpdates',
@@ -254,7 +254,10 @@ export default mixins(
 			if (this.$refs.user) {
 				this.$externalHooks().run('mainSidebar.mounted', { userRef: this.$refs.user });
 			}
-			this.checkWidthAndAdjustSidebar(window.outerWidth);
+			if (window.innerWidth > 900 && !this.isNodeView) {
+				this.$store.commit('ui/expandSidebarMenu');
+			}
+			this.checkWidthAndAdjustSidebar(window.innerWidth);
 		},
 		created() {
 			window.addEventListener("resize", this.onResize);
@@ -373,9 +376,8 @@ export default mixins(
 		--submenu-item-height: 27px;
 
 		.el-icon-arrow-down {
-			color: var(--color-text-dark);
 			font-weight: bold;
-			right: 9px;
+			right: 12px;
 
 			&:hover {
 				color: var(--color-primary);
@@ -427,15 +429,7 @@ export default mixins(
 					left: 60px;
 				}
 			}
-
-		}
-
-		.svg-inline--fa {
-			position: relative;
-			left: 3px;
-			margin-right: 15px;
 		}
-
 	}
 }
 
@@ -487,6 +481,22 @@ export default mixins(
 			width: 160%;
 		}
 	}
+
+	svg:global(.svg-inline--fa) {
+		position: relative;
+		left: 3px;
+	}
+
+	.executionsSubmenu svg:global(.svg-inline--fa),
+	.credentialsSubmenu svg:global(.svg-inline--fa),
+	.updatesSubmenu svg:global(.svg-inline--fa),
+	.settingsSubmenu svg:global(.svg-inline--fa)
+	{ left: 5px !important; }
+
+	.helpMenu{
+		svg:global(.svg-inline--fa) { left: 6px !important; }
+		:global(.el-menu--inline) { margin-bottom: 8px; }
+	}
 }
 
 .sideMenuWrapper {
@@ -524,16 +534,30 @@ export default mixins(
 	text-align: center;
 	border-radius: 50%;
 
-	span {
+	&::before {
+		display: block;
 		position: relative;
-		font-size: 24px;
+		left: .5px;
+		top: -3px;
+		transform: rotate(270deg);
+		content: "\e6df";
+		font-family: element-icons;
+		font-size: var(--font-size-2xs);
+		font-weight: bold;
+		color: var(--color-text-base);
 	}
 
-	.iconCollapsed { left: .5px; }
-	.iconExpanded { left: -.5px; }
+	&.expandedButton {
+		&::before {
+			transform: rotate(90deg);
+			left: -.5px;
+		}
+	}
 
 	&:hover {
-		color: var(--color-primary-shade-1);
+		&::before {
+			color: var(--color-primary-shade-1);
+		}
 	}
 }
 
@@ -578,6 +602,7 @@ li:global(.is-active) {
 	margin: 0 !important;
 	border-radius: 0 !important;
 	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-background-xlight);
+	cursor: default;
 
 	&:hover, &:global(.is-active):hover {
 		background-color: initial !important;
@@ -600,7 +625,7 @@ li:global(.is-active) {
 	padding-bottom: var(-spacing-m);
 
 	&.loggedIn {
-		padding-bottom: var(--spacing-m);
+		padding-bottom: var(--spacing-xs);
 	}
 }
 
@@ -621,13 +646,8 @@ li:global(.is-active) {
 		align-items: center;
 		height: 100%;
 		width: 100%;
-	}
-}
 
-.helpMenu {
-	svg {
-		position: relative;
-		left: 4px !important;
+		div > div { right: -.5em; }
 	}
 }
 
@@ -658,7 +678,7 @@ li:global(.is-active) {
 
 	.avatar {
 		position: relative;
-		left: -4px;
+		left: -2px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -678,7 +698,7 @@ li:global(.is-active) {
 		cursor: default;
 
 		.fullName {
-			width: 104px;
+			width: 99px;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			color: var(--color-text-dark);
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index 7cf8552df981a..502c40552864c 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -116,6 +116,11 @@ export default mixins(
 </script>
 
 <style lang="scss" module>
+:global(.el-menu) {
+	--menu-item-height: 35px;
+	--submenu-item-height: 27px;
+}
+
 .container {
 	min-width: 200px;
 	height: 100%;
@@ -136,7 +141,7 @@ export default mixins(
 
 .returnButton {
 	composes: tab;
-	margin-bottom: var(--spacing-xl);
+	margin-bottom: var(--spacing-l);
 	padding: 0 var(--spacing-xs);
 	height: 38px;
 	display: flex;
diff --git a/packages/editor-ui/src/modules/ui.ts b/packages/editor-ui/src/modules/ui.ts
index ccd5624cc9c3a..186a906ea18ae 100644
--- a/packages/editor-ui/src/modules/ui.ts
+++ b/packages/editor-ui/src/modules/ui.ts
@@ -207,6 +207,8 @@ const module: Module<IUiState, IRootState> = {
 		canDraggableDrop: (state: IUiState) => state.draggable.canDrop,
 		draggableStickyPos: (state: IUiState) => state.draggable.stickyPosition,
 		mappingTelemetry: (state: IUiState) => state.ndv.mappingTelemetry,
+		getCurrentView: (state: IUiState) => state.currentView,
+		isNodeView: (state: IUiState) => [VIEWS.NEW_WORKFLOW.toString(), VIEWS.WORKFLOW.toString(), VIEWS.EXECUTION.toString()].includes(state.currentView),
 	},
 	mutations: {
 		setMode: (state: IUiState, params: {name: string, mode: string}) => {
@@ -244,6 +246,9 @@ const module: Module<IUiState, IRootState> = {
 		collapseSidebarMenu: (state: IUiState) => {
 			state.sidebarMenuCollapsed = true;
 		},
+		expandSidebarMenu: (state: IUiState) => {
+			state.sidebarMenuCollapsed = false;
+		},
 		setCurrentView: (state: IUiState, currentView: string) => {
 			state.currentView = currentView;
 		},

From 98cfbefe768c345433fd9f3df4cde9562d616250 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Wed, 21 Sep 2022 19:04:34 +0200
Subject: [PATCH 18/39] =?UTF-8?q?=E2=9C=94=EF=B8=8F=20Updating=20`N8nActio?=
 =?UTF-8?q?nDropdown`=20component=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__snapshots__/ActionDropdown.spec.ts.snap      | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap b/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
index 1c9974bf3a386..cfeb3fa9eedaf 100644
--- a/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
+++ b/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
@@ -3,18 +3,18 @@
 exports[`components > N8nActionDropdown > should render custom styling correctly 1`] = `
 "<div class=\\"action-dropdown-container\\">
   <el-dropdown-stub trigger=\\"click\\" size=\\"\\" hideonclick=\\"true\\" placement=\\"bottom\\" visiblearrow=\\"true\\" showtimeout=\\"250\\" hidetimeout=\\"150\\" tabindex=\\"0\\">
-    <div class=\\"_activator_hogvu_1\\">
+    <div class=\\"_activator_lf4ng_1\\">
       <n8n-icon-stub icon=\\"ellipsis-v\\" size=\\"medium\\"></n8n-icon-stub>
     </div>
     <el-dropdown-menu-stub transformorigin=\\"true\\" placement=\\"bottom\\" boundariespadding=\\"5\\" offset=\\"0\\" visiblearrow=\\"true\\" arrowoffset=\\"0\\" appendtobody=\\"true\\" popperoptions=\\"[object Object]\\">
       <el-dropdown-item-stub command=\\"item1\\">
-        <div class=\\"_itemContainer_hogvu_16\\"><span class=\\"_icon_hogvu_20\\"><n8n-icon-stub icon=\\"thumbs-up\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 1 </span></div>
+        <div class=\\"_itemContainer_lf4ng_16\\"><span class=\\"_icon_lf4ng_20\\"><n8n-icon-stub icon=\\"thumbs-up\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 1 </span></div>
       </el-dropdown-item-stub>
       <el-dropdown-item-stub command=\\"item2\\" disabled=\\"true\\">
-        <div class=\\"_itemContainer_hogvu_16\\"><span class=\\"_icon_hogvu_20\\"><n8n-icon-stub icon=\\"thumbs-down\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 2 </span></div>
+        <div class=\\"_itemContainer_lf4ng_16\\"><span class=\\"_icon_lf4ng_20\\"><n8n-icon-stub icon=\\"thumbs-down\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 2 </span></div>
       </el-dropdown-item-stub>
       <el-dropdown-item-stub command=\\"item3\\" divided=\\"true\\">
-        <div class=\\"_itemContainer_hogvu_16\\"><span class=\\"_icon_hogvu_20\\"><n8n-icon-stub icon=\\"heart\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 3 </span></div>
+        <div class=\\"_itemContainer_lf4ng_16\\"><span class=\\"_icon_lf4ng_20\\"><n8n-icon-stub icon=\\"heart\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 3 </span></div>
       </el-dropdown-item-stub>
     </el-dropdown-menu-stub>
   </el-dropdown-stub>
@@ -24,16 +24,16 @@ exports[`components > N8nActionDropdown > should render custom styling correctly
 exports[`components > N8nActionDropdown > should render default styling correctly 1`] = `
 "<div class=\\"action-dropdown-container\\">
   <el-dropdown-stub trigger=\\"click\\" size=\\"\\" hideonclick=\\"true\\" placement=\\"bottom\\" visiblearrow=\\"true\\" showtimeout=\\"250\\" hidetimeout=\\"150\\" tabindex=\\"0\\">
-    <div class=\\"_activator_hogvu_1\\">
+    <div class=\\"_activator_lf4ng_1\\">
       <n8n-icon-stub icon=\\"ellipsis-v\\" size=\\"medium\\"></n8n-icon-stub>
     </div>
     <el-dropdown-menu-stub transformorigin=\\"true\\" placement=\\"bottom\\" boundariespadding=\\"5\\" offset=\\"0\\" visiblearrow=\\"true\\" arrowoffset=\\"0\\" appendtobody=\\"true\\" popperoptions=\\"[object Object]\\">
       <el-dropdown-item-stub command=\\"item1\\">
-        <div class=\\"_itemContainer_hogvu_16\\">
+        <div class=\\"_itemContainer_lf4ng_16\\">
           <!----><span> Action 1 </span></div>
       </el-dropdown-item-stub>
       <el-dropdown-item-stub command=\\"item2\\">
-        <div class=\\"_itemContainer_hogvu_16\\">
+        <div class=\\"_itemContainer_lf4ng_16\\">
           <!----><span> Action 2 </span></div>
       </el-dropdown-item-stub>
     </el-dropdown-menu-stub>

From 2862b218636c17ffb30bf563c426feadf01a284d Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 22 Sep 2022 12:33:00 +0200
Subject: [PATCH 19/39] =?UTF-8?q?=E2=9C=A8=20Remembering=20scroll=20positi?=
 =?UTF-8?q?on=20when=20going=20back=20to=20templates=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/router.ts              | 16 +++++++++++-
 .../src/views/TemplatesSearchView.vue         | 25 +++++++++++++++----
 .../editor-ui/src/views/TemplatesView.vue     | 23 +----------------
 3 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/packages/editor-ui/src/router.ts b/packages/editor-ui/src/router.ts
index 28769c31ae206..5babd669d18ad 100644
--- a/packages/editor-ui/src/router.ts
+++ b/packages/editor-ui/src/router.ts
@@ -21,11 +21,12 @@ import TemplatesWorkflowView from '@/views/TemplatesWorkflowView.vue';
 import TemplatesSearchView from '@/views/TemplatesSearchView.vue';
 import CredentialsView from '@/views/CredentialsView.vue';
 import { Store } from 'vuex';
-import { IPermissions, IRootState } from './Interface';
+import { IPermissions, IRootState, IWorkflowsState } from './Interface';
 import { LOGIN_STATUS, ROLE } from './modules/userHelpers';
 import { RouteConfigSingleView } from 'vue-router/types/router';
 import { VIEWS } from './constants';
 import { store } from './store';
+import e from 'express';
 
 Vue.use(Router);
 
@@ -39,6 +40,7 @@ interface IRouteConfig extends RouteConfigSingleView {
 			disabled?: true;
 			getProperties: (route: Route, store: Store<IRootState>) => object;
 		};
+		scrollOffset?: number;
 	};
 }
 
@@ -55,6 +57,13 @@ const router = new Router({
 	mode: 'history',
 	// @ts-ignore
 	base: window.BASE_PATH === '/%BASE_PATH%/' ? '/' : window.BASE_PATH,
+	scrollBehavior(to, from, savedPosition) {
+		// saved position == null means the page is NOT visited from history (back button)
+		if (savedPosition === null && to.name === VIEWS.TEMPLATES && to.meta) {
+			// for templates view, reset scroll position in this case
+			to.meta.setScrollPosition(0);
+		}
+	},
 	routes: [
 		{
 			path: '/',
@@ -147,6 +156,8 @@ const router = new Router({
 			meta: {
 				templatesEnabled: true,
 				getRedirect: getTemplatesRedirect,
+				// Templates view remembers it's scroll position on back
+				scrollOffset: 0,
 				telemetry: {
 					getProperties(route: Route, store: Store<IRootState>) {
 						return {
@@ -154,6 +165,9 @@ const router = new Router({
 						};
 					},
 				},
+				setScrollPosition(pos: number) {
+					this.scrollOffset = pos;
+				},
 				permissions: {
 					allow: {
 						loginStatus: [LOGIN_STATUS.LoggedIn],
diff --git a/packages/editor-ui/src/views/TemplatesSearchView.vue b/packages/editor-ui/src/views/TemplatesSearchView.vue
index 06d0e3f381392..e27eeb5ba35c6 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@@ -320,26 +320,34 @@ export default mixins(genericHelpers, debounceHelper).extend({
 				this.updateSearchTracking(search, categories);
 			}
 		},
-		scrollToTop() {
+		scrollTo(position: number, behavior: ScrollBehavior = 'smooth') {
 			setTimeout(() => {
 				const contentArea = document.getElementById('content');
 				if (contentArea) {
 					contentArea.scrollTo({
-						top: 0,
-						behavior: 'smooth',
+						top: position,
+						behavior,
 					});
 				}
-			}, 100);
+			}, 0);
 		},
 	},
 	watch: {
 		workflows(newWorkflows) {
 			if (newWorkflows.length === 0) {
-				this.scrollToTop();
+				this.scrollTo(0);
 			}
 		},
 	},
 	beforeRouteLeave(to, from, next) {
+		const contentArea = document.getElementById('content');
+		if (contentArea) {
+			// When leaving this page, store current scroll position in route data
+			if (this.$route.meta && this.$route.meta.setScrollPosition && typeof this.$route.meta.setScrollPosition === 'function') {
+				this.$route.meta.setScrollPosition(contentArea.scrollTop);
+			}
+		}
+
 		this.trackSearch();
 		next();
 	},
@@ -348,6 +356,13 @@ export default mixins(genericHelpers, debounceHelper).extend({
 		this.loadCategories();
 		this.loadWorkflowsAndCollections(true);
 		this.$store.dispatch('users/showPersonalizationSurvey');
+
+		setTimeout(() => {
+			// Check if there is scroll position saved in route and scroll to it
+			if (this.$route.meta && this.$route.meta.scrollOffset > 0) {
+				this.scrollTo(this.$route.meta.scrollOffset, 'auto');
+			}
+		}, 100);
 	},
 	async created() {
 		if (this.$route.query.search && typeof this.$route.query.search === 'string') {
diff --git a/packages/editor-ui/src/views/TemplatesView.vue b/packages/editor-ui/src/views/TemplatesView.vue
index f3522655fa012..10f149823cd15 100644
--- a/packages/editor-ui/src/views/TemplatesView.vue
+++ b/packages/editor-ui/src/views/TemplatesView.vue
@@ -1,6 +1,6 @@
 <template>
 	<div :class="$style.template">
-		<div :class="{[$style.container]: true, [$style.menuCollapsed]: isMenuCollapsed}">
+		<div :class="$style.container">
 			<div :class="$style.header">
 				<div :class="$style.goBack" v-if="goBackEnabled">
 					<GoBackButton />
@@ -29,11 +29,6 @@ export default Vue.extend({
 			default: false,
 		},
 	},
-	computed: {
-		isMenuCollapsed(): boolean {
-			return this.$store.getters['ui/sidebarMenuCollapsed'];
-		},
-	},
 });
 </script>
 
@@ -43,22 +38,6 @@ export default Vue.extend({
 	padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-4xl) var(--spacing-xl);
 }
 
-.mockMenu {
-	height: 100%;
-	min-height: 100vh;
-}
-
-.menu {
-	composes: mockMenu;
-	min-width: $--sidebar-width;
-}
-
-.expandedMenu {
-	composes: mockMenu;
-	min-width: $--sidebar-expanded-width;
-}
-
-
 .container {
 	width: 100%;
 	max-width: 1024px;

From 9e2ec6ba7016418dca16651c77c344395bf5420d Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 22 Sep 2022 13:03:57 +0200
Subject: [PATCH 20/39] =?UTF-8?q?=E2=9C=A8=20Updating=20zoomToFit=20logic?=
 =?UTF-8?q?=20to=20account=20for=20footer=20content?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/views/canvasHelpers.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/src/views/canvasHelpers.ts b/packages/editor-ui/src/views/canvasHelpers.ts
index eb9cb0d86856f..17c69d514de19 100644
--- a/packages/editor-ui/src/views/canvasHelpers.ts
+++ b/packages/editor-ui/src/views/canvasHelpers.ts
@@ -634,26 +634,28 @@ export const getZoomToFit = (nodes: INodeUi[], addComponentPadding = true): {off
 	const {minX, minY, maxX, maxY} = getWorkflowCorners(nodes);
 	const { editorWidth, editorHeight } = getContentDimensions();
 	const sidebarWidth = addComponentPadding ? SIDEBAR_WIDTH : 0;
+	const headerHeight = addComponentPadding ? HEADER_HEIGHT: 0;
+	const footerHeight = addComponentPadding ? 200 : 100;
 
 	const PADDING = NODE_SIZE * 4;
 
 	const diffX = maxX - minX + sidebarWidth + PADDING;
 	const scaleX = editorWidth / diffX;
 
-	const diffY = maxY - minY + HEADER_HEIGHT + PADDING;
+	const diffY = maxY - minY + PADDING;
 	const scaleY = editorHeight / diffY;
 
 	const zoomLevel = Math.min(scaleX, scaleY, 1);
 
-	let xOffset = (minX * -1) * zoomLevel + sidebarWidth; // find top right corner
+	let xOffset = (minX * -1) * zoomLevel; // find top right corner
 	xOffset += (editorWidth - sidebarWidth - (maxX - minX) * zoomLevel) / 2; // add padding to center workflow
 
-	let yOffset = (minY * -1) * zoomLevel + HEADER_HEIGHT; // find top right corner
-	yOffset += (editorHeight - HEADER_HEIGHT - (maxY - minY) * zoomLevel) / 2; // add padding to center workflow
+	let yOffset = (minY * -1) * zoomLevel + headerHeight; // find top right corner
+	yOffset += (editorHeight - headerHeight - (maxY - minY + footerHeight) * zoomLevel) / 2; // add padding to center workflow
 
 	return {
 		zoomLevel,
-		offset: [xOffset - sidebarWidth, yOffset - HEADER_HEIGHT],
+		offset: [xOffset, yOffset - headerHeight],
 	};
 };
 

From bbef42d1df623e5cd4a32694572c836adc3b4112 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 22 Sep 2022 14:59:01 +0200
Subject: [PATCH 21/39] =?UTF-8?q?=F0=9F=91=8C=20Addressing=20latest=20side?=
 =?UTF-8?q?bar=20review=20comments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/public/favicon.ico         | Bin 5430 -> 15086 bytes
 packages/editor-ui/src/components/Logo.vue    |   2 +-
 .../editor-ui/src/components/MainSidebar.vue  |   3 +-
 .../src/components/NodeCreator/SearchBar.vue  |   1 -
 .../src/components/SettingsSidebar.vue        |  50 +++++---------
 .../editor-ui/src/components/WorkflowOpen.vue |  64 +++++++++++++++++-
 .../src/plugins/i18n/locales/en.json          |   2 +
 7 files changed, 84 insertions(+), 38 deletions(-)

diff --git a/packages/editor-ui/public/favicon.ico b/packages/editor-ui/public/favicon.ico
index 0b4949e8fda9502820e15173974133a76dc48bc6..e5f92d7f5eb2ef4b436d8ae237005633363903f7 100644
GIT binary patch
literal 15086
zcmeI2du$X{6o;o2XrVlcfPmHR5~yN$q=-OcKoB8-XdppD1eHewQKC{Y0TQ*u3YDM`
zf>9tr5d={YB>aJfL@EgQKudh_60{cNWwaH10BgtZw>!7Y4ofL%w_V6g^7Y)ux%ZxX
z=FYvdXKGnVR<f0yZ6Sl!nk>ueWm#4*=;YHa>kwt>NYziSZ&`Ct=!6bUtZ|_7@YOLQ
z{J*{jd=K~@@IByr!1sXffvdp-xx-F0fUYna#>4H<>`Is$cD99ua2(3PhSRVKdMEN6
zu&*hs0@*D7f>QX;$^U@tmZ)>UwlQ$Vv2_D-0Ne_5;1p<1uLEz^b$?-p)_Gr;4J%*|
z$VU0Oy|IwA^p=6@4nn4>t1F2OX^;<pfb4R!o_v&#$xn84enZyz8p4KYaMrO&&+2wK
z?Bu^jwl%&bodkNOHOFG8xHm?}E755Pt)Ue(@YZ|t=+uLBXai~9dUu}sOxO#u=L^Vz
zRCo;Ztcs=383Hf`<ag=63k}`<xzp68z(~+N{2soAci=9FIS<OUSIa-UKz0>^{M*{y
zw@Fhz6!e^iV6>}TzWNYkr}oZcAb*=@x`cEeqwkf}$p_Da_AT|{ri}d4;9Zw@Qnuft
zt9J6?Mz}u4I8z<{lgO^_dh%KD9=L7LJd0qMTi2VW{$V%;8vg*i0*gUDP??^!!KNMQ
z43N)N_a|uFd9V#MrpgyVva5~On9d^AX`Qz;bw*Ow1O~wj$b<XgI#Yi!iOyG`e)mBS
zqer?Q=-#PLJ{=4LVK&ImdJc0TyuOfH2bzoYkHUi>dq#rR;yF-Vz8Rw?B>nyC^!u{A
zKg#s{FL&x>uhye5KGwe7&eP@|M@M#Qe$qE~t86P=(x>h|FO{ahE8YGpef=cF^BZfO
zur`{(5SR(i!6>LW<J5+Ho$sF)vHfOj+W`N7o*kiQNoU_6cN_9LzwU)vKfl~|m^5~@
zgDoJNwRdPg`vtTosO%8*H2OwTR@?6nX^h#}gM2v+bQa6sI!ii15VT+GJklJrH%6VS
zW*+g9j3>K{508`H4u$ZEhhNFd#+^`c){#zzrJ%Zf5QvwpvHE2^`TGShK9n7mv6}jN
z?!L%B<+M41?BcGgjWlC6fW9yrR)TDFvx@wF(7cKu!`MYydyRBe_Z?K!8J*gcjIT33
z3XM;h_H>=|dIt1P(jR)lJop=Azn+VzdsCaXS2h-QwSf1*tgX|e%Ruu{*>2D$ri8t)
zF9TkKlVI#VMS3ILlCXxm48zWbkPTyC9Q1)EE)_rNd%*XA?*ZQfz6X2{_#U`y57^<$
zvf?QV?MVN#@*?u3eqkBPjL6b}Bb|K7eDcNRfuqu&6-qg(_OoUr@3fJb-Af9>GO4tA
zlyu6Cp4yeCMEVI4$z*;dq1>=6waOfMCSr$^w?pH@dE3#q)jpnnk^Op!4nlvZ_&+WF
zm&?C=5BMIq`aQt!ImHhGFbHy>X>HA#vGo1$A@~s#tJC+Vb<iQ+HZX?feH$DDeY>6x
zOF-Wv-h_*OZ>)}O^s9K~SWtXpFKE2s>JzE>l48Jz;ga8LFV_zGl)s+=jj1v8eM|A6
zA<p=Ujp<vJ;=LE#1In6$VrRoa@oi4F^A~x=3%bJy=naj|*M{fUkur^`??^X-*4*!)
znD_*k1B&%1W|it`+rcT9y(T8DSfcs<mPWb&)Sv1VYf-G!9X}mLUh8bC`bH+h<DfO5
z7>(+-zy)zh%4Cyb`HSIEP;6E)sk=dbn+RuM6HJ0Np#GkPM$iVduC&JQFmod<8@j+K
z7z(XSom*0_d$t+E-`SD64;sH1cEE9vZ^LmhWLx+KO5rou1M<t;(AeE~RnoN4+^RDE
zP3jNbnjSwc{`bxuyE8!RTi;`}=8~NGC@mXmZ2iR;yC3~4=B(JQ?$trK&*+h^$>*;V
z{WXVlM+T8v(<fj$Oo0QSy}7fop*oU&-22ZF^1EH^C9P-hMKcEJN8lVxGG*13^kw$n
z^`!Nzi;v-Rklz=8x#v%iJ_{47JFd4qeb$FmhZN+sAUpKD&VxMA9<A>TS>E>X$TLn4
zC<N^_nz!yx_-u&Bc(M9qylX&v+W?6A|Abijewpt9-vjaYKqL-P+28VjZHE@vc3F{a
z7sIXv1^I^pEf>9E=i~&!C|!{M(>B{KT4LKj-(cINV9y20D!=qnqp(B}D&iEi`t_cH
z6YOGtYz5umvcAcouirjdumaY>Tu80T^w870?o`+c%b`8!EDfqXatJJh@gUu7m=8~a
z&fcz|_bBc0tDLmz!@m`fpTYyK@=c^C!ZLUj-h!FVSbE3o1r`5iPrAzOoj&wVqIV&^
zgUeoH{{$x=%l@_0sg2HTy|;e=^5aDHS=oh-#>fTru^M*67#I#~D{E`&(9>^*7NE0o
z1ZaHSgRw@Zs**OEzus-LAnNyARr^RJJ;gMmC?Wr)Wo=$*Sp)MTZ2pL{9T1McM(h6%
DDc1&a

literal 5430
zcmeH~K}eKA6vrnK2@#Ws2$9^Ah(tt0NQVdy5g`#_^sR_QhcI{Z5aKBaN{S>TDnueG
zC?q^ZbcjGOm57px=nx$W3PL(mbcod5oqqpsXSUB3(iT>N_Jg1E=FNNaX5PMUzR{Rf
zrp(mT7}}WWDmSLV7!!+S`*+X}qH9Elh(%UUQ+miiJegh{B<ITtNk%-G8G@H^7s&GR
z9&CHzIZPkwPM6Wjze(P-4R8gH9PFNBEM1O#0tR6N)WH-~zylbCr?A@jYiuvvhtr_B
zu0aQA>^Af{+j8VB5c)dZWBPmG9-M_?xC#MiEaxwKJ?N@oQ;-Pv(ugddqwz#adsB=)
zxCFJ3Tfg(&fbJD2-cUH<5`VDs`BM(x!hp-u>m^(l4dbh|Pr+;GU1YEf1+n!z<#M<T
zmw(p8T4NUQk^VDd#%>wYaw^N%19THGn`eu!&Y2kO0-Z;tr<8$G2L8Vca2{4cO`+e`
zLNn&hbA6-cz=F<pU5QrYA=VuiSKoAfcYne=s4T_;g2cSOvHL)=6gvf@x>qP3a!>qt
zn1|M4#Ap6~P@Wa{M?7gI5BgZh2b?bOx@gO|?gTqvT~r^H8H+ia>OB2M^olzU>w@ku
z7rIM)hfdHv=nd#MsEzstiBvhdi;!wR9<EvSa#D9LZ%6%Bq8kP4Y&7rT-{YCq_H1r*
zdt-bn%t-Hi6uZ;=_!eDvdp1`OC4=r(%H95m%>}0$p-qDJqWx}(C&GK7>RdjXy^mV@
zH4wlNh(*V|j9xkW?C&keYe8#8mzj3(duFD|m9M4E^cC-uL-MGf^KV-G6n}>J74k#Y
znic;G=q@G{|EX%+*)+MF;iol(zgwa4d))7HkGYhm3DADp{63IXAJSciqworp|80ND
zzxP*rC|i@w_;kT;?#SW)3G7?-Hw-qOtv}7%uRF8%r_UK0-iy7B^3fF;Z*}i>uKxU(
zT4LyIxCx=Zt5xkY_Z}g~pamAZ9}DNnG&-BLdHMzKUvx||J{=I&2<=Yr^*oSoTWFs-
z^Uj~JW|SwPobq0$t2Dp9MfBgm%R=Mj`$f-R@;efRII3aoKm7h^9msmWCi3SgMxQv_
zK{@yUs%6!$*0bn5Dn@+GNvt+de8ttf-5VU6&DD6Z;zsAqz6a^`wBcD39V^MD43sjk
z@)@v8KAC!JQ){gK_SM>Pn0|3?@?HJq^EYgBU44k;Gn4NhS^MG%Hg(v7rEfnjHT^GE
C-e)!d

diff --git a/packages/editor-ui/src/components/Logo.vue b/packages/editor-ui/src/components/Logo.vue
index d568497a305fc..0ce2afda0c68d 100644
--- a/packages/editor-ui/src/components/Logo.vue
+++ b/packages/editor-ui/src/components/Logo.vue
@@ -1,6 +1,6 @@
 <template>
 	<img
-		:src="basePath + 'n8n-logo.svg'"
+		:src="basePath + 'n8n-logo-expanded.svg'"
 		:class="$style.img"
 		alt="n8n.io"
 	/>
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index e85c573fa84b6..6dd3dbd2856f4 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -489,6 +489,7 @@ export default mixins(
 		left: 3px;
 	}
 
+	svg:global(.svg-inline--fa.fa-home) { left: 4px; }
 	.executionsSubmenu svg:global(.svg-inline--fa),
 	.credentialsSubmenu svg:global(.svg-inline--fa),
 	.updatesSubmenu svg:global(.svg-inline--fa),
@@ -552,7 +553,7 @@ export default mixins(
 	&.expandedButton {
 		&::before {
 			transform: rotate(90deg);
-			left: -.5px;
+			left: -1px;
 		}
 	}
 
diff --git a/packages/editor-ui/src/components/NodeCreator/SearchBar.vue b/packages/editor-ui/src/components/NodeCreator/SearchBar.vue
index 4d007a591f0cb..80829ed5e87c2 100644
--- a/packages/editor-ui/src/components/NodeCreator/SearchBar.vue
+++ b/packages/editor-ui/src/components/NodeCreator/SearchBar.vue
@@ -63,7 +63,6 @@ export default mixins(externalHooks).extend({
 	align-items: center;
 	padding-left: 14px;
 	padding-right: 20px;
-	border-top: 1px solid $--node-creator-border-color;
 	border-bottom: 1px solid $--node-creator-border-color;
 	background-color: $--node-creator-search-background-color;
 	color: $--node-creator-search-placeholder-color;
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index 502c40552864c..7a3bc2ca565b2 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -13,13 +13,13 @@
 				</i>
 				<span slot="title">{{ $locale.baseText('settings.personal') }}</span>
 			</n8n-menu-item>
-			<n8n-menu-item index="/settings/users" v-if="canAccessUsersSettings()" :class="$style.tab">
+			<n8n-menu-item index="/settings/users" v-if="canAccessUsersSettings()" :class="[$style.tab, $style.usersMenu]">
 				<i :class="$style.icon">
 					<font-awesome-icon icon="user-friends" />
 				</i>
 				<span slot="title">{{ $locale.baseText('settings.users') }}</span>
 			</n8n-menu-item>
-			<n8n-menu-item index="/settings/api" v-if="canAccessApiSettings()" :class="$style.tab">
+			<n8n-menu-item index="/settings/api" v-if="canAccessApiSettings()" :class="[$style.tab, $style.apiMenu]">
 				<i :class="$style.icon">
 					<font-awesome-icon icon="plug" />
 				</i>
@@ -42,14 +42,6 @@
 				</i>
 				<span slot="title">{{ $locale.baseText('settings.communityNodes') }}</span>
 			</n8n-menu-item>
-			<n8n-menu-item :class="$style.updatesSubmenu" v-if="hasVersionUpdates" @click="openUpdatesPanel">
-				<div :class="$style.giftContainer">
-					<GiftNotificationIcon />
-				</div>
-				<span slot="title" :class="['item-title-root', $style.updatesLabel]">
-					{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}}
-				</span>
-			</n8n-menu-item>
 		</n8n-menu>
 		<div :class="$style.versionContainer">
 			<n8n-link @click="onVersionClick" size="small">
@@ -78,10 +70,6 @@ export default mixins(
 	},
 	computed: {
 		...mapGetters('settings', ['versionCli']),
-		...mapGetters('versions', [
-			'hasVersionUpdates',
-			'nextVersions',
-		]),
 		settingsFakeDoorFeatures(): IFakeDoor[] {
 			return this.$store.getters['ui/getFakeDoorByLocation']('settings');
 		},
@@ -133,10 +121,21 @@ export default mixins(
 	ul {
 		height: 100%;
 	}
+
+	:global(.el-menu-item) > span{
+		position: relative;
+		left: 8px;
+	}
+}
+
+.returnButton :global(.n8n-heading) {
+	position: relative;
+	left: 8px;
 }
 
 .tab {
 	margin-bottom: var(--spacing-2xs);
+	svg:global(.svg-inline--fa) { position: relative; }
 }
 
 .returnButton {
@@ -159,32 +158,15 @@ export default mixins(
 	}
 }
 
+.usersMenu svg:global(.svg-inline--fa) { left: -2px; }
+.apiMenu svg:global(.svg-inline--fa) { left: 2px; }
+
 .icon {
 	width: 16px;
 	display: inline-flex;
 	margin-right: 10px;
 }
 
-.updatesSubmenu {
-	position: absolute;
-	bottom: 25px;
-	color: $--sidebar-inactive-color !important;
-
-	.updatesLabel {
-		position: relative;
-		left: 10px;
-		font-size: var(--font-size-xs);
-	}
-
-	.giftContainer {
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-		height: 100%;
-		width: 100%;
-	}
-}
-
 .versionContainer {
 	position: absolute;
 	left: 23px;
diff --git a/packages/editor-ui/src/components/WorkflowOpen.vue b/packages/editor-ui/src/components/WorkflowOpen.vue
index 0b80bf8665490..ae0eb9eb2da33 100644
--- a/packages/editor-ui/src/components/WorkflowOpen.vue
+++ b/packages/editor-ui/src/components/WorkflowOpen.vue
@@ -25,6 +25,16 @@
 							<font-awesome-icon slot="prefix" icon="search"></font-awesome-icon>
 						</n8n-input>
 					</div>
+					<div class="open-wf-button">
+						<n8n-button
+							:label="$locale.baseText('workflowOpen.newWFButton.label')"
+							:title="$locale.baseText('workflowOpen.newWFButton.title')"
+							size="large"
+							icon="plus"
+							type="primary"
+							@click="onNewWFClick"
+						/>
+					</div>
 				</div>
 			</template>
 
@@ -68,12 +78,14 @@ import WorkflowActivator from '@/components/WorkflowActivator.vue';
 import { convertToDisplayDate } from './helpers';
 import { mapGetters } from 'vuex';
 import { MODAL_CANCEL, MODAL_CLOSE, MODAL_CONFIRMED, VIEWS, WORKFLOW_OPEN_MODAL_KEY } from '../constants';
+import { titleChange } from './mixins/titleChange';
 
 export default mixins(
 	genericHelpers,
 	restApi,
 	showMessage,
 	workflowHelpers,
+	titleChange,
 ).extend({
 	name: 'WorkflowOpen',
 	components: {
@@ -226,6 +238,55 @@ export default mixins(
 				);
 			}
 		},
+		async onNewWFClick () {
+			const result = this.$store.getters.getStateIsDirty;
+			if(result) {
+				const confirmModal = await this.confirmModal(
+					this.$locale.baseText('mainSidebar.confirmMessage.workflowNew.message'),
+					this.$locale.baseText('mainSidebar.confirmMessage.workflowNew.headline'),
+					'warning',
+					this.$locale.baseText('mainSidebar.confirmMessage.workflowNew.confirmButtonText'),
+					this.$locale.baseText('mainSidebar.confirmMessage.workflowNew.cancelButtonText'),
+					true,
+				);
+				if (confirmModal === MODAL_CONFIRMED) {
+					const saved = await this.saveCurrentWorkflow({}, false);
+					if (saved) this.$store.dispatch('settings/fetchPromptsData');
+					if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
+						this.$root.$emit('newWorkflow');
+					} else {
+						this.$router.push({ name: VIEWS.NEW_WORKFLOW });
+					}
+					this.$showMessage({
+						title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
+						type: 'success',
+					});
+				} else if (confirmModal === MODAL_CANCEL) {
+					this.$store.commit('setStateDirty', false);
+					if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
+						this.$root.$emit('newWorkflow');
+					} else {
+						this.$router.push({ name: VIEWS.NEW_WORKFLOW });
+					}
+					this.$showMessage({
+						title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
+						type: 'success',
+					});
+				} else if (confirmModal === MODAL_CLOSE) {
+					return;
+				}
+			} else {
+				if (this.$router.currentRoute.name !== VIEWS.NEW_WORKFLOW) {
+					this.$router.push({ name: VIEWS.NEW_WORKFLOW });
+				}
+				this.$showMessage({
+					title: this.$locale.baseText('mainSidebar.showMessage.handleSelect3.title'),
+					type: 'success',
+				});
+			}
+			this.$titleReset();
+			this.$store.commit('ui/closeModal', WORKFLOW_OPEN_MODAL_KEY);
+		},
 		workflowActiveChanged (data: { id: string, active: boolean }) {
 			for (const workflow of this.workflows) {
 				if (workflow.id === data.id) {
@@ -253,7 +314,8 @@ export default mixins(
 	}
 
 	.search-filter {
-		margin-left: 10px;
+		margin-left: 12px;
+		margin-right: 24px;
 		min-width: 160px;
 	}
 
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index a96f4a832231f..dea31cd828eee 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1072,6 +1072,8 @@
 	"workflowOpen.showMessage.message": "This is the current workflow",
 	"workflowOpen.showMessage.title": "Workflow already open",
 	"workflowOpen.updated": "Updated",
+	"workflowOpen.newWFButton.label": "Add workflow",
+	"workflowOpen.newWFButton.title": "Create a new workflow",
 	"workflowPreview.showError.arrayEmpty": "Must have an array of nodes",
 	"workflowPreview.showError.missingWorkflow": "Missing workflow",
 	"workflowPreview.showError.previewError.message": "Unable to preview workflow",

From 18a7d0a04f9d0c121ffd42063d8424658abb8853 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Fri, 23 Sep 2022 13:47:11 +0200
Subject: [PATCH 22/39] =?UTF-8?q?=E2=9C=A8=20New=20`n8n-menu-item`=20compo?=
 =?UTF-8?q?nent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../N8nMenuItem/MenuItem.stories.ts           |  64 ++++++++++
 .../src/components/N8nMenuItem/MenuItem.vue   | 118 +++++++++++++++++-
 packages/design-system/src/types/index.ts     |   1 +
 packages/design-system/src/types/menu.ts      |  14 +++
 packages/editor-ui/src/Interface.ts           |  18 +--
 5 files changed, 196 insertions(+), 19 deletions(-)
 create mode 100644 packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
 create mode 100644 packages/design-system/src/types/menu.ts

diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts b/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
new file mode 100644
index 0000000000000..b55263ded7f4e
--- /dev/null
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
@@ -0,0 +1,64 @@
+import N8nMenuItem from "."
+import N8nMenu from "../N8nMenu";
+import { StoryFn } from '@storybook/vue';
+
+export default {
+	title: 'Atoms/MenuItem',
+	component: N8nMenuItem,
+};
+
+const template: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { N8nMenu, N8nMenuItem },
+	template: `
+		<n8n-menu>
+			<n8n-menu-item v-bind="$props" />
+		</n8n-menu>
+	`
+});
+
+export const defaultMenuItem = template.bind({});
+defaultMenuItem.args = {
+	item: {
+		id: 'workflows',
+		icon: 'heart',
+		label: 'Workflows',
+	}
+};
+
+export const link = template.bind({});
+link.args = {
+	item: {
+		id: 'website',
+		icon: 'globe',
+		label: 'Website',
+		type: 'link',
+		properties: {
+			href: 'https://www.n8n.io',
+			newWindow: true,
+		},
+	},
+};
+
+export const withChildren = template.bind({});
+withChildren.args = {
+	item: {
+		id: 'help',
+		icon: 'question',
+		label: 'Help',
+		children: [
+			{ icon: 'info', label: 'About n8n', id: 'about' },
+			{ icon: 'book', label: 'Documentation', id: 'docs' },
+			{
+				id: 'quickstart',
+				icon: 'video',
+				label: 'Quickstart',
+				type: 'link',
+				properties: {
+					href: 'https://www.youtube.com/watch?v=RpjQTGKm-ok',
+					newWindow: true,
+				},
+			},
+		]
+	}
+};
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index 03aa18ed67aaa..2a5975f8c5024 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -1,7 +1,121 @@
+<template>
+	<el-submenu :class="[$style.submenu]" v-if="item.children" :index="item.id" :title="item.label">
+			<template slot="title">
+				<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" />
+				<span :class="$style.label">{{ item.label }}</span>
+			</template>
+		<el-menu-item
+			v-for="child in item.children"
+			:key="child.id"
+			:class="$style.menuItem"
+			:index="child.id"
+			:title="child.label"
+			@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>
+	<el-menu-item v-else :class="$style.menuItem" :index="item.id" :title="item.label" @click="onItemClick(item)">
+		<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" />
+		<span :class="$style.label">{{ item.label }}</span>
+	</el-menu-item>
+</template>
+
 <script lang="ts">
+import ElSubmenu from 'element-ui/lib/submenu';
 import ElMenuItem from 'element-ui/lib/menu-item';
+import N8nIcon from '../N8nIcon';
+import Vue, { PropType } from 'vue';
+import { IMenuItem } from '../../types';
+
+
+export default Vue.extend({
+	name: 'n8n-menu-item',
+	components: {
+		ElSubmenu,
+		ElMenuItem,
+		N8nIcon,
+	},
+	props: {
+		item: {
+			type: Object as () => IMenuItem,
+			required: true,
+		},
+	},
+	methods: {
+		onItemClick(item: IMenuItem, event: MouseEvent) {
+			if (item && item.type === 'link' && item.properties) {
+				const href: string = item.properties.href;
+				if (!href) {
+					return;
+				}
 
-ElMenuItem.name = 'n8n-menu-item';
+				if (item.properties.newWindow) {
+					window.open(href);
+				}
+				else {
+					window.location.assign(item.properties.href);
+				}
+
+			}
+			this.$emit('click', event);
+		},
+	},
+});
 
-export default ElMenuItem;
 </script>
+
+<style module lang="scss">
+// Element menu-item overrides
+:global(.el-menu-item), :global(.el-submenu__title) {
+	--menu-font-color: var(--color-text-base);
+	--menu-item-active-background-color: var(--color-foreground-base);
+	--menu-item-active-font-color: var(--color-text-dark);
+	--menu-item-hover-fill: var(--color-foreground-base);
+	--menu-item-hover-font-color: var(--color-text-dark);
+	--menu-item-height: 35px;
+	--submenu-item-height: 27px;
+}
+
+
+.submenu {
+	:global(.el-submenu__title) {
+		display: flex;
+		align-items: center;
+		border-radius: var(--border-radius-base);
+		padding: var(--spacing-2xs) var(--spacing-xs) !important;
+		user-select: none;
+
+		&:hover {
+			.icon { color: var(--color-text-dark) }
+		}
+	}
+
+	.menuItem {
+		height: var(--submenu-item-height);
+		margin: var(--spacing-2xs) 0 !important;
+		padding-left: var(--spacing-l) !important;
+		user-select: none;
+		&:hover {
+			.icon { color: var(--color-text-dark) }
+		}
+	};
+}
+
+.menuItem {
+	display: flex;
+	padding: var(--spacing-2xs) var(--spacing-xs) !important;
+	margin: 0 !important;
+	border-radius: var(--border-radius-base);
+}
+
+.icon {
+	margin-right: var(--spacing-xs);
+}
+
+.label {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+</style>
diff --git a/packages/design-system/src/types/index.ts b/packages/design-system/src/types/index.ts
index 20b5b9aa9f39d..0a9f3769b3a27 100644
--- a/packages/design-system/src/types/index.ts
+++ b/packages/design-system/src/types/index.ts
@@ -1,2 +1,3 @@
 export * from './form';
 export * from './user';
+export * from './menu';
diff --git a/packages/design-system/src/types/menu.ts b/packages/design-system/src/types/menu.ts
new file mode 100644
index 0000000000000..abef8ac84bcdd
--- /dev/null
+++ b/packages/design-system/src/types/menu.ts
@@ -0,0 +1,14 @@
+export interface IMenuItem {
+	id: string;
+	label: string;
+	icon?: string;
+	position?: 'top' | 'bottom';
+	type: 'default' | 'link';
+	properties: ILinkMenuItemProperties;
+	children: IMenuItem[],
+}
+
+export interface ILinkMenuItemProperties {
+	href: string;
+	newWindow?: boolean;
+}
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index be590635c5dcf..3f3dcb01853ff 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1,3 +1,4 @@
+import { IMenuItem } from 'n8n-design-system';
 import {
 	GenericValue,
 	IConnections,
@@ -755,23 +756,6 @@ export interface ITimeoutHMS {
 
 export type WorkflowTitleStatus = 'EXECUTING' | 'IDLE' | 'ERROR';
 
-export type MenuItemType = 'link';
-export type MenuItemPosition = 'top' | 'bottom';
-
-export interface IMenuItem {
-	id: string;
-	type: MenuItemType;
-	position?: MenuItemPosition;
-	properties: ILinkMenuItemProperties;
-}
-
-export interface ILinkMenuItemProperties {
-	title: string;
-	icon: string;
-	href: string;
-	newWindow?: boolean;
-}
-
 export interface ISubcategoryItemProps {
 	subcategory: string;
 	description: string;

From a6a79c255dffa33b4d170d0a4c122fcd8cd3edc0 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Fri, 23 Sep 2022 18:00:12 +0200
Subject: [PATCH 23/39] =?UTF-8?q?=E2=9C=A8=20Implemented=20new=20`n8n-menu?=
 =?UTF-8?q?`=20design=20system=20component,=20updated=20menu=20items=20to?=
 =?UTF-8?q?=20support=20collapsed=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/N8nMenu/Menu.stories.js    |  46 ------
 .../src/components/N8nMenu/Menu.stories.ts    | 140 ++++++++++++++++
 .../src/components/N8nMenu/Menu.vue           | 149 +++++++++++++-----
 .../N8nMenuItem/MenuItem.stories.ts           |  22 ++-
 .../src/components/N8nMenuItem/MenuItem.vue   |  47 +++++-
 5 files changed, 310 insertions(+), 94 deletions(-)
 delete mode 100644 packages/design-system/src/components/N8nMenu/Menu.stories.js
 create mode 100644 packages/design-system/src/components/N8nMenu/Menu.stories.ts

diff --git a/packages/design-system/src/components/N8nMenu/Menu.stories.js b/packages/design-system/src/components/N8nMenu/Menu.stories.js
deleted file mode 100644
index b7cab35354cb5..0000000000000
--- a/packages/design-system/src/components/N8nMenu/Menu.stories.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import N8nMenu from './Menu.vue';
-import N8nMenuItem from '../N8nMenuItem';
-
-import { action } from '@storybook/addon-actions';
-
-export default {
-	title: 'Atoms/Menu',
-	component: N8nMenu,
-	argTypes: {
-		type: {
-			control: 'select',
-			options: ['primary', 'secondary'],
-		},
-	},
-	parameters: {
-		backgrounds: { default: '--color-background-xlight' },
-	},
-};
-
-const methods = {
-	onSelect: action('select'),
-};
-
-const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: {
-		N8nMenu,
-		N8nMenuItem,
-	},
-	template:
-		`<n8n-menu v-bind="$props" @select="onSelect">
-			<n8n-menu-item index="1"> <span slot="title">Item 1</span> </n8n-menu-item>
-			<n8n-menu-item index="2"> <span slot="title">Item 2</span> </n8n-menu-item>
-		</n8n-menu>`,
-	methods,
-});
-
-export const Primary = Template.bind({});
-Primary.parameters = {
-	backgrounds: { default: '--color-background-light' },
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-	type: 'secondary',
-};
diff --git a/packages/design-system/src/components/N8nMenu/Menu.stories.ts b/packages/design-system/src/components/N8nMenu/Menu.stories.ts
new file mode 100644
index 0000000000000..b7ca995707624
--- /dev/null
+++ b/packages/design-system/src/components/N8nMenu/Menu.stories.ts
@@ -0,0 +1,140 @@
+import N8nMenu from './Menu.vue';
+import N8nIcon from '../N8nIcon';
+import N8nText from '../N8nText';
+import { StoryFn } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+
+export default {
+	title: 'Atoms/Menu',
+	component: N8nMenu,
+	argTypes: {
+	},
+};
+
+const methods = {
+	onSelect: action('select'),
+};
+
+const template: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nMenu,
+	},
+	template: `
+		<div style="height: 90vh; width: 200px">
+			<n8n-menu v-bind="$props" @select="onSelect"></n8n-menu>
+		</div>
+	`,
+	methods,
+});
+
+const templateWithHeaderAndFooter: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nMenu,
+		N8nIcon,
+	},
+	template: `
+		<div style="height: 90vh; width: 200px">
+			<n8n-menu v-bind="$props" @select="onSelect">
+				<template #header>
+					<a href="#">
+						<n8n-icon icon="long-arrow-alt-left" /> Back to home
+					</a>
+				</template>
+				<template #footer>
+					&copy; n8n.io
+				</template>
+			</n8n-menu>
+		</div>
+	`,
+	methods,
+});
+
+const templateWithAllSlots: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nMenu,
+		N8nIcon,
+		N8nText,
+	},
+	template: `
+		<div style="height: 90vh; width: 200px">
+			<n8n-menu v-bind="$props" @select="onSelect">
+				<template #header>
+					<a href="#">
+						<n8n-icon icon="long-arrow-alt-left"/>&nbsp;&nbsp;Back to home
+					</a>
+				</template>
+				<template #menuPrefix>
+					<n8n-text size="small"  color="text-light">Something can be added here...</n8n-text>
+				</template>
+				<template #menuSuffix>
+					<n8n-text size="small" color="text-light">...and here if needed</n8n-text>
+				</template>
+				<template #footer>
+					<n8n-icon icon="user-circle" size="xlarge"/>&nbsp;&nbsp;
+					<n8n-text>John Smithson</n8n-text>
+				</template>
+			</n8n-menu>
+		</div>
+	`,
+	methods,
+});
+
+const menuItems = [
+	{
+		id: 'workflows',
+		icon: 'network-wired',
+		label: 'Workflows',
+		position: 'top',
+	},
+	{
+		id: 'executions',
+		icon: 'tasks',
+		label: 'Executions',
+		position: 'top',
+	},
+	{
+		id: 'website',
+		icon: 'globe',
+		label: 'Website',
+		type: 'link',
+		properties: {
+			href: 'https://www.n8n.io',
+			newWindow: true,
+		},
+		position: 'bottom',
+	},
+	{
+		id: 'help',
+		icon: 'question',
+		label: 'Help',
+		position: 'bottom',
+		children: [
+			{ icon: 'info', label: 'About n8n', id: 'about' },
+			{ icon: 'book', label: 'Documentation', id: 'docs' },
+			{
+				id: 'quickstart',
+				icon: 'video',
+				label: 'Quickstart',
+				type: 'link',
+				properties: {
+					href: 'https://www.youtube.com/watch?v=RpjQTGKm-ok',
+					newWindow: true,
+				},
+			},
+		]
+	}
+];
+
+export const primary = template.bind({});
+primary.args = {
+	items: menuItems,
+};
+
+export const withHeaderAndFooter = templateWithHeaderAndFooter.bind({});
+withHeaderAndFooter.args = { items: menuItems };
+
+export const withAllSlots = templateWithAllSlots.bind({});
+withAllSlots.args = { items: menuItems };
diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index cd5c28b68268f..23a46cf164452 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -1,22 +1,59 @@
 <template>
-	<el-menu
-		:defaultActive="defaultActive"
-		:collapse="collapse"
-		:router="router"
-		:class="['n8n-menu', $style[type + (light ? '-light' : '')]]"
-		v-on="$listeners"
-	>
-		<slot></slot>
-	</el-menu>
+	<div :class="{
+		['menu-container']: true,
+		[$style.container]: true,
+		[$style.menuCollapsed]: collapsed
+	}">
+		<div v-if="$slots.header" :class="$style.menuHeader">
+			<slot name="header"></slot>
+		</div>
+		<div :class="$style.menuContent">
+			<div :class="$style.upperContent">
+				<div v-if="$slots.menuPrefix" :class="$style.menuPrefix">
+					<slot name="menuPrefix"></slot>
+				</div>
+				<el-menu
+					:defaultActive="defaultActive"
+					:collapse="collapsed"
+					:router="router"
+					v-on="$listeners"
+				>
+					<n8n-menu-item v-for="item in upperMenuItems" :key="item.id" :item="item" :compact="collapsed"/>
+				</el-menu>
+			</div>
+			<div :class="$style.lowerContent">
+				<el-menu
+					:defaultActive="defaultActive"
+					:collapse="collapsed"
+					:router="router"
+					v-on="$listeners"
+				>
+					<n8n-menu-item v-for="item in lowerMenuItems" :key="item.id" :item="item" :compact="collapsed"/>
+				</el-menu>
+				<div v-if="$slots.menuSuffix" :class="$style.menuSuffix">
+					<slot name="menuSuffix"></slot>
+				</div>
+			</div>
+		</div>
+		<div v-if="$slots.footer" :class="$style.menuFooter">
+			<slot name="footer"></slot>
+		</div>
+	</div>
 </template>
 
 <script lang="ts">
 import ElMenu from 'element-ui/lib/menu';
+import N8nMenuItem from '../N8nMenuItem';
 
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
+import { IMenuItem } from '../../types';
 
 export default Vue.extend({
 	name: 'n8n-menu',
+	components: {
+		ElMenu,
+		N8nMenuItem,
+	},
 	props: {
 		type: {
 			type: String,
@@ -26,55 +63,85 @@ export default Vue.extend({
 		defaultActive: {
 			type: String,
 		},
-		collapse: {
-			type: Boolean,
-		},
-		light: {
+		collapsed: {
 			type: Boolean,
+			default: false,
 		},
 		router: {
 			type: Boolean,
 		},
+		items: {
+			type: Array as PropType<IMenuItem[]>,
+		},
 	},
-	components: {
-		ElMenu,
+	computed: {
+		upperMenuItems(): IMenuItem[] {
+			return this.items.filter((item: IMenuItem) => item.position === 'top');
+		},
+		lowerMenuItems(): IMenuItem[] {
+			return this.items.filter((item: IMenuItem) => item.position === 'bottom');
+		},
+	},
+	methods: {
+		onSelect(option: string): void {
+			this.$emit('select', option);
+		},
 	},
 });
 </script>
 
 <style lang="scss" module>
-.menu {
-	max-width: 200px;
+.container {
+	height: 100%;
+	border: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+	display: flex;
+	flex-direction: column;
 }
 
-.primary {
-	composes: menu;
-	--menu-item-hover-font-color: var(--color-primary);
+.menuContent {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	flex-grow: 1;
+
+	& > div > :global(.el-menu) {
+		background: none;
+		padding: 12px;
+	}
 }
 
-.secondary {
-	composes: menu;
-	--menu-font-color: var(--color-text-base);
-	--menu-item-font-weight: var(--font-weight-regular);
-	--menu-background-color: transparent;
-	--menu-item-active-font-color: var(--color-text-dark);
-	--menu-item-active-background-color: var(--color-foreground-base);
-	--menu-item-hover-font-color: var(--color-primary);
-	--menu-item-border-radius: 4px;
-	--menu-item-height: 38px;
+.menuCollapsed {
+	width: 65px;
+	transition: width 150ms ease-in-out;
 
-	li {
-		padding-left: 12px !important;
+	.menuHeader, .menuFooter, .menuPrefix, .menuSuffix {
+		display: none; // TODO: Remove this
 	}
 }
 
-.secondary-light {
-	composes: secondary;
-	--menu-item-active-background-color: hsl(
-		var(--color-foreground-base-h),
-		var(--color-foreground-base-s),
-		var(--color-foreground-base-l),
-		0.7
-	);
+.menuHeader, .menuFooter {
+	height: 50px; // TODO: See about this....
+	padding: 12px 24px;
+	display: flex;
+	align-items: center;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.menuHeader {
+	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);;
+}
+
+.menuFooter {
+	border-top: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);;
 }
+
+.menuPrefix {
+	padding: 12px 24px 0;
+}
+
+.menuSuffix {
+	padding: 0 24px 12px;
+}
+
 </style>
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts b/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
index b55263ded7f4e..0bb3510793dec 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
@@ -1,5 +1,5 @@
 import N8nMenuItem from "."
-import N8nMenu from "../N8nMenu";
+import ElMenu from 'element-ui/lib/menu';
 import { StoryFn } from '@storybook/vue';
 
 export default {
@@ -9,11 +9,13 @@ export default {
 
 const template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
-	components: { N8nMenu, N8nMenuItem },
+	components: { ElMenu, N8nMenuItem },
 	template: `
-		<n8n-menu>
-			<n8n-menu-item v-bind="$props" />
-		</n8n-menu>
+		<div style="width: 200px">
+			<el-menu>
+				<n8n-menu-item v-bind="$props" />
+			</el-menu>
+		</div>
 	`
 });
 
@@ -26,6 +28,16 @@ defaultMenuItem.args = {
 	}
 };
 
+export const compact = template.bind({});
+compact.args = {
+	item: {
+		id: 'compact',
+		icon: 'ice-cream',
+		label: 'Click here',
+	},
+	compact: true,
+};
+
 export const link = template.bind({});
 link.args = {
 	item: {
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index 2a5975f8c5024..93713d3f3eca9 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -1,5 +1,14 @@
 <template>
-	<el-submenu :class="[$style.submenu]" v-if="item.children" :index="item.id" :title="item.label">
+	<el-submenu
+		v-if="item.children"
+		:class="{
+			[$style.submenu]: true,
+			[$style.item]: true,
+			[$style.compact]: compact
+		}"
+		:index="item.id"
+		:title="item.label"
+	>
 			<template slot="title">
 				<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" />
 				<span :class="$style.label">{{ item.label }}</span>
@@ -16,7 +25,17 @@
 			<span :class="$style.label">{{ child.label }}</span>
 		</el-menu-item>
 	</el-submenu>
-	<el-menu-item v-else :class="$style.menuItem" :index="item.id" :title="item.label" @click="onItemClick(item)">
+	<el-menu-item
+		v-else
+		:class="{
+			[$style.menuItem]: true,
+			[$style.item]: true,
+			[$style.compact]: compact
+		}"
+		:index="item.id"
+		:title="item.label"
+		@click="onItemClick(item)"
+	>
 		<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" />
 		<span :class="$style.label">{{ item.label }}</span>
 	</el-menu-item>
@@ -42,6 +61,10 @@ export default Vue.extend({
 			type: Object as () => IMenuItem,
 			required: true,
 		},
+		compact: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	methods: {
 		onItemClick(item: IMenuItem, event: MouseEvent) {
@@ -94,9 +117,11 @@ export default Vue.extend({
 
 	.menuItem {
 		height: var(--submenu-item-height);
+		min-width: auto;
 		margin: var(--spacing-2xs) 0 !important;
 		padding-left: var(--spacing-l) !important;
 		user-select: none;
+
 		&:hover {
 			.icon { color: var(--color-text-dark) }
 		}
@@ -118,4 +143,22 @@ export default Vue.extend({
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
+
+.item + .item {
+	margin-top: 8px !important;
+}
+
+.compact {
+	width: fit-content;
+	.icon {
+		margin: 0;
+		overflow: visible !important;
+		visibility: visible !important;
+		width: initial !important;
+		height: initial !important;
+	}
+	.label {
+		display: none;
+	}
+}
 </style>

From 3e1c0f783870c816c1c0800f596a25d8cc2fdd0b Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Fri, 23 Sep 2022 18:21:51 +0200
Subject: [PATCH 24/39] Minor update to n8n-menu storybook entry

---
 .../design-system/src/components/N8nMenu/Menu.stories.ts     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/N8nMenu/Menu.stories.ts b/packages/design-system/src/components/N8nMenu/Menu.stories.ts
index b7ca995707624..07b9c222e7538 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.stories.ts
+++ b/packages/design-system/src/components/N8nMenu/Menu.stories.ts
@@ -39,11 +39,12 @@ const templateWithHeaderAndFooter: StoryFn = (args, { argTypes }) => ({
 			<n8n-menu v-bind="$props" @select="onSelect">
 				<template #header>
 					<a href="#">
-						<n8n-icon icon="long-arrow-alt-left" /> Back to home
+						<n8n-icon icon="long-arrow-alt-left"/>&nbsp;&nbsp;Back to home
 					</a>
 				</template>
 				<template #footer>
-					&copy; n8n.io
+					<n8n-icon icon="user-circle" size="xlarge"/>&nbsp;&nbsp;
+					<n8n-text>John Smithson</n8n-text>
 				</template>
 			</n8n-menu>
 		</div>

From 15661dd3fda347eab1a0e0e74753a49072190642 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Fri, 7 Oct 2022 11:23:19 +0200
Subject: [PATCH 25/39] =?UTF-8?q?=F0=9F=92=84=20Updating=20collapsed=20sub?=
 =?UTF-8?q?-menu=20style.=20Fixing=20vue=20error=20on=20hover.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/N8nMenu/Menu.stories.ts    |  4 +-
 .../src/components/N8nMenu/Menu.vue           | 30 +++++-
 .../src/components/N8nMenuItem/MenuItem.vue   | 96 +++++++++++++++----
 3 files changed, 106 insertions(+), 24 deletions(-)

diff --git a/packages/design-system/src/components/N8nMenu/Menu.stories.ts b/packages/design-system/src/components/N8nMenu/Menu.stories.ts
index 07b9c222e7538..de48849ffc253 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.stories.ts
+++ b/packages/design-system/src/components/N8nMenu/Menu.stories.ts
@@ -125,8 +125,8 @@ const menuItems = [
 					newWindow: true,
 				},
 			},
-		]
-	}
+		],
+	},
 ];
 
 export const primary = template.bind({});
diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index 167bc507bd0b7..32a2b03f66137 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -18,7 +18,14 @@
 					:router="router"
 					v-on="$listeners"
 				>
-					<n8n-menu-item v-for="item in upperMenuItems" :key="item.id" :item="item" :compact="collapsed"/>
+					<n8n-menu-item
+						v-for="item in upperMenuItems"
+						:key="item.id"
+						:item="item"
+						:compact="collapsed"
+						:popperClass="$style.submenuPopper"
+						:tooltipDelay="tooltipDelay"
+					/>
 				</el-menu>
 			</div>
 			<div :class="$style.lowerContent">
@@ -28,7 +35,14 @@
 					:router="router"
 					v-on="$listeners"
 				>
-					<n8n-menu-item v-for="item in lowerMenuItems" :key="item.id" :item="item" :compact="collapsed"/>
+					<n8n-menu-item
+						v-for="item in lowerMenuItems"
+						:key="item.id"
+						:item="item"
+						:compact="collapsed"
+						:popperClass="$style.submenuPopper"
+						:tooltipDelay="tooltipDelay"
+					/>
 				</el-menu>
 				<div v-if="$slots.menuSuffix" :class="$style.menuSuffix">
 					<slot name="menuSuffix"></slot>
@@ -70,6 +84,10 @@ export default Vue.extend({
 		router: {
 			type: Boolean,
 		},
+		tooltipDelay: {
+			type: Number,
+			default: 300,
+		},
 		items: {
 			type: Array as PropType<IMenuItem[]>,
 		},
@@ -110,6 +128,13 @@ export default Vue.extend({
 	}
 }
 
+.upperContent {
+	.submenuPopper {
+		bottom: auto !important;
+		top: 0 !important;
+	}
+}
+
 .menuCollapsed {
 	width: 65px;
 	transition: width 150ms ease-in-out;
@@ -143,5 +168,4 @@ export default Vue.extend({
 .menuSuffix {
 	padding: 0 24px 12px;
 }
-
 </style>
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index e9007def2d19a..5ede484603cd9 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -1,13 +1,14 @@
 <template>
 	<el-submenu
-		v-if="item.children"
+		v-if="item.children && item.children.length > 0"
 		:class="{
 			[$style.submenu]: true,
 			[$style.item]: true,
 			[$style.compact]: compact
 		}"
 		:index="item.id"
-		:title="item.label"
+		:popper-append-to-body="false"
+		:popper-class="`${$style.submenuPopper} ${popperClass}`"
 	>
 			<template slot="title">
 				<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" />
@@ -16,37 +17,38 @@
 		<el-menu-item
 			v-for="child in item.children"
 			:key="child.id"
-			:class="$style.menuItem"
+			:class="[$style.menuItem, disableActiveStyle]"
 			:index="child.id"
-			:title="child.label"
 			@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>
-	<el-menu-item
-		v-else
-		:class="{
-			[$style.menuItem]: true,
-			[$style.item]: true,
-			[$style.compact]: compact
-		}"
-		:index="item.id"
-		:title="item.label"
-		@click="onItemClick(item)"
-	>
-		<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" />
-		<span :class="$style.label">{{ item.label }}</span>
-	</el-menu-item>
+	<n8n-tooltip v-else placement="right" :content="item.label" :disabled="!compact" :open-delay="tooltipDelay">
+		<el-menu-item
+			:class="{
+				[$style.menuItem]: true,
+				[$style.item]: true,
+				[$style.disableActiveStyle]: true,
+				[$style.compact]: compact
+			}"
+			:index="item.id"
+			@click="onItemClick(item)"
+		>
+			<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" />
+			<span :class="$style.label">{{ item.label }}</span>
+		</el-menu-item>
+	</n8n-tooltip>
 </template>
 
 <script lang="ts">
 import ElSubmenu from 'element-ui/lib/submenu';
 import ElMenuItem from 'element-ui/lib/menu-item';
+import N8nTooltip from '../N8nTooltip';
 import N8nIcon from '../N8nIcon';
-import Vue, { PropType } from 'vue';
 import { IMenuItem } from '../../types';
+import Vue from 'vue';
 
 
 export default Vue.extend({
@@ -55,6 +57,7 @@ export default Vue.extend({
 		ElSubmenu, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
 		ElMenuItem, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
 		N8nIcon,
+		N8nTooltip,
 	},
 	props: {
 		item: {
@@ -65,8 +68,20 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		tooltipDelay: {
+			type: Number,
+			default: 300,
+		},
+		popperClass: {
+			type: String,
+			default: '',
+		},
 	},
 	methods: {
+		onMouseEnter(event: MouseEvent) {
+			console.log('MOUSE ENTER');
+			event.preventDefault();
+		},
 		onItemClick(item: IMenuItem, event: MouseEvent) {
 			if (item && item.type === 'link' && item.properties) {
 				const href: string = item.properties.href;
@@ -133,6 +148,25 @@ export default Vue.extend({
 	padding: var(--spacing-2xs) var(--spacing-xs) !important;
 	margin: 0 !important;
 	border-radius: var(--border-radius-base);
+
+	&.disableActiveStyle {
+		background-color: initial;
+		color: var(--color-text-base);
+
+		svg {
+			color: var(--color-text-base) !important;
+		}
+
+		&:hover {
+			background-color: var(--color-foreground-base);
+			svg {
+				color: var(--color-text-dark) !important;
+			}
+			&:global(.el-submenu) {
+				background-color: unset;
+			}
+		}
+	}
 }
 
 .icon {
@@ -161,4 +195,28 @@ export default Vue.extend({
 		display: none;
 	}
 }
+
+.submenuPopper {
+	display: block;
+	bottom: 0 !important;
+	left: 40px !important;
+	bottom: 100px !important;
+	top: auto !important;
+
+	ul {
+		padding: 0 var(--spacing-xs) !important;
+	}
+	.menuItem {
+		display: flex;
+		padding: var(--spacing-2xs) var(--spacing-xs) !important;
+	}
+
+	.icon {
+		margin-right: var(--spacing-xs);
+	}
+
+	.label {
+		display: block;
+	}
+}
 </style>

From 00fdc66bb4f899a8ccea98505f729701de6432f1 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Fri, 7 Oct 2022 11:57:47 +0200
Subject: [PATCH 26/39] =?UTF-8?q?=E2=9A=A1=20Changing=20IMenuItem=20from?=
 =?UTF-8?q?=20interface=20to=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design-system/src/types/menu.ts              | 10 +++++-----
 packages/editor-ui/src/Interface.ts                   |  1 -
 packages/editor-ui/src/components/SettingsSidebar.vue |  5 +----
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/design-system/src/types/menu.ts b/packages/design-system/src/types/menu.ts
index abef8ac84bcdd..b06f3da174c2c 100644
--- a/packages/design-system/src/types/menu.ts
+++ b/packages/design-system/src/types/menu.ts
@@ -1,14 +1,14 @@
-export interface IMenuItem {
+export type IMenuItem = {
 	id: string;
 	label: string;
 	icon?: string;
 	position?: 'top' | 'bottom';
-	type: 'default' | 'link';
-	properties: ILinkMenuItemProperties;
-	children: IMenuItem[],
+	type?: 'default' | 'link';
+	properties?: ILinkMenuItemProperties;
+	children?: IMenuItem[],
 }
 
-export interface ILinkMenuItemProperties {
+export type ILinkMenuItemProperties = {
 	href: string;
 	newWindow?: boolean;
 }
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 4fa8ae68736b9..747435c9acb52 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1,4 +1,3 @@
-import { IMenuItem } from 'n8n-design-system';
 import {
 	GenericValue,
 	IConnections,
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index 24ef6c9dee68d..364e041c35170 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -75,7 +75,7 @@ export default mixins(
 		},
 	},
 	mounted() {
-		this.checkForNewVersions();
+		this.pushConnect();
 	},
 	methods: {
 		canAccessPersonalSettings(): boolean {
@@ -100,9 +100,6 @@ export default mixins(
 			this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
 		},
 	},
-	mounted() {
-		this.pushConnect();
-	},
 });
 </script>
 

From 7f491654845504dd8207af275750170e3ec67347 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Fri, 7 Oct 2022 13:19:54 +0200
Subject: [PATCH 27/39] =?UTF-8?q?=E2=9C=A8=20Added=20new=20n8n-menu=20comp?=
 =?UTF-8?q?onent=20to=20editor=20main=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/N8nMenu/Menu.stories.ts    |   6 +-
 .../src/components/N8nMenu/Menu.vue           |   3 +-
 .../src/components/N8nMenuItem/MenuItem.vue   |  19 +-
 .../editor-ui/src/components/MainSidebar.vue  | 590 ++++--------------
 packages/editor-ui/src/plugins/icons.ts       |   2 +
 5 files changed, 127 insertions(+), 493 deletions(-)

diff --git a/packages/design-system/src/components/N8nMenu/Menu.stories.ts b/packages/design-system/src/components/N8nMenu/Menu.stories.ts
index de48849ffc253..f2d4e6a16028f 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.stories.ts
+++ b/packages/design-system/src/components/N8nMenu/Menu.stories.ts
@@ -21,7 +21,7 @@ const template: StoryFn = (args, { argTypes }) => ({
 		N8nMenu,
 	},
 	template: `
-		<div style="height: 90vh; width: 200px">
+		<div style="height: 90vh; width: 200px; border: 1px solid #c6c8d0">
 			<n8n-menu v-bind="$props" @select="onSelect"></n8n-menu>
 		</div>
 	`,
@@ -35,7 +35,7 @@ const templateWithHeaderAndFooter: StoryFn = (args, { argTypes }) => ({
 		N8nIcon,
 	},
 	template: `
-		<div style="height: 90vh; width: 200px">
+		<div style="height: 90vh; width: 200px; border: 1px solid #c6c8d0">
 			<n8n-menu v-bind="$props" @select="onSelect">
 				<template #header>
 					<a href="#">
@@ -60,7 +60,7 @@ const templateWithAllSlots: StoryFn = (args, { argTypes }) => ({
 		N8nText,
 	},
 	template: `
-		<div style="height: 90vh; width: 200px">
+		<div style="height: 90vh; width: 200px; border: 1px solid #c6c8d0">
 			<n8n-menu v-bind="$props" @select="onSelect">
 				<template #header>
 					<a href="#">
diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index 32a2b03f66137..02cfe1a1251ff 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -111,9 +111,9 @@ export default Vue.extend({
 <style lang="scss" module>
 .container {
 	height: 100%;
-	border: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
 	display: flex;
 	flex-direction: column;
+	background-color: var(--color-background-xlight);
 }
 
 .menuContent {
@@ -136,7 +136,6 @@ export default Vue.extend({
 }
 
 .menuCollapsed {
-	width: 65px;
 	transition: width 150ms ease-in-out;
 
 	.menuHeader, .menuFooter, .menuPrefix, .menuSuffix {
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index 5ede484603cd9..c3929d7f4fb27 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -17,7 +17,7 @@
 		<el-menu-item
 			v-for="child in item.children"
 			:key="child.id"
-			:class="[$style.menuItem, disableActiveStyle]"
+			:class="[$style.menuItem, $style.disableActiveStyle]"
 			:index="child.id"
 			@click="onItemClick(child)"
 		>
@@ -131,8 +131,8 @@ export default Vue.extend({
 	}
 
 	.menuItem {
-		height: var(--submenu-item-height);
-		min-width: auto;
+		height: var(--submenu-item-height) !important;
+		min-width: auto !important;
 		margin: var(--spacing-2xs) 0 !important;
 		padding-left: var(--spacing-l) !important;
 		user-select: none;
@@ -147,23 +147,23 @@ export default Vue.extend({
 	display: flex;
 	padding: var(--spacing-2xs) var(--spacing-xs) !important;
 	margin: 0 !important;
-	border-radius: var(--border-radius-base);
+	border-radius: var(--border-radius-base) !important;
 
 	&.disableActiveStyle {
-		background-color: initial;
-		color: var(--color-text-base);
+		background-color: initial !important;
+		color: var(--color-text-base) !important;
 
 		svg {
 			color: var(--color-text-base) !important;
 		}
 
 		&:hover {
-			background-color: var(--color-foreground-base);
+			background-color: var(--color-foreground-base) !important;
 			svg {
 				color: var(--color-text-dark) !important;
 			}
 			&:global(.el-submenu) {
-				background-color: unset;
+				background-color: unset !important;
 			}
 		}
 	}
@@ -198,9 +198,8 @@ export default Vue.extend({
 
 .submenuPopper {
 	display: block;
-	bottom: 0 !important;
 	left: 40px !important;
-	bottom: 100px !important;
+	bottom: 110px !important;
 	top: auto !important;
 
 	ul {
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 7c7bcb18de10a..42bd3b6ecdc8a 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -4,132 +4,13 @@
 		[$style.sideMenu]: true,
 		[$style.sideMenuCollapsed]: isCollapsed
 	}">
-		<div :class="{[$style.sideMenuWrapper]: true, [$style.expanded]: !isCollapsed}">
-			<div
-				id="collapse-change-button"
-				:class="{
-					['clickable']: true,
-					[$style.sideMenuCollapseButton]: true,
-					[$style.expandedButton]: !isCollapsed
-				}"
-				@click="toggleCollapse"
-			></div>
-			<n8n-menu :default-active="$route.path" @select="handleSelect" :collapse="isCollapsed">
-				<n8n-menu-item
-					index="logo"
-					:class="[$style.logoItem, $style.disableActiveStyle]"
-				>
-					<img :src="basePath +  (isCollapsed ? 'n8n-logo-collapsed.svg' : 'n8n-logo-expanded.svg')" :class="$style.icon" alt="n8n"/>
-				</n8n-menu-item>
-				<div :class="$style.sideMenuFlexContainer">
-					<div :class="$style.sideMenuUpper">
-
-						<MenuItemsIterator :items="sidebarMenuTopItems" :root="true"/>
-
-						<el-submenu
-							index="/workflow"
-							title="Workflow"
-							popperClass="sidebar-popper"
-							:class="{
-								[$style.workflowSubmenu]: true,
-								[$style.active]: $route.path === '/workflow'
-							}"
-						>
-							<template slot="title">
-								<font-awesome-icon icon="network-wired"/>&nbsp;
-								<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.workflows') }}</span>
-							</template>
-
-							<n8n-menu-item index="/workflow">
-								<template slot="title">
-									<font-awesome-icon icon="file"/>&nbsp;
-									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.new') }}</span>
-								</template>
-							</n8n-menu-item>
-							<n8n-menu-item index="workflow-open" :class="$style.disableActiveStyle">
-								<template slot="title">
-									<font-awesome-icon icon="folder-open"/>&nbsp;
-									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.open') }}</span>
-								</template>
-							</n8n-menu-item>
-						</el-submenu>
-
-						<n8n-menu-item v-if="isTemplatesEnabled" index="/templates" :class="$style.templatesSubmenu">
-							<font-awesome-icon icon="box-open"/>&nbsp;
-							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.templates') }}</span>
-						</n8n-menu-item>
-
-						<n8n-menu-item index="/credentials" :class="$style.credentialsSubmenu">
-							<font-awesome-icon icon="key"/>
-							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.credentials') }}</span>
-						</n8n-menu-item>
-
-						<n8n-menu-item index="executions"  :class="[$style.disableActiveStyle, $style.executionsSubmenu]">
-							<font-awesome-icon icon="tasks"/>&nbsp;
-							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.executions') }}</span>
-						</n8n-menu-item>
-					</div>
-					<div :class="$style.sideMenuLower">
-						<n8n-menu-item index="settings" v-if="canUserAccessSettings && currentUser" :class="$style.settingsSubmenu">
-							<font-awesome-icon icon="cog"/>&nbsp;
-							<span slot="title" class="item-title-root">{{ $locale.baseText('settings') }}</span>
-						</n8n-menu-item>
-
-						<el-submenu index="help" :class="[$style.helpMenu, $style.disableActiveStyle]" title="Help" popperClass="sidebar-popper">
-							<template slot="title">
-								<font-awesome-icon icon="question"/>&nbsp;
-								<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.help') }}</span>
-							</template>
-
-							<MenuItemsIterator :items="helpMenuItems" :afterItemClick="trackHelpItemClick" />
-
-							<n8n-menu-item index="help-about">
-								<template slot="title">
-									<font-awesome-icon :class="$style['about-icon']" icon="info"/>
-									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.aboutN8n') }}</span>
-								</template>
-							</n8n-menu-item>
-						</el-submenu>
-
-						<MenuItemsIterator :items="sidebarMenuBottomItems" :root="true"/>
-
-						<div :class="{
-							[$style.footerMenuItems] : true,
-							[$style.loggedIn]: showUserArea,
-						}">
-							<n8n-menu-item index="updates" :class="$style.updatesSubmenu" v-if="hasVersionUpdates" @click="openUpdatesPanel">
-								<div :class="$style.giftContainer">
-									<GiftNotificationIcon />
-								</div>
-								<span slot="title" :class="['item-title-root', $style.updatesLabel]">
-									{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}}
-								</span>
-							</n8n-menu-item>
-							<n8n-menu-item v-if="showUserArea" :class="$style.userSubmenu" index="">
-								<!-- This dropdown is only enabled when sidebar is collapsed -->
-								<el-dropdown :disabled="!isCollapsed" placement="right-end" trigger="click" @command="onUserActionToggle">
-									<div :class="{[$style.avatar]: true, ['clickable']: isCollapsed }">
-										<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
-										<el-dropdown-menu slot="dropdown">
-											<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
-											<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
-										</el-dropdown-menu>
-									</div>
-								</el-dropdown>
-								<div slot="title" :class="['item-title-root', $style.username ]" v-if="!isCollapsed">
-									<span :title="currentUser.fullName" :class="$style.fullName">{{currentUser.fullName}}</span>
-									<div :class="{[$style.userActions]: true, ['user-actions']: true }">
-										<n8n-action-dropdown :items="userMenuItems" placement="top-start" @select="onUserActionToggle" />
-									</div>
-								</div>
-							</n8n-menu-item>
-						</div>
-					</div>
-				</div>
-			</n8n-menu>
+		<div
+			id="collapse-change-button"
+			:class="{ ['clickable']: true, [$style.sideMenuCollapseButton]: true, [$style.expandedButton]: !isCollapsed }"
+			@click="toggleCollapse">
 		</div>
+		<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect"></n8n-menu>
 	</div>
-
 </template>
 
 <script lang="ts">
@@ -187,7 +68,7 @@ export default mixins(
 			return {
 				// @ts-ignore
 				basePath: this.$store.getters.getBaseUrl,
-				userMenuItems: [
+				userMenuItems: [ // TODO: Move to computed
 					{
 						id: 'settings',
 						label: this.$locale.baseText('settings'),
@@ -223,59 +104,116 @@ export default mixins(
 			showUserArea(): boolean {
 				return this.isUserManagementEnabled && this.canUserAccessSidebarUserInfo && this.currentUser;
 			},
-			helpMenuItems (): object[] {
+			workflowExecution (): IExecutionResponse | null {
+				return this.$store.getters.getWorkflowExecution;
+			},
+			sidebarMenuTopItems(): IMenuItem[] {
+				return this.$store.getters.sidebarMenuItems.filter((item: IMenuItem) => item.position === 'top');
+			},
+			sidebarMenuBottomItems(): IMenuItem[] {
+				return this.$store.getters.sidebarMenuItems.filter((item: IMenuItem) => item.position === 'bottom');
+			},
+			mainMenuItems (): object[] {
 				return [
 					{
-						id: 'quickstart',
-						type: 'link',
-						properties: {
-							href: 'https://www.youtube.com/watch?v=RpjQTGKm-ok',
-							title: this.$locale.baseText('mainSidebar.helpMenuItems.quickstart'),
-							icon: 'video',
-							newWindow: true,
-						},
+						id: 'workflows',
+						icon: 'network-wired',
+						label: this.$locale.baseText('mainSidebar.workflows'),
+						position: 'top',
+						children: [
+							{
+								id: 'workflow',
+								label: this.$locale.baseText('mainSidebar.new'),
+								icon: 'file',
+							},
+							{
+								id: 'workflow-open',
+								label: this.$locale.baseText('mainSidebar.open'),
+								icon: 'folder-open',
+							},
+						],
 					},
 					{
-						id: 'docs',
-						type: 'link',
-						properties: {
-							href: 'https://docs.n8n.io',
-							title: this.$locale.baseText('mainSidebar.helpMenuItems.documentation'),
-							icon: 'book',
-							newWindow: true,
-						},
+						id: 'templates',
+						icon: 'box-open',
+						label: this.$locale.baseText('mainSidebar.templates'),
+						position: 'top',
+						// TODO: Only available if templates are enabled
 					},
 					{
-						id: 'forum',
-						type: 'link',
-						properties: {
-							href: 'https://community.n8n.io',
-							title: this.$locale.baseText('mainSidebar.helpMenuItems.forum'),
-							icon: 'users',
-							newWindow: true,
-						},
+						id: 'credentials',
+						icon: 'key',
+						label: this.$locale.baseText('mainSidebar.credentials'),
+						position: 'top',
 					},
 					{
-						id: 'examples',
-						type: 'link',
-						properties: {
-							href: 'https://docs.n8n.io/courses',
-							title: this.$locale.baseText('mainSidebar.helpMenuItems.course'),
-							icon: 'graduation-cap',
-							newWindow: true,
-						},
+						id: 'executions',
+						icon: 'tasks',
+						label: this.$locale.baseText('mainSidebar.executions'),
+						position: 'top',
+					},
+					{
+						id: 'settings',
+						icon: 'cog',
+						label: this.$locale.baseText('settings'),
+						position: 'bottom',
+					},
+					{
+						id: 'help',
+						icon: 'question',
+						label: 'Help',
+						position: 'bottom',
+						children: [
+							{
+								id: 'quickstart',
+								icon: 'video',
+								label: this.$locale.baseText('mainSidebar.helpMenuItems.quickstart'),
+								type: 'link',
+								properties: {
+									href: 'https://www.youtube.com/watch?v=RpjQTGKm-ok',
+									newWindow: true,
+								},
+							},
+							{
+								id: 'docs',
+								icon: 'book',
+								label: this.$locale.baseText('mainSidebar.helpMenuItems.documentation'),
+								type: 'link',
+								properties: {
+									href: 'https://docs.n8n.io',
+									newWindow: true,
+								},
+							},
+							{
+								id: 'forum',
+								icon: 'users',
+								label: this.$locale.baseText('mainSidebar.helpMenuItems.forum'),
+								type: 'link',
+								properties: {
+									href: 'https://community.n8n.io',
+									newWindow: true,
+								},
+							},
+							{
+								id: 'examples',
+								icon: 'graduation-cap',
+								label: this.$locale.baseText('mainSidebar.helpMenuItems.course'),
+								type: 'link',
+								properties: {
+									href: 'https://www.youtube.com/watch?v=RpjQTGKm-ok',
+									newWindow: true,
+								},
+							},
+						],
+					},
+					{
+						id: 'about',
+						icon: 'info',
+						label: this.$locale.baseText('mainSidebar.aboutN8n'),
+						position: 'bottom',
 					},
 				];
 			},
-			workflowExecution (): IExecutionResponse | null {
-				return this.$store.getters.getWorkflowExecution;
-			},
-			sidebarMenuTopItems(): IMenuItem[] {
-				return this.$store.getters.sidebarMenuItems.filter((item: IMenuItem) => item.position === 'top');
-			},
-			sidebarMenuBottomItems(): IMenuItem[] {
-				return this.$store.getters.sidebarMenuItems.filter((item: IMenuItem) => item.position === 'bottom');
-			},
 		},
 		mounted() {
 			if (this.$refs.user) {
@@ -326,7 +264,7 @@ export default mixins(
 			},
 			async handleSelect (key: string) {
 				switch (key) {
-					case '/workflow': {
+					case 'workflow': {
 						await this.createNewWorkflow();
 						break;
 					}
@@ -334,13 +272,13 @@ export default mixins(
 						this.$store.dispatch('ui/openModal', WORKFLOW_OPEN_MODAL_KEY);
 						break;
 					}
-					case '/templates': {
+					case 'templates': {
 						if (this.$router.currentRoute.name !== VIEWS.TEMPLATES) {
 							this.$router.push({ name: VIEWS.TEMPLATES });
 						}
 						break;
 					}
-					case '/credentials': {
+					case 'credentials': {
 						this.$router.push({name: VIEWS.CREDENTIALS});
 						break;
 					}
@@ -356,7 +294,7 @@ export default mixins(
 						}
 						break;
 					}
-					case 'help-about': {
+					case 'about': {
 						this.trackHelpItemClick('about');
 						this.$store.dispatch('ui/openModal', ABOUT_MODAL_KEY);
 						break;
@@ -444,162 +382,18 @@ export default mixins(
 	});
 </script>
 
-<style lang="scss">
-#side-menu {
-	.el-menu {
-		--menu-item-active-background-color: var(--color-foreground-base);
-		--menu-item-active-font-color: var(--color-text-dark);
-		--menu-item-hover-fill: var(--color-foreground-base);
-		--menu-item-hover-font-color: var(--color-text-dark);
-		--menu-item-height: 35px;
-		--submenu-item-height: 27px;
-
-		.el-icon-arrow-down {
-			font-weight: bold;
-			right: 12px;
-
-			&:hover {
-				color: var(--color-primary);
-			}
-		}
-
-		.el-menu-item:hover, .el-submenu__title:hover, .el-menu-item.is-active {
-			svg {
-				color: var(--color-text-dark);
-			}
-		}
-
-		.el-menu-item, .el-menu-item .el-tooltip, .el-submenu__title {
-			padding: 0 8px !important;
-		}
-		.el-menu-item, .el-submenu__title {
-			margin: 8px 0;
-			border-radius: var(--border-radius-base);
-			user-select: none;
-
-			.item-title-root {
-				position: absolute;
-				left: 45px;
-			}
-
-			svg {
-				color: var(--color-text-light);
-			}
-		}
-
-		.el-submenu {
-			.el-menu-item {
-				height: var(--menu-item-height);
-				line-height: var(--menu-item-height);
-				padding-left: var(--spacing-l) !important;
-				min-width: auto;
-
-				svg {
-					width: var(--spacing-m);
-				}
-			}
-
-			.el-menu .el-menu-item {
-				height: var(--submenu-item-height);
-				margin: 4px 0 !important;
-
-				.item-title {
-					position: absolute;
-					left: 60px;
-				}
-			}
-		}
-	}
-}
-
-.sidebar-popper{
-	.el-menu-item {
-		--menu-item-height: 35px;
-		--submenu-item-height: 27px;
-		--menu-item-hover-fill: var(--color-foreground-base);
-		border-radius: var(--border-radius-base);
-		margin: 0 var(--spacing-2xs);
-
-		.item-title {
-			position: absolute;
-			left: 55px;
-		}
-
-		.svg-inline--fa {
-			color: var(--color-text-light);
-			position: relative;
-			right: -3px;
-		}
-
-		&:hover {
-			.svg-inline--fa {
-				color: var(--color-text-dark);
-			}
-		}
-	}
-}
-</style>
-
 <style lang="scss" module>
 
 .sideMenu {
-	height: 100%;
-
-	&.sideMenuCollapsed {
-		.fullName,
-		:global(.item-title-root),
-		:global(.el-menu--collapse) :global(.el-submenu__icon-arrow),
-		:global(.el-icon-arrow-down) {
-			display: none;
-		}
-
-		.active {
-			background-color: var(--color-foreground-base);
-			border-radius: var(--border-radius-base);
-
-			svg { color: var(--color-text-dark) !important; }
-		}
-
-		.userSubmenu::before {
-			width: 160%;
-		}
-	}
-
-	svg:global(.svg-inline--fa) {
-		position: relative;
-		left: 3px;
-	}
-
-	svg:global(.svg-inline--fa.fa-home) { left: 4px; }
-	.executionsSubmenu svg:global(.svg-inline--fa),
-	.credentialsSubmenu svg:global(.svg-inline--fa),
-	.updatesSubmenu svg:global(.svg-inline--fa),
-	.settingsSubmenu svg:global(.svg-inline--fa)
-	{ left: 5px !important; }
-
-	.helpMenu{
-		svg:global(.svg-inline--fa) { left: 6px !important; }
-		:global(.el-menu--inline) { margin-bottom: 8px; }
-	}
-}
-
-.sideMenuWrapper {
 	position: relative;
 	height: 100%;
-	width: $sidebar-width;
 	border-right: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
 	transition: width 150ms ease-in-out;
+	width: $sidebar-expanded-width;
 
-	&.expanded {
-		width: $sidebar-expanded-width;
-
-		.icon {
-			position: relative;
-			left: 16px;
-		}
+	&.sideMenuCollapsed {
+		width: $sidebar-width;
 	}
-
-	ul { height: 100%; }
 }
 
 .sideMenuCollapseButton {
@@ -645,166 +439,6 @@ export default mixins(
 	}
 }
 
-.sideMenuFlexContainer {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	height: calc(100% - $header-height);
-	padding: var(--spacing-5xs) 0;
-}
-
-.sideMenuUpper, .sideMenuLower {
-	padding: 0 var(--spacing-xs);
-}
-
-
-li:global(.is-active) {
-	.sideMenuLower &, &.disableActiveStyle {
-		background-color: initial;
-		color: var(--color-text-base);
-
-		svg {
-			color: var(--color-text-base) !important;
-		}
-
-		&:hover {
-			background-color: var(--color-foreground-base);
-			svg {
-				color: var(--color-text-dark) !important;
-			}
-			&:global(.el-submenu) {
-				background-color: unset;
-			}
-		}
-	}
-}
-
-.logoItem {
-	display: flex;
-	justify-content: space-between;
-	height: $header-height;
-	line-height: $header-height;
-	margin: 0 !important;
-	border-radius: 0 !important;
-	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-background-xlight);
-	cursor: default;
-
-	&:hover, &:global(.is-active):hover {
-		background-color: initial !important;
-	}
-
-	* { vertical-align: middle; }
-	.icon {
-		height: 18px;
-		position: relative;
-		left: 6px;
-	}
-
-}
-
-.footerMenuItems {
-	display: flex;
-	flex-grow: 1;
-	flex-direction: column;
-	justify-content: flex-end;
-	padding-bottom: var(-spacing-m);
-
-	&.loggedIn {
-		padding-bottom: var(--spacing-xs);
-	}
-}
-
-.aboutIcon {
-	margin-left: 5px;
-}
-
-.updatesSubmenu {
-	margin-top: 0 !important;
-
-	.updatesLabel {
-		font-size: var(--font-size-xs);
-	}
-
-	.giftContainer {
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-		height: 100%;
-		width: 100%;
-
-		div > div { right: -.5em; }
-	}
-}
-
-.userSubmenu {
-	position: relative;
-	cursor: default;
-	padding: var(--spacing-xs) !important;
-	margin: 0 !important;
-
-	// Fake border-top on user area
-	&::before {
-		width: 114%;
-		border-top: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
-		content: "";
-		position: absolute;
-		top: 0;
-		left: -12px;
-	}
-
-	&:hover, &:global(.is-active) {
-		background-color: initial !important;
-
-		.userActions svg {
-			color: var(--color-text-base) !important;
-		}
-
-	}
-
-	.avatar {
-		position: relative;
-		left: -2px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding-top: 16px;
-		cursor: default;
-	}
-
-	.username {
-		position: relative !important;
-		display: flex !important;
-		left: 9px !important;
-		justify-content: space-between;
-		align-items: center;
-		font-weight: var(--font-weight-bold);
-		font-size: var(--font-size-2xs);
-		padding-top: var(--spacing-s);
-		cursor: default;
-
-		.fullName {
-			width: 99px;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			color: var(--color-text-dark);
-		}
-	}
-
-	.userActions {
-		position: relative;
-		left: -1px;
-		cursor: pointer;
-
-		&:hover {
-			svg { color: initial; }
-		}
-	}
-}
-
-.userActionsMenu {
-	margin-left: 25px !important;
-}
-
 @media screen and (max-height: 470px) {
 	.helpMenu { display: none; }
 }
diff --git a/packages/editor-ui/src/plugins/icons.ts b/packages/editor-ui/src/plugins/icons.ts
index a6a2cb1b984ae..7de63e11b22cc 100644
--- a/packages/editor-ui/src/plugins/icons.ts
+++ b/packages/editor-ui/src/plugins/icons.ts
@@ -53,6 +53,7 @@ import {
 	faFolderOpen,
 	faGlobeAmericas,
 	faGift,
+	faGlobe,
 	faGraduationCap,
 	faGripVertical,
 	faHdd,
@@ -170,6 +171,7 @@ addIcon(faFilePdf);
 addIcon(faFilter);
 addIcon(faFolderOpen);
 addIcon(faGift);
+addIcon(faGlobe);
 addIcon(faGlobeAmericas);
 addIcon(faGraduationCap);
 addIcon(faHdd);

From abfc669cbf0515bd0482df98c3fc5e4a12e67f84 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Fri, 7 Oct 2022 18:00:44 +0200
Subject: [PATCH 28/39] =?UTF-8?q?=E2=9A=A1=20Finished=20main=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/N8nMenu/Menu.stories.ts    |  14 ++
 .../src/components/N8nMenu/Menu.vue           |  43 ++---
 .../src/components/N8nMenuItem/MenuItem.vue   |  47 +++--
 packages/design-system/src/types/menu.ts      |   2 +
 .../editor-ui/src/components/MainSidebar.vue  | 162 ++++++++++++++++--
 .../src/components/MenuItemsIterator.vue      |  49 ------
 6 files changed, 213 insertions(+), 104 deletions(-)
 delete mode 100644 packages/editor-ui/src/components/MenuItemsIterator.vue

diff --git a/packages/design-system/src/components/N8nMenu/Menu.stories.ts b/packages/design-system/src/components/N8nMenu/Menu.stories.ts
index f2d4e6a16028f..03e968df57502 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.stories.ts
+++ b/packages/design-system/src/components/N8nMenu/Menu.stories.ts
@@ -96,6 +96,13 @@ const menuItems = [
 		label: 'Executions',
 		position: 'top',
 	},
+	{
+		id: 'disabled-item',
+		icon: 'times',
+		label: 'Not Available',
+		available: false,
+		position: 'top',
+	},
 	{
 		id: 'website',
 		icon: 'globe',
@@ -115,6 +122,13 @@ const menuItems = [
 		children: [
 			{ icon: 'info', label: 'About n8n', id: 'about' },
 			{ icon: 'book', label: 'Documentation', id: 'docs' },
+			{
+				id: 'disabled-submenu-item',
+				icon: 'times',
+				label: 'Not Available',
+				available: false,
+				position: 'top',
+			},
 			{
 				id: 'quickstart',
 				icon: 'video',
diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index 02cfe1a1251ff..b4b4f926c6f8b 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -8,7 +8,7 @@
 			<slot name="header"></slot>
 		</div>
 		<div :class="$style.menuContent">
-			<div :class="$style.upperContent">
+			<div :class="{[$style.upperContent]: true, ['pt-xs']: $slots.menuPrefix === undefined  }">
 				<div v-if="$slots.menuPrefix" :class="$style.menuPrefix">
 					<slot name="menuPrefix"></slot>
 				</div>
@@ -28,7 +28,7 @@
 					/>
 				</el-menu>
 			</div>
-			<div :class="$style.lowerContent">
+			<div :class="{[$style.lowerContent]: true, ['pb-xs']: $slots.menuSuffix === undefined}">
 				<el-menu
 					:defaultActive="defaultActive"
 					:collapse="collapsed"
@@ -94,10 +94,10 @@ export default Vue.extend({
 	},
 	computed: {
 		upperMenuItems(): IMenuItem[] {
-			return this.items.filter((item: IMenuItem) => item.position === 'top');
+			return this.items.filter((item: IMenuItem) => item.position === 'top' && item.available !== false);
 		},
 		lowerMenuItems(): IMenuItem[] {
-			return this.items.filter((item: IMenuItem) => item.position === 'bottom');
+			return this.items.filter((item: IMenuItem) => item.position === 'bottom' && item.available !== false);
 		},
 	},
 	methods: {
@@ -129,42 +129,27 @@ export default Vue.extend({
 }
 
 .upperContent {
+	ul {
+		padding-top: 0 !important;
+	}
 	.submenuPopper {
 		bottom: auto !important;
 		top: 0 !important;
 	}
 }
 
-.menuCollapsed {
-	transition: width 150ms ease-in-out;
-
-	.menuHeader, .menuFooter, .menuPrefix, .menuSuffix {
-		display: none; // TODO: Remove this
+.lowerContent {
+	ul {
+		padding-bottom: 0 !important;
 	}
 }
 
-.menuHeader, .menuFooter {
-	height: 50px; // TODO: See about this....
-	padding: 12px 24px;
-	display: flex;
-	align-items: center;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.menuHeader {
-	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);;
-}
-
-.menuFooter {
-	border-top: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);;
+.menuCollapsed {
+	transition: width 150ms ease-in-out;
 }
 
-.menuPrefix {
-	padding: 12px 24px 0;
+.menuPrefix, .menuSuffix {
+	padding: var(--spacing-xs) var(--spacing-l);
 }
 
-.menuSuffix {
-	padding: 0 24px 12px;
-}
 </style>
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index c3929d7f4fb27..7782c9e625415 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -1,23 +1,30 @@
 <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.compact]: compact,
+			[$style.active]: isItemActive(item)
 		}"
 		:index="item.id"
 		:popper-append-to-body="false"
 		:popper-class="`${$style.submenuPopper} ${popperClass}`"
 	>
 			<template slot="title">
-				<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" />
+				<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" size="medium" />
 				<span :class="$style.label">{{ item.label }}</span>
 			</template>
 		<el-menu-item
-			v-for="child in item.children"
+			v-for="child in availableChildren"
 			:key="child.id"
-			:class="[$style.menuItem, $style.disableActiveStyle]"
+			:id="child.id"
+			:class="{
+				[$style.menuItem]: true,
+				[$style.disableActiveStyle]: !isItemActive(child),
+				[$style.active]: isItemActive(child),
+			}"
 			:index="child.id"
 			@click="onItemClick(child)"
 		>
@@ -27,16 +34,18 @@
 	</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]: 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" />
+			<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" size="medium" />
 			<span :class="$style.label">{{ item.label }}</span>
 		</el-menu-item>
 	</n8n-tooltip>
@@ -77,10 +86,18 @@ export default Vue.extend({
 			default: '',
 		},
 	},
+	computed: {
+		availableChildren(): IMenuItem[] {
+			return this.item.children ? this.item.children.filter(child => child.available !== false) : [];
+		},
+	},
 	methods: {
-		onMouseEnter(event: MouseEvent) {
-			console.log('MOUSE ENTER');
-			event.preventDefault();
+		isItemActive(item: IMenuItem): boolean {
+			// @ts-ignore
+			const isItemActive = item.activationRoutes && item.activationRoutes.includes(this.$route.name);
+			// @ts-ignore
+			const childActive = item.children !== undefined && item.children.find(child => child.activationRoutes && child.activationRoutes.includes(this.$route.name)) !== undefined;
+			return isItemActive || childActive;
 		},
 		onItemClick(item: IMenuItem, event: MouseEvent) {
 			if (item && item.type === 'link' && item.properties) {
@@ -125,6 +142,10 @@ export default Vue.extend({
 		padding: var(--spacing-2xs) var(--spacing-xs) !important;
 		user-select: none;
 
+		i:hover {
+			color: var(--color-primary);
+		}
+
 		&:hover {
 			.icon { color: var(--color-text-dark) }
 		}
@@ -143,6 +164,12 @@ export default Vue.extend({
 	};
 }
 
+.active {
+	background-color: var(--color-foreground-base);
+	border-radius: var(--border-radius-base);
+	.icon { color: var(--color-text-dark) }
+}
+
 .menuItem {
 	display: flex;
 	padding: var(--spacing-2xs) var(--spacing-xs) !important;
@@ -183,7 +210,7 @@ export default Vue.extend({
 }
 
 .compact {
-	width: fit-content;
+	width: 40px;
 	.icon {
 		margin: 0;
 		overflow: visible !important;
diff --git a/packages/design-system/src/types/menu.ts b/packages/design-system/src/types/menu.ts
index b06f3da174c2c..74ab5f18b72f6 100644
--- a/packages/design-system/src/types/menu.ts
+++ b/packages/design-system/src/types/menu.ts
@@ -2,9 +2,11 @@ export type IMenuItem = {
 	id: string;
 	label: string;
 	icon?: string;
+	available?: boolean;
 	position?: 'top' | 'bottom';
 	type?: 'default' | 'link';
 	properties?: ILinkMenuItemProperties;
+	activationRoutes?: string[],
 	children?: IMenuItem[],
 }
 
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 42bd3b6ecdc8a..3e7334ecbdcf0 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -9,7 +9,45 @@
 			:class="{ ['clickable']: true, [$style.sideMenuCollapseButton]: true, [$style.expandedButton]: !isCollapsed }"
 			@click="toggleCollapse">
 		</div>
-		<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect"></n8n-menu>
+		<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"/>
+				</div>
+			</template>
+			<template #menuSuffix v-if="hasVersionUpdates">
+				<div :class="$style.updates" @click="openUpdatesPanel">
+						<div :class="$style.giftContainer">
+							<GiftNotificationIcon />
+						</div>
+						<n8n-text :class="{['ml-xs']: true, [$style.expanded]: fullyExpanded}" color="text-base">
+							{{ nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : '' }}
+						</n8n-text>
+				</div>
+			</template>
+			<template #footer v-if="showUserArea">
+				<div :class="$style.userArea">
+					<div class="ml-3xs">
+						<!-- This dropdown is only enabled when sidebar is collapsed -->
+						<el-dropdown :disabled="!isCollapsed" placement="right-end" trigger="click" @command="onUserActionToggle">
+							<div :class="{[$style.avatar]: true, ['clickable']: isCollapsed }">
+								<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
+								<el-dropdown-menu slot="dropdown">
+									<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
+									<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
+								</el-dropdown-menu>
+							</div>
+						</el-dropdown>
+					</div>
+					<div :class="{ ['ml-2xs']: true, [$style.userName]: true, [$style.expanded]: fullyExpanded }">
+						<n8n-text size="medium" color="text-dark">{{currentUser.fullName}}</n8n-text>
+					</div>
+					<div :class="{ [$style.userActions]: true, [$style.expanded]: fullyExpanded }">
+						<n8n-action-dropdown :items="userMenuItems" placement="top-start" @select="onUserActionToggle" />
+					</div>
+				</div>
+			</template>
+		</n8n-menu>
 	</div>
 </template>
 
@@ -32,7 +70,6 @@ import { workflowRun } from '@/components/mixins/workflowRun';
 
 import mixins from 'vue-typed-mixins';
 import { mapGetters } from 'vuex';
-import MenuItemsIterator from './MenuItemsIterator.vue';
 import {
 	MODAL_CANCEL,
 	MODAL_CLOSE,
@@ -62,22 +99,12 @@ export default mixins(
 			ExecutionsList,
 			GiftNotificationIcon,
 			WorkflowSettings,
-			MenuItemsIterator,
 		},
 		data () {
 			return {
 				// @ts-ignore
 				basePath: this.$store.getters.getBaseUrl,
-				userMenuItems: [ // TODO: Move to computed
-					{
-						id: 'settings',
-						label: this.$locale.baseText('settings'),
-					},
-					{
-						id: 'logout',
-						label: this.$locale.baseText('auth.signout'),
-					},
-				],
+				fullyExpanded: false,
 			};
 		},
 		computed: {
@@ -113,18 +140,32 @@ export default mixins(
 			sidebarMenuBottomItems(): IMenuItem[] {
 				return this.$store.getters.sidebarMenuItems.filter((item: IMenuItem) => item.position === 'bottom');
 			},
-			mainMenuItems (): object[] {
+			userMenuItems (): object[] {
+				return [
+					{
+						id: 'settings',
+						label: this.$locale.baseText('settings'),
+					},
+					{
+						id: 'logout',
+						label: this.$locale.baseText('auth.signout'),
+					},
+				];
+			},
+ 			mainMenuItems (): object[] {
 				return [
 					{
 						id: 'workflows',
 						icon: 'network-wired',
 						label: this.$locale.baseText('mainSidebar.workflows'),
 						position: 'top',
+						activationRoutes: [ VIEWS.NEW_WORKFLOW, VIEWS.WORKFLOWS, VIEWS.WORKFLOW ],
 						children: [
 							{
 								id: 'workflow',
 								label: this.$locale.baseText('mainSidebar.new'),
 								icon: 'file',
+								activationRoutes: [ VIEWS.NEW_WORKFLOW ],
 							},
 							{
 								id: 'workflow-open',
@@ -138,13 +179,15 @@ export default mixins(
 						icon: 'box-open',
 						label: this.$locale.baseText('mainSidebar.templates'),
 						position: 'top',
-						// TODO: Only available if templates are enabled
+						available: this.isTemplatesEnabled,
+						activationRoutes: [ VIEWS.TEMPLATES ],
 					},
 					{
 						id: 'credentials',
 						icon: 'key',
 						label: this.$locale.baseText('mainSidebar.credentials'),
 						position: 'top',
+						activationRoutes: [ VIEWS.CREDENTIALS ],
 					},
 					{
 						id: 'executions',
@@ -157,6 +200,8 @@ export default mixins(
 						icon: 'cog',
 						label: this.$locale.baseText('settings'),
 						position: 'bottom',
+						available: this.canUserAccessSettings && this.currentUser,
+						activationRoutes: [ VIEWS.USERS_SETTINGS, VIEWS.API_SETTINGS, VIEWS.PERSONAL_SETTINGS ],
 					},
 					{
 						id: 'help',
@@ -216,6 +261,7 @@ export default mixins(
 			},
 		},
 		mounted() {
+			this.fullyExpanded = !this.isCollapsed;
 			if (this.$refs.user) {
 				this.$externalHooks().run('mainSidebar.mounted', { userRef: this.$refs.user });
 			}
@@ -258,6 +304,14 @@ export default mixins(
 			},
 			toggleCollapse () {
 				this.$store.commit('ui/toggleSidebarMenuCollapse');
+				// When expanding, delay showing some element to ensure smooth animation
+				if (!this.isCollapsed) {
+					setTimeout(() => {
+						this.fullyExpanded = !this.isCollapsed;
+					}, 300);
+				} else {
+					this.fullyExpanded = !this.isCollapsed;
+				}
 			},
 			openUpdatesPanel() {
 				this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
@@ -299,6 +353,13 @@ export default mixins(
 						this.$store.dispatch('ui/openModal', ABOUT_MODAL_KEY);
 						break;
 					}
+					case 'quickstart':
+					case 'docs':
+					case 'forum':
+					case 'examples' : {
+						this.trackHelpItemClick(key);
+						break;
+					}
 					default: break;
 				}
 			},
@@ -390,9 +451,25 @@ export default mixins(
 	border-right: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
 	transition: width 150ms ease-in-out;
 	width: $sidebar-expanded-width;
+	.logo {
+		height: $header-height;
+		display: flex;
+		align-items: center;
+		padding: var(--spacing-xs);
+
+		img {
+			position: relative;
+			left: 1px;
+			height: 20px;
+		}
+	}
 
 	&.sideMenuCollapsed {
 		width: $sidebar-width;
+
+		.logo img {
+			left: 0;
+		}
 	}
 }
 
@@ -439,7 +516,60 @@ export default mixins(
 	}
 }
 
+.updates {
+	display: flex;
+	align-items: center;
+	height: 26px;
+	cursor: pointer;
+
+	svg {	color: var(--color-text-base) !important; }
+	span {
+		display: none;
+		&.expanded { display: initial; }
+	}
+
+	&:hover {
+		&, & svg {
+			color: var(--color-text-dark) !important;
+		}
+	}
+}
+
+.userArea {
+	display: flex;
+	padding: var(--spacing-xs);
+	align-items: center;
+	height: 60px;
+	border-top: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+
+	.userName {
+		display: none;
+		overflow: hidden;
+		width: 100px;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+
+		&.expanded {
+			display: initial;
+		}
+
+		span {
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.userActions {
+		display: none;
+
+		&.expanded {
+			display: initial;
+		}
+	}
+}
+
+
 @media screen and (max-height: 470px) {
-	.helpMenu { display: none; }
+	:global(#help) { display: none; }
 }
 </style>
diff --git a/packages/editor-ui/src/components/MenuItemsIterator.vue b/packages/editor-ui/src/components/MenuItemsIterator.vue
deleted file mode 100644
index eaee86c78f928..0000000000000
--- a/packages/editor-ui/src/components/MenuItemsIterator.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-	<div>
-		<n8n-menu-item
-			v-for="item in items"
-			:key="item.id"
-			:index="item.id"
-			@click="onClick(item)"
-		>
-			<font-awesome-icon :icon="item.properties.icon" />
-			<span slot="title" :class="{'item-title-root': root, 'item-title': !root}">{{ item.properties.title }}</span>
-		</n8n-menu-item>
-	</div>
-</template>
-
-<script lang="ts">
-
-import { IMenuItem } from '../Interface';
-import Vue from 'vue';
-
-export default Vue.extend({
-	name: 'MenuItemsIterator',
-	props: [
-		'items',
-		'root',
-		'afterItemClick',
-	],
-	methods: {
-		onClick(item: IMenuItem) {
-			if (item && item.type === 'link' && item.properties) {
-				const href = item.properties.href;
-				if (!href) {
-					return;
-				}
-
-				if (item.properties.newWindow) {
-					window.open(href);
-				}
-				else {
-					window.location.assign(item.properties.href);
-				}
-
-				if(this.afterItemClick) {
-					this.afterItemClick(item.id);
-				}
-			}
-		},
-	},
-});
-</script>

From 5ce75abd3bbd52ce0866183ad9922b7b094f0313 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Fri, 7 Oct 2022 18:51:34 +0200
Subject: [PATCH 29/39] =?UTF-8?q?=E2=9A=A1=20Added=20new=20menus=20to=20se?=
 =?UTF-8?q?tttings=20and=20credentials=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CredentialEdit/CredentialEdit.vue         |  64 +++---
 .../src/components/SettingsSidebar.vue        | 183 ++++++++----------
 2 files changed, 124 insertions(+), 123 deletions(-)

diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index 851eec8503d00..0a4b42dda2532 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -50,33 +50,9 @@
 			<div :class="$style.container">
 				<div :class="$style.sidebar">
 					<n8n-menu
-						type="secondary"
+						:items="sidebarItems"
 						@select="onTabSelect"
-						defaultActive="connection"
-						:light="true"
-					>
-						<n8n-menu-item index="connection">
-							<span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.connection') }}</span>
-						</n8n-menu-item>
-						<enterprise-edition v-if="credentialType" :features="[EnterpriseEditionFeature.Sharing]">
-							<n8n-menu-item index="sharing">
-								<span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.sharing') }}</span>
-							</n8n-menu-item>
-							<template #fallback>
-								<n8n-menu-item
-									v-for="fakeDoor in credentialsFakeDoorFeatures"
-									v-bind:key="fakeDoor.featureName"
-									:index="`coming-soon/${fakeDoor.id}`"
-									:class="$style.tab"
-								>
-									<span slot="title">{{ $locale.baseText(fakeDoor.featureName) }}</span>
-								</n8n-menu-item>
-							</template>
-						</enterprise-edition>
-						<n8n-menu-item v-if="credentialType" index="details">
-							<span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.details') }}</span>
-						</n8n-menu-item>
-					</n8n-menu>
+					></n8n-menu>
 				</div>
 				<div v-if="activeTab === 'connection'" :class="$style.mainContent" ref="content">
 					<CredentialConfig
@@ -421,6 +397,42 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 			return getCredentialPermissions(this.currentUser, (this.credentialId ? this.currentCredential : this.credentialData) as ICredentialsResponse, this.$store);
 		},
+		sidebarItems(): object[] {
+			// <n8n-menu-item index="connection" >
+		// 				<span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.connection') }}</span>
+	// 			</n8n-menu-item>
+			// 			<enterprise-edition v-if="credentialType" :features="[EnterpriseEditionFeature.Sharing]">
+			// 				<n8n-menu-item index="sharing">
+			// 					<span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.sharing') }}</span>
+			// 				</n8n-menu-item>
+			// 				<template #fallback>
+			// 					<n8n-menu-item
+			// 						v-for="fakeDoor in credentialsFakeDoorFeatures"
+			// 						v-bind:key="fakeDoor.featureName"
+			// 						:index="`coming-soon/${fakeDoor.id}`"
+			// 						:class="$style.tab"
+			// 					>
+			// 						<span slot="title">{{ $locale.baseText(fakeDoor.featureName) }}</span>
+			// 					</n8n-menu-item>
+			// 				</template>
+			// 			</enterprise-edition>
+			// 			<n8n-menu-item v-if="credentialType" index="details">
+			// 				<span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.details') }}</span>
+			// 			</n8n-menu-item>
+			// 		</n8n-menu>
+			return [
+				{
+					id: 'connection',
+					label: this.$locale.baseText('credentialEdit.credentialEdit.connection'),
+					position: 'top',
+				},
+				{
+					id: 'details',
+					label: this.$locale.baseText('credentialEdit.credentialEdit.details'),
+					position: 'top',
+				},
+			];
+		},
 	},
 	methods: {
 		async beforeClose() {
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index 364e041c35170..0da5e7aea2f23 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -1,53 +1,19 @@
 <template>
 	<div :class="$style.container">
-		<n8n-menu :router="true" :default-active="$route.path" type="secondary">
-			<div :class="$style.returnButton" @click="onReturn">
+			<!-- <div :class="$style.returnButton" @click="onReturn">
 				<i :class="$style.icon">
 					<font-awesome-icon icon="arrow-left" />
 				</i>
 				<n8n-heading slot="title" size="large" :class="$style.settingsHeading" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
-			</div>
-			<n8n-menu-item index="/settings/personal" v-if="canAccessPersonalSettings()" :class="$style.tab">
-				<i :class="$style.icon">
-					<font-awesome-icon icon="user-circle" />
-				</i>
-				<span slot="title">{{ $locale.baseText('settings.personal') }}</span>
-			</n8n-menu-item>
-			<n8n-menu-item index="/settings/users" v-if="canAccessUsersSettings()" :class="[$style.tab, $style.usersMenu]">
-				<i :class="$style.icon">
-					<font-awesome-icon icon="user-friends" />
-				</i>
-				<span slot="title">{{ $locale.baseText('settings.users') }}</span>
-			</n8n-menu-item>
-			<n8n-menu-item index="/settings/api" v-if="canAccessApiSettings()" :class="[$style.tab, $style.apiMenu]">
-				<i :class="$style.icon">
-					<font-awesome-icon icon="plug" />
-				</i>
-				<span slot="title">{{ $locale.baseText('settings.n8napi') }}</span>
-			</n8n-menu-item>
-			<n8n-menu-item
-				v-for="fakeDoor in settingsFakeDoorFeatures"
-				v-bind:key="fakeDoor.featureName"
-				:index="`/settings/coming-soon/${fakeDoor.id}`"
-				:class="$style.tab"
-			>
-				<i :class="$style.icon">
-					<font-awesome-icon :icon="fakeDoor.icon" />
-				</i>
-				<span slot="title">{{ $locale.baseText(fakeDoor.featureName) }}</span>
-			</n8n-menu-item>
-			<n8n-menu-item index="/settings/community-nodes" v-if="canAccessCommunityNodes()" :class="$style.tab">
-				<i :class="$style.icon">
-					<font-awesome-icon icon="cube" />
-				</i>
-				<span slot="title">{{ $locale.baseText('settings.communityNodes') }}</span>
-			</n8n-menu-item>
-		</n8n-menu>
-		<div :class="$style.versionContainer">
+			</div> -->
+		<!-- <div :class="$style.versionContainer">
 			<n8n-link @click="onVersionClick" size="small">
 				{{ $locale.baseText('settings.version') }} {{ versionCli }}
 			</n8n-link>
-		</div>
+		</div> -->
+		<n8n-menu :items="sidebarMenuItems" @select="handleSelect">
+
+		</n8n-menu>
 	</div>
 </template>
 
@@ -73,6 +39,62 @@ export default mixins(
 		settingsFakeDoorFeatures(): IFakeDoor[] {
 			return this.$store.getters['ui/getFakeDoorByLocation']('settings');
 		},
+		sidebarMenuItems(): object[] {
+
+			const menuItems = [
+				{
+					id: 'settings-personal',
+					icon: 'user-circle',
+					label: this.$locale.baseText('settings.personal'),
+					position: 'top',
+					available: this.canAccessPersonalSettings(),
+					activationRoutes: [ VIEWS.PERSONAL_SETTINGS ],
+				},
+				{
+					id: 'settings-users',
+					icon: 'user-friends',
+					label: this.$locale.baseText('settings.users'),
+					position: 'top',
+					available: this.canAccessUsersSettings(),
+					activationRoutes: [ VIEWS.USERS_SETTINGS ],
+				},
+				{
+					id: 'settings-api',
+					icon: 'plug',
+					label: this.$locale.baseText('settings.n8napi'),
+					position: 'top',
+					available: this.canAccessApiSettings(),
+					activationRoutes: [ VIEWS.API_SETTINGS ],
+				},
+			];
+
+			for (const item of this.settingsFakeDoorFeatures) {
+				if (item.uiLocations.includes('settings')) {
+					menuItems.push({
+						id: item.id,
+						icon: item.icon || 'question',
+						// @ts-ignore
+						label: this.$locale.baseText(item.featureName),
+						position: 'top',
+						available: true,
+						activationRoutes: [ VIEWS.FAKE_DOOR ],
+					});
+				}
+			}
+
+			menuItems.push(
+				{
+					id: 'settings-community-nodes',
+					icon: 'cube',
+					label: this.$locale.baseText('settings.communityNodes'),
+					position: 'top',
+					available: this.canAccessCommunityNodes(),
+					activationRoutes: [ VIEWS.COMMUNITY_NODES ],
+				},
+			);
+
+			return menuItems;
+		},
 	},
 	mounted() {
 		this.pushConnect();
@@ -99,78 +121,45 @@ export default mixins(
 		openUpdatesPanel() {
 			this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
 		},
+		async handleSelect (key: string) {
+			switch (key) {
+				case 'settings-personal':
+					this.$router.push({ name: VIEWS.PERSONAL_SETTINGS });
+					break;
+				case 'settings-users':
+					this.$router.push({ name: VIEWS.USERS_SETTINGS });
+					break;
+				case 'settings-api':
+					this.$router.push({ name: VIEWS.API_SETTINGS });
+					break;
+				case 'environments':
+				case 'logging':
+					this.$router.push({ name: VIEWS.FAKE_DOOR, params: { featureId: key } });
+					break;
+				case 'settings-community-nodes':
+					this.$router.push({ name: VIEWS.COMMUNITY_NODES });
+					break;
+				default:
+					break;
+			}
+		},
 	},
 });
 </script>
 
 <style lang="scss" module>
-:global(.el-menu) {
-	--menu-item-height: 35px;
-	--submenu-item-height: 27px;
-}
 
 .container {
-	min-width: 200px;
+	min-width: $sidebar-expanded-width;
 	height: 100%;
 	background-color: var(--color-background-xlight);
 	border-right: var(--border-base);
 	position: relative;
-	padding: var(--spacing-xs);
 	overflow: auto;
 
 	ul {
 		height: 100%;
 	}
-
-	:global(.el-menu-item) > span{
-		position: relative;
-		left: 8px;
-	}
-}
-
-.settingsHeading {
-	position: relative;
-	left: 8px;
-}
-
-.tab {
-	margin-bottom: var(--spacing-2xs);
-	svg:global(.svg-inline--fa) { position: relative; }
-}
-
-.returnButton {
-	composes: tab;
-	margin-bottom: var(--spacing-l);
-	padding: 0 var(--spacing-xs);
-	height: 38px;
-	display: flex;
-	align-items: center;
-	color: var(--color-text-base);
-	font-size: var(--font-size-s);
-	cursor: pointer;
-
-	i {
-		color: var(--color-text-light);
-	}
-
-	&:hover > * {
-		color: var(--color-primary);
-	}
-}
-
-.usersMenu svg { left: -2px; }
-.apiMenu svg { left: 2px; }
-
-.icon {
-	width: 16px;
-	display: inline-flex;
-	margin-right: 10px;
-}
-
-.versionContainer {
-	position: absolute;
-	left: 23px;
-	bottom: 20px;
 }
 
 @media screen and (max-height: 420px) {

From 8442022c76161a40466a169486b9acecdc0d8c3f Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Sat, 8 Oct 2022 10:59:18 +0200
Subject: [PATCH 30/39] =?UTF-8?q?=E2=9C=A8=20Implemented=20tab=20and=20rou?=
 =?UTF-8?q?ter=20modes=20for=20n8n-menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/N8nMenu/Menu.vue           | 34 +++++++--
 .../src/components/N8nMenuItem/MenuItem.vue   | 70 ++++++++++++-------
 packages/design-system/src/types/menu.ts      |  6 +-
 .../CredentialEdit/CredentialEdit.vue         |  1 +
 .../editor-ui/src/components/MainSidebar.vue  | 12 ++--
 .../src/components/SettingsSidebar.vue        | 12 ++--
 6 files changed, 93 insertions(+), 42 deletions(-)

diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index b4b4f926c6f8b..217ba72fbfb08 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -15,7 +15,6 @@
 				<el-menu
 					:defaultActive="defaultActive"
 					:collapse="collapsed"
-					:router="router"
 					v-on="$listeners"
 				>
 					<n8n-menu-item
@@ -25,6 +24,9 @@
 						:compact="collapsed"
 						:popperClass="$style.submenuPopper"
 						:tooltipDelay="tooltipDelay"
+						:mode="mode"
+						:activeTab="activeTab"
+						@click="onSelect"
 					/>
 				</el-menu>
 			</div>
@@ -32,7 +34,6 @@
 				<el-menu
 					:defaultActive="defaultActive"
 					:collapse="collapsed"
-					:router="router"
 					v-on="$listeners"
 				>
 					<n8n-menu-item
@@ -42,6 +43,9 @@
 						:compact="collapsed"
 						:popperClass="$style.submenuPopper"
 						:tooltipDelay="tooltipDelay"
+						:mode="mode"
+						:activeTab="activeTab"
+						@click="onSelect"
 					/>
 				</el-menu>
 				<div v-if="$slots.menuSuffix" :class="$style.menuSuffix">
@@ -68,6 +72,11 @@ export default Vue.extend({
 		ElMenu, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
 		N8nMenuItem,
 	},
+	data() {
+		return {
+			activeTab: '',
+		};
+	},
 	props: {
 		type: {
 			type: String,
@@ -81,8 +90,10 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
-		router: {
-			type: Boolean,
+		mode: {
+			type: String,
+			default: 'router',
+			validator: (value: string): boolean => ['router', 'tabs'].includes(value),
 		},
 		tooltipDelay: {
 			type: Number,
@@ -92,6 +103,14 @@ export default Vue.extend({
 			type: Array as PropType<IMenuItem[]>,
 		},
 	},
+	mounted() {
+		if (this.mode === 'router') {
+			// @ts-ignore
+			this.activeTab = this.items.find(item => item.activationRoutes !== undefined && item.activationRoutes?.includes(this.$route.name))?.id || '';
+		} else {
+			this.activeTab =  this.items.length > 0 ? this.items[0].id : '';
+		}
+	},
 	computed: {
 		upperMenuItems(): IMenuItem[] {
 			return this.items.filter((item: IMenuItem) => item.position === 'top' && item.available !== false);
@@ -101,7 +120,12 @@ export default Vue.extend({
 		},
 	},
 	methods: {
-		onSelect(option: string): void {
+		onSelect(event: MouseEvent, option: string): void {
+			console.log('ON SELECT: ' + option);
+
+			if (this.mode === 'tabs') {
+				this.activeTab = option;
+			}
 			this.$emit('select', option);
 		},
 	},
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index 7782c9e625415..701982aed3e52 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -6,7 +6,7 @@
 			[$style.submenu]: true,
 			[$style.item]: true,
 			[$style.compact]: compact,
-			[$style.active]: isItemActive(item)
+			[$style.active]: mode === 'router' && isItemActive(item)
 		}"
 		:index="item.id"
 		:popper-append-to-body="false"
@@ -85,6 +85,14 @@ export default Vue.extend({
 			type: String,
 			default: '',
 		},
+		mode: {
+			type: String,
+			default: 'router',
+			validator: (value: string): boolean => ['router', 'tabs'].includes(value),
+		},
+		activeTab: {
+			type: String,
+		},
 	},
 	computed: {
 		availableChildren(): IMenuItem[] {
@@ -93,12 +101,24 @@ export default Vue.extend({
 	},
 	methods: {
 		isItemActive(item: IMenuItem): boolean {
-			// @ts-ignore
-			const isItemActive = item.activationRoutes && item.activationRoutes.includes(this.$route.name);
-			// @ts-ignore
-			const childActive = item.children !== undefined && item.children.find(child => child.activationRoutes && child.activationRoutes.includes(this.$route.name)) !== undefined;
+			const isItemActive = this.isActive(item);
+			const childActive = item.children !== undefined && item.children.find(child => this.isActive(child)) !== undefined;
 			return isItemActive || childActive;
 		},
+		isActive(item: IMenuItem): boolean {
+			if (this.mode === 'router') {
+				if (item.activateOnRoutePaths) {
+					// @ts-ignore
+					return item.activateOnRoutePaths !== undefined && item.activateOnRoutePaths.includes(this.$route.path);
+				} else if (item.activateOnRouteNames) {
+					// @ts-ignore
+					return item.activateOnRouteNames !== undefined && item.activateOnRouteNames.includes(this.$route.name);
+				}
+				return false;
+			} else {
+				return item.id === this.activeTab;
+			}
+		},
 		onItemClick(item: IMenuItem, event: MouseEvent) {
 			if (item && item.type === 'link' && item.properties) {
 				const href: string = item.properties.href;
@@ -114,7 +134,7 @@ export default Vue.extend({
 				}
 
 			}
-			this.$emit('click', event);
+			this.$emit('click', event, item.id);
 		},
 	},
 });
@@ -164,6 +184,25 @@ export default Vue.extend({
 	};
 }
 
+.disableActiveStyle {
+	background-color: initial !important;
+	color: var(--color-text-base) !important;
+
+	svg {
+		color: var(--color-text-base) !important;
+	}
+
+	&:hover {
+		background-color: var(--color-foreground-base) !important;
+		svg {
+			color: var(--color-text-dark) !important;
+		}
+		&:global(.el-submenu) {
+			background-color: unset !important;
+		}
+	}
+}
+
 .active {
 	background-color: var(--color-foreground-base);
 	border-radius: var(--border-radius-base);
@@ -175,25 +214,6 @@ export default Vue.extend({
 	padding: var(--spacing-2xs) var(--spacing-xs) !important;
 	margin: 0 !important;
 	border-radius: var(--border-radius-base) !important;
-
-	&.disableActiveStyle {
-		background-color: initial !important;
-		color: var(--color-text-base) !important;
-
-		svg {
-			color: var(--color-text-base) !important;
-		}
-
-		&:hover {
-			background-color: var(--color-foreground-base) !important;
-			svg {
-				color: var(--color-text-dark) !important;
-			}
-			&:global(.el-submenu) {
-				background-color: unset !important;
-			}
-		}
-	}
 }
 
 .icon {
diff --git a/packages/design-system/src/types/menu.ts b/packages/design-system/src/types/menu.ts
index 74ab5f18b72f6..a0035abe00230 100644
--- a/packages/design-system/src/types/menu.ts
+++ b/packages/design-system/src/types/menu.ts
@@ -6,7 +6,11 @@ export type IMenuItem = {
 	position?: 'top' | 'bottom';
 	type?: 'default' | 'link';
 	properties?: ILinkMenuItemProperties;
-	activationRoutes?: string[],
+	// For router menus populate only one of those arrays:
+	// If menu item can be activated on certain route names (easy mode)
+	activateOnRouteNames?: string[],
+	// For more specific matching, we can use paths
+	activateOnRoutePaths?: string[],
 	children?: IMenuItem[],
 }
 
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index 0a4b42dda2532..ff2fc8724d12b 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -51,6 +51,7 @@
 				<div :class="$style.sidebar">
 					<n8n-menu
 						:items="sidebarItems"
+						mode="tabs"
 						@select="onTabSelect"
 					></n8n-menu>
 				</div>
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 3e7334ecbdcf0..b7115e488f3b6 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -20,7 +20,7 @@
 						<div :class="$style.giftContainer">
 							<GiftNotificationIcon />
 						</div>
-						<n8n-text :class="{['ml-xs']: true, [$style.expanded]: fullyExpanded}" color="text-base">
+						<n8n-text :class="{['ml-xs']: true, [$style.expanded]: fullyExpanded }" color="text-base">
 							{{ nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : '' }}
 						</n8n-text>
 				</div>
@@ -159,13 +159,13 @@ export default mixins(
 						icon: 'network-wired',
 						label: this.$locale.baseText('mainSidebar.workflows'),
 						position: 'top',
-						activationRoutes: [ VIEWS.NEW_WORKFLOW, VIEWS.WORKFLOWS, VIEWS.WORKFLOW ],
+						activateOnRouteNames: [ VIEWS.NEW_WORKFLOW, VIEWS.WORKFLOWS, VIEWS.WORKFLOW ],
 						children: [
 							{
 								id: 'workflow',
 								label: this.$locale.baseText('mainSidebar.new'),
 								icon: 'file',
-								activationRoutes: [ VIEWS.NEW_WORKFLOW ],
+								activateOnRouteNames: [ VIEWS.NEW_WORKFLOW ],
 							},
 							{
 								id: 'workflow-open',
@@ -180,14 +180,14 @@ export default mixins(
 						label: this.$locale.baseText('mainSidebar.templates'),
 						position: 'top',
 						available: this.isTemplatesEnabled,
-						activationRoutes: [ VIEWS.TEMPLATES ],
+						activateOnRouteNames: [ VIEWS.TEMPLATES ],
 					},
 					{
 						id: 'credentials',
 						icon: 'key',
 						label: this.$locale.baseText('mainSidebar.credentials'),
 						position: 'top',
-						activationRoutes: [ VIEWS.CREDENTIALS ],
+						activateOnRouteNames: [ VIEWS.CREDENTIALS ],
 					},
 					{
 						id: 'executions',
@@ -201,7 +201,7 @@ export default mixins(
 						label: this.$locale.baseText('settings'),
 						position: 'bottom',
 						available: this.canUserAccessSettings && this.currentUser,
-						activationRoutes: [ VIEWS.USERS_SETTINGS, VIEWS.API_SETTINGS, VIEWS.PERSONAL_SETTINGS ],
+						activateOnRouteNames: [ VIEWS.USERS_SETTINGS, VIEWS.API_SETTINGS, VIEWS.PERSONAL_SETTINGS ],
 					},
 					{
 						id: 'help',
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index 0da5e7aea2f23..0ece5af3a324f 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -48,7 +48,7 @@ export default mixins(
 					label: this.$locale.baseText('settings.personal'),
 					position: 'top',
 					available: this.canAccessPersonalSettings(),
-					activationRoutes: [ VIEWS.PERSONAL_SETTINGS ],
+					activateOnRouteNames: [ VIEWS.PERSONAL_SETTINGS ],
 				},
 				{
 					id: 'settings-users',
@@ -56,7 +56,7 @@ export default mixins(
 					label: this.$locale.baseText('settings.users'),
 					position: 'top',
 					available: this.canAccessUsersSettings(),
-					activationRoutes: [ VIEWS.USERS_SETTINGS ],
+					activateOnRouteNames: [ VIEWS.USERS_SETTINGS ],
 				},
 				{
 					id: 'settings-api',
@@ -64,7 +64,7 @@ export default mixins(
 					label: this.$locale.baseText('settings.n8napi'),
 					position: 'top',
 					available: this.canAccessApiSettings(),
-					activationRoutes: [ VIEWS.API_SETTINGS ],
+					activateOnRouteNames: [ VIEWS.API_SETTINGS ],
 				},
 			];
 
@@ -77,7 +77,8 @@ export default mixins(
 						label: this.$locale.baseText(item.featureName),
 						position: 'top',
 						available: true,
-						activationRoutes: [ VIEWS.FAKE_DOOR ],
+						// @ts-ignore
+						activateOnRoutePaths: [ `/settings/coming-soon/${item.id}` ],
 					});
 				}
 			}
@@ -89,7 +90,8 @@ export default mixins(
 					label: this.$locale.baseText('settings.communityNodes'),
 					position: 'top',
 					available: this.canAccessCommunityNodes(),
-					activationRoutes: [ VIEWS.COMMUNITY_NODES ],
+					// @ts-ignore
+					activateOnRouteNames: [ VIEWS.COMMUNITY_NODES ],
 				},
 			);
 

From d5595fc4e0cea593fa6f0981d391d60633b7312d Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Sat, 8 Oct 2022 11:55:35 +0200
Subject: [PATCH 31/39] =?UTF-8?q?=E2=9C=A8=20Implemented=20credentials=20m?=
 =?UTF-8?q?enus=20using=20new=20n8n-menu=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/N8nMenu/Menu.vue           | 12 ++-
 .../CredentialEdit/CredentialEdit.vue         | 77 +++++++++----------
 .../editor-ui/src/views/CredentialsView.vue   | 41 +++++-----
 3 files changed, 68 insertions(+), 62 deletions(-)

diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index 217ba72fbfb08..5aea76cd83aa0 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -105,8 +105,14 @@ export default Vue.extend({
 	},
 	mounted() {
 		if (this.mode === 'router') {
-			// @ts-ignore
-			this.activeTab = this.items.find(item => item.activationRoutes !== undefined && item.activationRoutes?.includes(this.$route.name))?.id || '';
+			this.activeTab = this.items.find(
+				// @ts-ignore
+				item => item.activateOnRouteNames !== undefined && (item.activateOnRouteNames ).includes(this.$route.name))?.id || '';
+			if (this.activeTab === '') {
+				this.activeTab = this.items.find(
+					// @ts-ignore
+					item => item.activateOnRoutePaths !== undefined && (item.activateOnRoutePaths).includes(this.$route.path))?.id || '';
+			}
 		} else {
 			this.activeTab =  this.items.length > 0 ? this.items[0].id : '';
 		}
@@ -121,8 +127,6 @@ export default Vue.extend({
 	},
 	methods: {
 		onSelect(event: MouseEvent, option: string): void {
-			console.log('ON SELECT: ' + option);
-
 			if (this.mode === 'tabs') {
 				this.activeTab = option;
 			}
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index ff2fc8724d12b..4b7852f8ec479 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -49,11 +49,7 @@
 		<template slot="content">
 			<div :class="$style.container">
 				<div :class="$style.sidebar">
-					<n8n-menu
-						:items="sidebarItems"
-						mode="tabs"
-						@select="onTabSelect"
-					></n8n-menu>
+					<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect" ></n8n-menu>
 				</div>
 				<div v-if="activeTab === 'connection'" :class="$style.mainContent" ref="content">
 					<CredentialConfig
@@ -399,40 +395,42 @@ export default mixins(showMessage, nodeHelpers).extend({
 			return getCredentialPermissions(this.currentUser, (this.credentialId ? this.currentCredential : this.credentialData) as ICredentialsResponse, this.$store);
 		},
 		sidebarItems(): object[] {
-			// <n8n-menu-item index="connection" >
-		// 				<span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.connection') }}</span>
-	// 			</n8n-menu-item>
-			// 			<enterprise-edition v-if="credentialType" :features="[EnterpriseEditionFeature.Sharing]">
-			// 				<n8n-menu-item index="sharing">
-			// 					<span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.sharing') }}</span>
-			// 				</n8n-menu-item>
-			// 				<template #fallback>
-			// 					<n8n-menu-item
-			// 						v-for="fakeDoor in credentialsFakeDoorFeatures"
-			// 						v-bind:key="fakeDoor.featureName"
-			// 						:index="`coming-soon/${fakeDoor.id}`"
-			// 						:class="$style.tab"
-			// 					>
-			// 						<span slot="title">{{ $locale.baseText(fakeDoor.featureName) }}</span>
-			// 					</n8n-menu-item>
-			// 				</template>
-			// 			</enterprise-edition>
-			// 			<n8n-menu-item v-if="credentialType" index="details">
-			// 				<span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.details') }}</span>
-			// 			</n8n-menu-item>
-			// 		</n8n-menu>
-			return [
-				{
-					id: 'connection',
-					label: this.$locale.baseText('credentialEdit.credentialEdit.connection'),
-					position: 'top',
-				},
-				{
-					id: 'details',
-					label: this.$locale.baseText('credentialEdit.credentialEdit.details'),
-					position: 'top',
-				},
-			];
+				const items = [
+					{
+						id: 'connection',
+						label: this.$locale.baseText('credentialEdit.credentialEdit.connection'),
+						position: 'top',
+					},
+					{
+						id: 'sharing',
+						label: this.$locale.baseText('credentialEdit.credentialEdit.sharing'),
+						position: 'top',
+						available: this.credentialType !== null && this.isSharingAvailable,
+					},
+				];
+
+				if (this.credentialType !== null && !this.isSharingAvailable) {
+					for (const item of this.credentialsFakeDoorFeatures) {
+						items.push({
+							id: `coming-soon/${item.id}`,
+							// @ts-ignore
+							label: this.$locale.baseText(item.featureName),
+							position: 'top',
+						});
+					}
+				}
+
+				items.push(
+					{
+						id: 'details',
+						label: this.$locale.baseText('credentialEdit.credentialEdit.details'),
+						position: 'top',
+					},
+				);
+				return items;
+		},
+		isSharingAvailable(): boolean {
+			return this.$store.getters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing) === true;
 		},
 	},
 	methods: {
@@ -471,7 +469,6 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 			return false;
 		},
-
 		displayCredentialParameter(parameter: INodeProperties): boolean {
 			if (parameter.type === 'hidden') {
 				return false;
diff --git a/packages/editor-ui/src/views/CredentialsView.vue b/packages/editor-ui/src/views/CredentialsView.vue
index 00de72a2319f0..509c09f11e4df 100644
--- a/packages/editor-ui/src/views/CredentialsView.vue
+++ b/packages/editor-ui/src/views/CredentialsView.vue
@@ -14,24 +14,9 @@
 			</div>
 
 			<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
-				<n8n-menu default-active="owner" type="secondary" @select="onSelectOwner" ref="selectOwnerMenu">
-					<n8n-menu-item index="owner">
-						<template #title>
-							<n8n-icon icon="user"/>
-							<span class="ml-xs">
-							{{ $locale.baseText('credentials.menu.myCredentials') }}
-						</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="all">
-						<template #title>
-							<n8n-icon icon="globe-americas"/>
-							<span class="ml-xs">
-							{{ $locale.baseText('credentials.menu.allCredentials') }}
-						</span>
-						</template>
-					</n8n-menu-item>
-				</n8n-menu>
+				<div :class="$style.sidebarContainer">
+					<n8n-menu :items="menuItems" mode="tabs" @select="onSelectOwner" ref="selectOwnerMenu"></n8n-menu>
+				</div>
 			</enterprise-edition>
 		</template>
 
@@ -290,6 +275,22 @@ export default mixins(
 		};
 	},
 	computed: {
+		menuItems(): object[] {
+			return [
+				{
+					id: 'owner',
+					icon: 'user',
+					label: this.$locale.baseText('credentials.menu.myCredentials'),
+					position: 'top',
+				},
+				{
+					id: 'all',
+					icon: 'globe-americas',
+					label: this.$locale.baseText('credentials.menu.allCredentials'),
+					position: 'top',
+				},
+			];
+		},
 		currentUser(): IUser {
 			return this.$store.getters['users/currentUser'];
 		},
@@ -561,5 +562,9 @@ export default mixins(
 .type-input {
 	--max-width: 265px;
 }
+
+.sidebarContainer ul {
+	padding: 0 !important;
+}
 </style>
 

From c68efa9bc6021e97713c797e47692a5d55a34dbe Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Sat, 8 Oct 2022 12:59:00 +0200
Subject: [PATCH 32/39] =?UTF-8?q?=F0=9F=92=84=20Finishing=20main=20and=20s?=
 =?UTF-8?q?ettings=20sidebar=20details,=20updating=20design=20system=20sto?=
 =?UTF-8?q?ries?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/N8nMenu/Menu.stories.ts    | 27 +++++++------
 .../src/components/N8nMenu/Menu.vue           | 12 +++---
 .../editor-ui/src/components/MainSidebar.vue  | 14 +++----
 .../src/components/SettingsSidebar.vue        | 38 +++++++++++--------
 4 files changed, 52 insertions(+), 39 deletions(-)

diff --git a/packages/design-system/src/components/N8nMenu/Menu.stories.ts b/packages/design-system/src/components/N8nMenu/Menu.stories.ts
index 03e968df57502..fd38c6ae8486d 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.stories.ts
+++ b/packages/design-system/src/components/N8nMenu/Menu.stories.ts
@@ -21,7 +21,7 @@ const template: StoryFn = (args, { argTypes }) => ({
 		N8nMenu,
 	},
 	template: `
-		<div style="height: 90vh; width: 200px; border: 1px solid #c6c8d0">
+		<div style="height: 90vh; width: 200px">
 			<n8n-menu v-bind="$props" @select="onSelect"></n8n-menu>
 		</div>
 	`,
@@ -33,18 +33,21 @@ const templateWithHeaderAndFooter: StoryFn = (args, { argTypes }) => ({
 	components: {
 		N8nMenu,
 		N8nIcon,
+		N8nText,
 	},
 	template: `
-		<div style="height: 90vh; width: 200px; border: 1px solid #c6c8d0">
+		<div style="height: 90vh; width: 200px">
 			<n8n-menu v-bind="$props" @select="onSelect">
 				<template #header>
-					<a href="#">
+					<a href="#" class="p-m hideme" style="display: block;">
 						<n8n-icon icon="long-arrow-alt-left"/>&nbsp;&nbsp;Back to home
 					</a>
 				</template>
 				<template #footer>
-					<n8n-icon icon="user-circle" size="xlarge"/>&nbsp;&nbsp;
-					<n8n-text>John Smithson</n8n-text>
+					<div class="p-m hideme">
+						<n8n-icon icon="user-circle" size="xlarge"/>&nbsp;&nbsp;
+						<n8n-text>John Smithson</n8n-text>
+					</div>
 				</template>
 			</n8n-menu>
 		</div>
@@ -60,22 +63,24 @@ const templateWithAllSlots: StoryFn = (args, { argTypes }) => ({
 		N8nText,
 	},
 	template: `
-		<div style="height: 90vh; width: 200px; border: 1px solid #c6c8d0">
+		<div style="height: 90vh; width: 200px">
 			<n8n-menu v-bind="$props" @select="onSelect">
 				<template #header>
-					<a href="#">
+					<a href="#" class="p-m hideme" style="display: block;">
 						<n8n-icon icon="long-arrow-alt-left"/>&nbsp;&nbsp;Back to home
 					</a>
 				</template>
 				<template #menuPrefix>
-					<n8n-text size="small"  color="text-light">Something can be added here...</n8n-text>
+					<n8n-text class="hideme" size="small"  color="text-light">Something can be added here...</n8n-text>
 				</template>
 				<template #menuSuffix>
-					<n8n-text size="small" color="text-light">...and here if needed</n8n-text>
+					<n8n-text class="hideme" size="small" color="text-light">...and here if needed</n8n-text>
 				</template>
 				<template #footer>
-					<n8n-icon icon="user-circle" size="xlarge"/>&nbsp;&nbsp;
-					<n8n-text>John Smithson</n8n-text>
+					<div class="p-m hideme">
+						<n8n-icon icon="user-circle" size="xlarge"/>&nbsp;&nbsp;
+						<n8n-text>John Smithson</n8n-text>
+					</div>
 				</template>
 			</n8n-menu>
 		</div>
diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index 5aea76cd83aa0..078d8bf655607 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -105,14 +105,13 @@ export default Vue.extend({
 	},
 	mounted() {
 		if (this.mode === 'router') {
-			this.activeTab = this.items.find(
+			const found = this.items.find(item => {
 				// @ts-ignore
-				item => item.activateOnRouteNames !== undefined && (item.activateOnRouteNames ).includes(this.$route.name))?.id || '';
-			if (this.activeTab === '') {
-				this.activeTab = this.items.find(
+				return item.activateOnRouteNames !== undefined && (item.activateOnRouteNames ).includes(this.$route.name) ||
 					// @ts-ignore
-					item => item.activateOnRoutePaths !== undefined && (item.activateOnRoutePaths).includes(this.$route.path))?.id || '';
-			}
+					item.activateOnRoutePaths !== undefined && (item.activateOnRoutePaths).includes(this.$route.path);
+			});
+			this.activeTab = found ? found.id : '';
 		} else {
 			this.activeTab =  this.items.length > 0 ? this.items[0].id : '';
 		}
@@ -174,6 +173,7 @@ export default Vue.extend({
 
 .menuCollapsed {
 	transition: width 150ms ease-in-out;
+	:global(.hideme) { display: none !important; }
 }
 
 .menuPrefix, .menuSuffix {
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index b7115e488f3b6..cf85da9762eac 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -40,7 +40,7 @@
 						</el-dropdown>
 					</div>
 					<div :class="{ ['ml-2xs']: true, [$style.userName]: true, [$style.expanded]: fullyExpanded }">
-						<n8n-text size="medium" color="text-dark">{{currentUser.fullName}}</n8n-text>
+						<n8n-text size="small" :bold="true" color="text-dark">{{currentUser.fullName}}</n8n-text>
 					</div>
 					<div :class="{ [$style.userActions]: true, [$style.expanded]: fullyExpanded }">
 						<n8n-action-dropdown :items="userMenuItems" placement="top-start" @select="onUserActionToggle" />
@@ -249,14 +249,14 @@ export default mixins(
 									newWindow: true,
 								},
 							},
+							{
+								id: 'about',
+								icon: 'info',
+								label: this.$locale.baseText('mainSidebar.aboutN8n'),
+								position: 'bottom',
+							},
 						],
 					},
-					{
-						id: 'about',
-						icon: 'info',
-						label: this.$locale.baseText('mainSidebar.aboutN8n'),
-						position: 'bottom',
-					},
 				];
 			},
 		},
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index 0ece5af3a324f..3b7de549f23bd 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -1,18 +1,21 @@
 <template>
 	<div :class="$style.container">
-			<!-- <div :class="$style.returnButton" @click="onReturn">
-				<i :class="$style.icon">
-					<font-awesome-icon icon="arrow-left" />
-				</i>
-				<n8n-heading slot="title" size="large" :class="$style.settingsHeading" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
-			</div> -->
-		<!-- <div :class="$style.versionContainer">
-			<n8n-link @click="onVersionClick" size="small">
-				{{ $locale.baseText('settings.version') }} {{ versionCli }}
-			</n8n-link>
-		</div> -->
 		<n8n-menu :items="sidebarMenuItems" @select="handleSelect">
-
+			<template #header>
+				<div :class="$style.returnButton" @click="onReturn">
+					<i class="mr-xs">
+						<font-awesome-icon icon="arrow-left" />
+					</i>
+					<n8n-heading slot="title" size="large" :class="$style.settingsHeading" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
+				</div>
+			</template>
+			<template #menuSuffix>
+				<div :class="$style.versionContainer">
+					<n8n-link @click="onVersionClick" size="small">
+						{{ $locale.baseText('settings.version') }} {{ versionCli }}
+					</n8n-link>
+				</div>
+			</template>
 		</n8n-menu>
 	</div>
 </template>
@@ -153,14 +156,19 @@ export default mixins(
 
 .container {
 	min-width: $sidebar-expanded-width;
-	height: 100%;
+	height: 100vh;
 	background-color: var(--color-background-xlight);
 	border-right: var(--border-base);
 	position: relative;
 	overflow: auto;
 
-	ul {
-		height: 100%;
+}
+
+.returnButton {
+	padding: var(--spacing-s) var(--spacing-l);
+	cursor: pointer;
+	&:hover {
+		color: var(--color-primary);
 	}
 }
 

From fca8cf58b9ae3eea66ed4a3c965a6d3b15fb4b88 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Sat, 8 Oct 2022 13:55:02 +0200
Subject: [PATCH 33/39] =?UTF-8?q?=F0=9F=92=84=20Adding=20injected=20items?=
 =?UTF-8?q?=20support=20to=20main=20sidebar,=20handling=20navigation=20err?=
 =?UTF-8?q?ors,=20small=20tweaks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CredentialEdit/CredentialEdit.vue         |  4 +++
 .../editor-ui/src/components/MainSidebar.vue  | 34 ++++++++++++++++---
 .../src/components/SettingsSidebar.vue        | 18 +++++++---
 packages/editor-ui/src/store.ts               |  1 -
 4 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index 4b7852f8ec479..1e7c9f99e0600 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -989,6 +989,10 @@ export default mixins(showMessage, nodeHelpers).extend({
 	min-width: 170px;
 	margin-right: var(--spacing-l);
 	flex-grow: 1;
+
+	ul {
+		padding: 0 !important;
+	}
 }
 
 .header {
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index cf85da9762eac..1846ed70821a6 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"/>
@@ -153,7 +153,28 @@ export default mixins(
 				];
 			},
  			mainMenuItems (): object[] {
-				return [
+				const items: object[] = [];
+				const injectedItems = this.$store.getters.sidebarMenuItems as IMenuItem[];
+
+				if (injectedItems && injectedItems.length > 0) {
+					for(const item of injectedItems) {
+						items.push(
+								{
+								id: item.id,
+								// @ts-ignore
+								icon: item.properties ? item.properties.icon : '',
+								// @ts-ignore
+								label: item.properties ? item.properties.title : '',
+								position: item.position,
+								activateOnRouteNames: [ VIEWS.TEMPLATES ],
+								type: item.properties?.href ? 'link' : 'regular',
+								properties: item.properties,
+							},
+						);
+					}
+				};
+
+				const regularItems = [
 					{
 						id: 'workflows',
 						icon: 'network-wired',
@@ -258,6 +279,7 @@ export default mixins(
 						],
 					},
 				];
+				return [ ...items, ...regularItems ];
 			},
 		},
 		mounted() {
@@ -333,7 +355,9 @@ export default mixins(
 						break;
 					}
 					case 'credentials': {
-						this.$router.push({name: VIEWS.CREDENTIALS});
+						if (this.$router.currentRoute.name !== VIEWS.CREDENTIALS) {
+							this.$router.push({name: VIEWS.CREDENTIALS});
+						}
 						break;
 					}
 					case 'executions': {
@@ -344,7 +368,9 @@ export default mixins(
 						const defaultRoute = this.findFirstAccessibleSettingsRoute();
 						if (defaultRoute) {
 							const routeProps = this.$router.resolve({ name: defaultRoute });
-							this.$router.push(routeProps.route.path);
+							if (this.$router.currentRoute.name !== defaultRoute) {
+								this.$router.push(routeProps.route.path);
+							}
 						}
 						break;
 					}
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index 3b7de549f23bd..aa412eddee05e 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -129,20 +129,28 @@ export default mixins(
 		async handleSelect (key: string) {
 			switch (key) {
 				case 'settings-personal':
-					this.$router.push({ name: VIEWS.PERSONAL_SETTINGS });
+					if (this.$router.currentRoute.name !== VIEWS.PERSONAL_SETTINGS) {
+						this.$router.push({ name: VIEWS.PERSONAL_SETTINGS });
+					}
 					break;
 				case 'settings-users':
-					this.$router.push({ name: VIEWS.USERS_SETTINGS });
+					if (this.$router.currentRoute.name !== VIEWS.USERS_SETTINGS) {
+						this.$router.push({ name: VIEWS.USERS_SETTINGS });
+					}
 					break;
 				case 'settings-api':
-					this.$router.push({ name: VIEWS.API_SETTINGS });
+					if (this.$router.currentRoute.name !== VIEWS.API_SETTINGS) {
+						this.$router.push({ name: VIEWS.API_SETTINGS });
+					}
 					break;
 				case 'environments':
 				case 'logging':
-					this.$router.push({ name: VIEWS.FAKE_DOOR, params: { featureId: key } });
+					this.$router.push({ name: VIEWS.FAKE_DOOR, params: { featureId: key } }).catch(() => {});
 					break;
 				case 'settings-community-nodes':
-					this.$router.push({ name: VIEWS.COMMUNITY_NODES });
+					if (this.$router.currentRoute.name !== VIEWS.COMMUNITY_NODES) {
+						this.$router.push({ name: VIEWS.COMMUNITY_NODES });
+					}
 					break;
 				default:
 					break;
diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts
index 1cd2f24ab1f01..b4a69a1738d55 100644
--- a/packages/editor-ui/src/store.ts
+++ b/packages/editor-ui/src/store.ts
@@ -33,7 +33,6 @@ import {
 	IWorkflowDb,
 	XYPosition,
 	IRestApiContext,
-	IWorkflowsState,
 } from './Interface';
 
 import nodeTypes from './modules/nodeTypes';

From 4f80432e8f86b25d514cd964f6c0511de4989a9f Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Sat, 8 Oct 2022 14:06:04 +0200
Subject: [PATCH 34/39] =?UTF-8?q?=E2=9C=94=EF=B8=8F=20Fixing=20linting=20e?=
 =?UTF-8?q?rrors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/N8nMenuItem/MenuItem.stories.ts     | 10 +++++-----
 packages/design-system/src/types/menu.ts               |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts b/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
index 0bb3510793dec..1ca8a792c0342 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
@@ -1,4 +1,4 @@
-import N8nMenuItem from "."
+import N8nMenuItem from ".";
 import ElMenu from 'element-ui/lib/menu';
 import { StoryFn } from '@storybook/vue';
 
@@ -16,7 +16,7 @@ const template: StoryFn = (args, { argTypes }) => ({
 				<n8n-menu-item v-bind="$props" />
 			</el-menu>
 		</div>
-	`
+	`,
 });
 
 export const defaultMenuItem = template.bind({});
@@ -25,7 +25,7 @@ defaultMenuItem.args = {
 		id: 'workflows',
 		icon: 'heart',
 		label: 'Workflows',
-	}
+	},
 };
 
 export const compact = template.bind({});
@@ -71,6 +71,6 @@ withChildren.args = {
 					newWindow: true,
 				},
 			},
-		]
-	}
+		],
+	},
 };
diff --git a/packages/design-system/src/types/menu.ts b/packages/design-system/src/types/menu.ts
index a0035abe00230..a04f38eb17e37 100644
--- a/packages/design-system/src/types/menu.ts
+++ b/packages/design-system/src/types/menu.ts
@@ -12,9 +12,9 @@ export type IMenuItem = {
 	// For more specific matching, we can use paths
 	activateOnRoutePaths?: string[],
 	children?: IMenuItem[],
-}
+};
 
 export type ILinkMenuItemProperties = {
 	href: string;
 	newWindow?: boolean;
-}
+};

From f122d467e3fdb654f4bc42c6dae06b666472a2d7 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Sun, 9 Oct 2022 07:45:31 +0200
Subject: [PATCH 35/39] =?UTF-8?q?=E2=9C=94=EF=B8=8F=20Addressing=20typescr?=
 =?UTF-8?q?ipt=20errors=20in=20design=20system=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design-system/src/components/N8nMenu/Menu.vue      | 5 ++---
 .../src/components/N8nMenuItem/MenuItem.stories.ts          | 5 ++++-
 .../design-system/src/components/N8nMenuItem/MenuItem.vue   | 6 ++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index 078d8bf655607..07371aa07d19c 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -64,6 +64,7 @@ import ElMenu from 'element-ui/lib/menu';
 import N8nMenuItem from '../N8nMenuItem';
 
 import Vue, { PropType } from 'vue';
+import { Route } from 'vue-router';
 import { IMenuItem } from '../../types';
 
 export default Vue.extend({
@@ -106,9 +107,7 @@ export default Vue.extend({
 	mounted() {
 		if (this.mode === 'router') {
 			const found = this.items.find(item => {
-				// @ts-ignore
-				return item.activateOnRouteNames !== undefined && (item.activateOnRouteNames ).includes(this.$route.name) ||
-					// @ts-ignore
+				return item.activateOnRouteNames !== undefined && (item.activateOnRouteNames ).includes(this.$route.name || '') ||
 					item.activateOnRoutePaths !== undefined && (item.activateOnRoutePaths).includes(this.$route.path);
 			});
 			this.activeTab = found ? found.id : '';
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts b/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
index 1ca8a792c0342..7d185ae472d9f 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
@@ -9,7 +9,10 @@ export default {
 
 const template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
-	components: { ElMenu, N8nMenuItem },
+	components: {
+		ElMenu, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		N8nMenuItem ,
+	},
 	template: `
 		<div style="width: 200px">
 			<el-menu>
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index 701982aed3e52..a549b52bf62fc 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -58,7 +58,7 @@ import N8nTooltip from '../N8nTooltip';
 import N8nIcon from '../N8nIcon';
 import { IMenuItem } from '../../types';
 import Vue from 'vue';
-
+import { Route } from 'vue-router';
 
 export default Vue.extend({
 	name: 'n8n-menu-item',
@@ -108,11 +108,9 @@ export default Vue.extend({
 		isActive(item: IMenuItem): boolean {
 			if (this.mode === 'router') {
 				if (item.activateOnRoutePaths) {
-					// @ts-ignore
 					return item.activateOnRoutePaths !== undefined && item.activateOnRoutePaths.includes(this.$route.path);
 				} else if (item.activateOnRouteNames) {
-					// @ts-ignore
-					return item.activateOnRouteNames !== undefined && item.activateOnRouteNames.includes(this.$route.name);
+					return item.activateOnRouteNames !== undefined && item.activateOnRouteNames.includes(this.$route.name || '');
 				}
 				return false;
 			} else {

From 56aaf1faa34543bbbc9d945cd092783bf2b06421 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Sun, 9 Oct 2022 08:40:22 +0200
Subject: [PATCH 36/39] =?UTF-8?q?=E2=9A=A1=20Using=20design-system=20types?=
 =?UTF-8?q?=20in=20editor=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/N8nMenuItem/MenuItem.vue        |  4 ++--
 .../components/CredentialEdit/CredentialEdit.vue   |  9 +++++----
 packages/editor-ui/src/components/MainSidebar.vue  | 14 ++++----------
 .../editor-ui/src/components/SettingsSidebar.vue   | 11 +++++------
 packages/editor-ui/src/views/CredentialsView.vue   |  3 ++-
 5 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index a549b52bf62fc..941a4db30773f 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -13,7 +13,7 @@
 		:popper-class="`${$style.submenuPopper} ${popperClass}`"
 	>
 			<template slot="title">
-				<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" size="medium" />
+				<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" size="large" />
 				<span :class="$style.label">{{ item.label }}</span>
 			</template>
 		<el-menu-item
@@ -45,7 +45,7 @@
 			:index="item.id"
 			@click="onItemClick(item)"
 		>
-			<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" size="medium" />
+			<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" size="large" />
 			<span :class="$style.label">{{ item.label }}</span>
 		</el-menu-item>
 	</n8n-tooltip>
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index 1e7c9f99e0600..4a52a9cde7183 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -143,6 +143,8 @@ import {IDataObject} from "n8n-workflow";
 import FeatureComingSoon from '../FeatureComingSoon.vue';
 import {mapGetters} from "vuex";
 import {getCredentialPermissions, IPermissions} from "@/permissions";
+import { IMenuItem } from 'n8n-design-system';
+import { BaseTextKey } from '@/plugins/i18n';
 
 interface NodeAccessMap {
 	[nodeType: string]: ICredentialNodeAccess | null;
@@ -394,8 +396,8 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 			return getCredentialPermissions(this.currentUser, (this.credentialId ? this.currentCredential : this.credentialData) as ICredentialsResponse, this.$store);
 		},
-		sidebarItems(): object[] {
-				const items = [
+		sidebarItems(): IMenuItem[] {
+				const items: IMenuItem[] = [
 					{
 						id: 'connection',
 						label: this.$locale.baseText('credentialEdit.credentialEdit.connection'),
@@ -413,8 +415,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 					for (const item of this.credentialsFakeDoorFeatures) {
 						items.push({
 							id: `coming-soon/${item.id}`,
-							// @ts-ignore
-							label: this.$locale.baseText(item.featureName),
+							label: this.$locale.baseText(item.featureName as BaseTextKey),
 							position: 'top',
 						});
 					}
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 1846ed70821a6..c694314f86a43 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -134,12 +134,6 @@ export default mixins(
 			workflowExecution (): IExecutionResponse | null {
 				return this.$store.getters.getWorkflowExecution;
 			},
-			sidebarMenuTopItems(): IMenuItem[] {
-				return this.$store.getters.sidebarMenuItems.filter((item: IMenuItem) => item.position === 'top');
-			},
-			sidebarMenuBottomItems(): IMenuItem[] {
-				return this.$store.getters.sidebarMenuItems.filter((item: IMenuItem) => item.position === 'bottom');
-			},
 			userMenuItems (): object[] {
 				return [
 					{
@@ -152,8 +146,8 @@ export default mixins(
 					},
 				];
 			},
- 			mainMenuItems (): object[] {
-				const items: object[] = [];
+ 			mainMenuItems (): IMenuItem[] {
+				const items: IMenuItem[] = [];
 				const injectedItems = this.$store.getters.sidebarMenuItems as IMenuItem[];
 
 				if (injectedItems && injectedItems.length > 0) {
@@ -169,12 +163,12 @@ export default mixins(
 								activateOnRouteNames: [ VIEWS.TEMPLATES ],
 								type: item.properties?.href ? 'link' : 'regular',
 								properties: item.properties,
-							},
+							} as IMenuItem,
 						);
 					}
 				};
 
-				const regularItems = [
+				const regularItems: IMenuItem[] = [
 					{
 						id: 'workflows',
 						icon: 'network-wired',
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index aa412eddee05e..35ccc86cefc8d 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -28,6 +28,8 @@ 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';
 
 export default mixins(
 	userHelpers,
@@ -42,9 +44,9 @@ export default mixins(
 		settingsFakeDoorFeatures(): IFakeDoor[] {
 			return this.$store.getters['ui/getFakeDoorByLocation']('settings');
 		},
-		sidebarMenuItems(): object[] {
+		sidebarMenuItems(): IMenuItem[] {
 
-			const menuItems = [
+			const menuItems: IMenuItem[] = [
 				{
 					id: 'settings-personal',
 					icon: 'user-circle',
@@ -76,11 +78,9 @@ export default mixins(
 					menuItems.push({
 						id: item.id,
 						icon: item.icon || 'question',
-						// @ts-ignore
-						label: this.$locale.baseText(item.featureName),
+						label: this.$locale.baseText(item.featureName as BaseTextKey),
 						position: 'top',
 						available: true,
-						// @ts-ignore
 						activateOnRoutePaths: [ `/settings/coming-soon/${item.id}` ],
 					});
 				}
@@ -93,7 +93,6 @@ export default mixins(
 					label: this.$locale.baseText('settings.communityNodes'),
 					position: 'top',
 					available: this.canAccessCommunityNodes(),
-					// @ts-ignore
 					activateOnRouteNames: [ VIEWS.COMMUNITY_NODES ],
 				},
 			);
diff --git a/packages/editor-ui/src/views/CredentialsView.vue b/packages/editor-ui/src/views/CredentialsView.vue
index 509c09f11e4df..258df9e9004fa 100644
--- a/packages/editor-ui/src/views/CredentialsView.vue
+++ b/packages/editor-ui/src/views/CredentialsView.vue
@@ -241,6 +241,7 @@ import {EnterpriseEditionFeature} from "@/constants";
 import TemplateCard from "@/components/TemplateCard.vue";
 import Vue from "vue";
 import { debounceHelper } from '@/components/mixins/debounce';
+import { IMenuItem } from 'n8n-design-system';
 
 export default mixins(
 	showMessage,
@@ -275,7 +276,7 @@ export default mixins(
 		};
 	},
 	computed: {
-		menuItems(): object[] {
+		menuItems(): IMenuItem[] {
 			return [
 				{
 					id: 'owner',

From e0a0f02f8249114e7f5be942bb1661316c3cbdac Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Sun, 9 Oct 2022 12:36:16 +0200
Subject: [PATCH 37/39] =?UTF-8?q?=F0=9F=92=84=20Add=20support=20for=20cust?=
 =?UTF-8?q?om=20icon=20size=20in=20menu=20items?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../design-system/src/components/N8nMenuItem/MenuItem.vue   | 6 ++++--
 packages/design-system/src/types/menu.ts                    | 1 +
 packages/editor-ui/src/components/MainSidebar.vue           | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index 941a4db30773f..4d091af727c4c 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -13,7 +13,7 @@
 		:popper-class="`${$style.submenuPopper} ${popperClass}`"
 	>
 			<template slot="title">
-				<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" size="large" />
+				<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
@@ -45,7 +45,7 @@
 			:index="item.id"
 			@click="onItemClick(item)"
 		>
-			<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" size="large" />
+			<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>
@@ -215,7 +215,9 @@ export default Vue.extend({
 }
 
 .icon {
+	min-width: var(--spacing-s);
 	margin-right: var(--spacing-xs);
+	text-align: center;
 }
 
 .label {
diff --git a/packages/design-system/src/types/menu.ts b/packages/design-system/src/types/menu.ts
index a04f38eb17e37..b66b2f8c50483 100644
--- a/packages/design-system/src/types/menu.ts
+++ b/packages/design-system/src/types/menu.ts
@@ -2,6 +2,7 @@ export type IMenuItem = {
 	id: string;
 	label: string;
 	icon?: string;
+	customIconSize?: 'medium' | 'small';
 	available?: boolean;
 	position?: 'top' | 'bottom';
 	type?: 'default' | 'link';
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index c694314f86a43..8d4828c46a0dd 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -201,6 +201,7 @@ export default mixins(
 						id: 'credentials',
 						icon: 'key',
 						label: this.$locale.baseText('mainSidebar.credentials'),
+						customIconSize: 'medium',
 						position: 'top',
 						activateOnRouteNames: [ VIEWS.CREDENTIALS ],
 					},

From b9b75e680e1aa47e70e36f63e5a0ea5fe0baea52 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Mon, 10 Oct 2022 16:35:51 +0200
Subject: [PATCH 38/39] =?UTF-8?q?=F0=9F=91=8C=20Addressing=20code=20review?=
 =?UTF-8?q?=20and=20design=20review=20feedback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/N8nMenu/Menu.vue             |  8 ++++----
 .../src/components/N8nMenuItem/MenuItem.vue     | 17 ++++++++++-------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index 07371aa07d19c..f48801c92a77b 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -8,7 +8,7 @@
 			<slot name="header"></slot>
 		</div>
 		<div :class="$style.menuContent">
-			<div :class="{[$style.upperContent]: true, ['pt-xs']: $slots.menuPrefix === undefined  }">
+			<div :class="{[$style.upperContent]: true, ['pt-xs']: $slots.menuPrefix }">
 				<div v-if="$slots.menuPrefix" :class="$style.menuPrefix">
 					<slot name="menuPrefix"></slot>
 				</div>
@@ -30,7 +30,7 @@
 					/>
 				</el-menu>
 			</div>
-			<div :class="{[$style.lowerContent]: true, ['pb-xs']: $slots.menuSuffix === undefined}">
+			<div :class="{[$style.lowerContent]: true, ['pb-xs']: $slots.menuSuffix }">
 				<el-menu
 					:defaultActive="defaultActive"
 					:collapse="collapsed"
@@ -107,8 +107,8 @@ export default Vue.extend({
 	mounted() {
 		if (this.mode === 'router') {
 			const found = this.items.find(item => {
-				return item.activateOnRouteNames !== undefined && (item.activateOnRouteNames ).includes(this.$route.name || '') ||
-					item.activateOnRoutePaths !== undefined && (item.activateOnRoutePaths).includes(this.$route.path);
+				return Array.isArray(item.activateOnRouteNames) && (item.activateOnRouteNames ).includes(this.$route.name || '') ||
+					Array.isArray(item.activateOnRoutePaths) && (item.activateOnRoutePaths).includes(this.$route.path);
 			});
 			this.activeTab = found ? found.id : '';
 		} else {
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index 4d091af727c4c..48a8a82dc58f7 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -96,21 +96,21 @@ export default Vue.extend({
 	},
 	computed: {
 		availableChildren(): IMenuItem[] {
-			return this.item.children ? this.item.children.filter(child => child.available !== false) : [];
+			return Array.isArray(this.item.children) ? this.item.children.filter(child => child.available !== false) : [];
 		},
 	},
 	methods: {
 		isItemActive(item: IMenuItem): boolean {
 			const isItemActive = this.isActive(item);
-			const childActive = item.children !== undefined && item.children.find(child => this.isActive(child)) !== undefined;
-			return isItemActive || childActive;
+			const hasActiveChild = Array.isArray(item.children) && item.children.some(child => this.isActive(child));
+			return isItemActive || hasActiveChild;
 		},
 		isActive(item: IMenuItem): boolean {
 			if (this.mode === 'router') {
 				if (item.activateOnRoutePaths) {
-					return item.activateOnRoutePaths !== undefined && item.activateOnRoutePaths.includes(this.$route.path);
+					return Array.isArray(item.activateOnRoutePaths) && item.activateOnRoutePaths.includes(this.$route.path);
 				} else if (item.activateOnRouteNames) {
-					return item.activateOnRouteNames !== undefined && item.activateOnRouteNames.includes(this.$route.name || '');
+					return Array.isArray(item.activateOnRouteNames) && item.activateOnRouteNames.includes(this.$route.name || '');
 				}
 				return false;
 			} else {
@@ -160,8 +160,11 @@ export default Vue.extend({
 		padding: var(--spacing-2xs) var(--spacing-xs) !important;
 		user-select: none;
 
-		i:hover {
-			color: var(--color-primary);
+		i {
+			padding-top: 2px;
+			&:hover {
+				color: var(--color-primary);
+			}
 		}
 
 		&:hover {

From bbf563fc9da8f5881d3870980a356f43ee6b715e Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Mon, 10 Oct 2022 17:58:19 +0200
Subject: [PATCH 39/39] =?UTF-8?q?=F0=9F=92=84=20Minor=20updates?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design-system/src/components/N8nMenu/Menu.vue        | 4 ++--
 .../design-system/src/components/N8nMenuItem/MenuItem.vue     | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index f48801c92a77b..814558c9ec02b 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -107,8 +107,8 @@ export default Vue.extend({
 	mounted() {
 		if (this.mode === 'router') {
 			const found = this.items.find(item => {
-				return Array.isArray(item.activateOnRouteNames) && (item.activateOnRouteNames ).includes(this.$route.name || '') ||
-					Array.isArray(item.activateOnRoutePaths) && (item.activateOnRoutePaths).includes(this.$route.path);
+				return Array.isArray(item.activateOnRouteNames) && item.activateOnRouteNames.includes(this.$route.name || '') ||
+					Array.isArray(item.activateOnRoutePaths) && item.activateOnRoutePaths.includes(this.$route.path);
 			});
 			this.activeTab = found ? found.id : '';
 		} else {
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index 48a8a82dc58f7..7affae987f842 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -226,6 +226,7 @@ export default Vue.extend({
 .label {
 	overflow: hidden;
 	text-overflow: ellipsis;
+	user-select: none;
 }
 
 .item + .item {