From c511c68d7508e8f5a3bc6d5261a40b16a6b98e26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Mon, 26 Sep 2022 15:25:19 +0200
Subject: [PATCH] feat(editor): Main navigation redesign (#4144)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(editor): N8N-4540 Main navigation layout rework (#4060)

* ✨ 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

* ✨ Moved 'Workflows'  menu to node view header. Added new dropdown component for user area and the new WF menu

* 💄 Updating disabled states in new WF menu

* 💄 Initial stab at new sidebar styling

* ✨ Finished main navigation restyling

* ✨ Updating `zoomToFit` and centering logic

* ✨ Adding updates menu item to settings sidebar

* 💄 Adding updates item to the settings sidebar and final touches on main sidebar style

* 💄 Removing old code & refactoring

* 💄 Minor CSS tweaks

* 💄 Opening credentials modal on sidebar menu item click. Minor CSS updates

* 💄 Updating sidebar expand/collapse animation

* 💄 Few more refinements of sidebar animation

* 👌 Addressing code review comments

* ✨ Moved ActionDropdown component to design system

* 👌 Fixing bugs reported during code review and testing

* 👌 Addressing design review comments for the new sidebar

* ✔️ Updating `N8nActionDropdown` component tests

* ✨ Remembering scroll position when going back to templates list

* ✨ Updating zoomToFit logic to account for footer content

* 👌 Addressing latest sidebar review comments

* 👌 Addressing main sidebar product review comments

* 💄 Updating css variable names after vite merge

* ✔️ Fixing linting errors in the design system

* ✔️ Fixing `element-ui` type import

* 👌 Addressing the code review comments.

* ✨ Adding link to new credentials view, removed old modal

* 💄 Updating credentials view responsiveness and route highlight handling

* 💄 Adding highlight to workflows submenu when on new workflow page

* 💄 Updated active submenu text color
---
 .../ActionDropdown.stories.ts                 |   72 ++
 .../N8nActionDropdown/ActionDropdown.vue      |  130 ++
 .../__tests__/ActionDropdown.spec.ts          |   52 +
 .../__snapshots__/ActionDropdown.spec.ts.snap |   42 +
 .../src/components/N8nActionDropdown/index.ts |    2 +
 packages/design-system/src/css/reset.scss     |    2 +-
 .../src/plugins/n8nComponents.ts              |    2 +
 packages/editor-ui/public/favicon.ico         |  Bin 5430 -> 15086 bytes
 .../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/CredentialsList.vue        |  167 ---
 .../src/components/GiftNotificationIcon.vue   |    5 +
 packages/editor-ui/src/components/Logo.vue    |    2 +-
 .../src/components/MainHeader/MainHeader.vue  |    9 +-
 .../components/MainHeader/WorkflowDetails.vue |  205 ++-
 .../editor-ui/src/components/MainSidebar.vue  | 1104 ++++++++---------
 packages/editor-ui/src/components/Modals.vue  |    8 -
 .../src/components/NodeCreator/SearchBar.vue  |    1 -
 .../src/components/SettingsSidebar.vue        |   49 +-
 .../editor-ui/src/components/TagsDropdown.vue |   12 -
 .../editor-ui/src/components/TemplateList.vue |   10 +-
 .../editor-ui/src/components/WorkflowOpen.vue |   70 +-
 .../src/components/layouts/PageViewLayout.vue |   15 +-
 .../src/components/mixins/mouseSelect.ts      |   12 +-
 packages/editor-ui/src/constants.ts           |   12 +-
 packages/editor-ui/src/modules/ui.ts          |   13 +-
 packages/editor-ui/src/n8n-theme.scss         |    2 +-
 .../src/plugins/i18n/locales/en.json          |   36 +-
 packages/editor-ui/src/plugins/icons.ts       |    2 +
 packages/editor-ui/src/router.ts              |   16 +-
 packages/editor-ui/src/views/NodeView.vue     |   27 +-
 .../src/views/TemplatesCollectionView.vue     |   11 +-
 .../src/views/TemplatesSearchView.vue         |   32 +-
 .../editor-ui/src/views/TemplatesView.vue     |   23 +-
 .../src/views/TemplatesWorkflowView.vue       |   10 +-
 packages/editor-ui/src/views/canvasHelpers.ts |   40 +-
 37 files changed, 1341 insertions(+), 911 deletions(-)
 create mode 100644 packages/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts
 create mode 100644 packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
 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
 create mode 100644 packages/editor-ui/public/n8n-logo-collapsed.svg
 create mode 100644 packages/editor-ui/public/n8n-logo-expanded.svg
 delete mode 100644 packages/editor-ui/src/components/CredentialsList.vue

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/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
new file mode 100644
index 0000000000000..0ae8705fed129
--- /dev/null
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -0,0 +1,130 @@
+<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]: true,
+						[$style.hasCustomStyling]: item.customClass !== undefined,
+						[item.customClass]: item.customClass !== undefined,
+					}">
+						<span v-if="item.icon" :class="$style.icon">
+							<n8n-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 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: 'n8n-action-dropdown',
+	components: {
+		ElDropdownMenu, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		ElDropdown,		// eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		ElDropdownItem,	// eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		N8nIcon,
+	},
+	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);
+	margin: 0;
+	border-radius: var(--border-radius-base);
+	line-height: normal !important;
+
+	svg {
+		position: static !important;
+	}
+
+	&:hover {
+		background-color: var(--color-background-base);
+		color: initial !important;
+	}
+}
+
+.itemContainer {
+	display: flex;
+}
+
+.icon {
+	text-align: center;
+	margin-right: var(--spacing-2xs);
+
+	svg { width: 1.2em !important; }
+}
+
+:global(li.is-disabled) {
+	.hasCustomStyling {
+		color: inherit !important;
+	}
+}
+
+</style>
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..cfeb3fa9eedaf
--- /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_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_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_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_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>
+</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_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_lf4ng_16\\">
+          <!----><span> Action 1 </span></div>
+      </el-dropdown-item-stub>
+      <el-dropdown-item-stub command=\\"item2\\">
+        <div class=\\"_itemContainer_lf4ng_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/css/reset.scss b/packages/design-system/src/css/reset.scss
index 6688cb9621eef..546de883be185 100644
--- a/packages/design-system/src/css/reset.scss
+++ b/packages/design-system/src/css/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/design-system/src/plugins/n8nComponents.ts b/packages/design-system/src/plugins/n8nComponents.ts
index 15816855de02e..990b7311d95e4 100644
--- a/packages/design-system/src/plugins/n8nComponents.ts
+++ b/packages/design-system/src/plugins/n8nComponents.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import N8nActionBox from '../components/N8nActionBox';
+import N8nActionDropdown from '../components/N8nActionDropdown';
 import N8nActionToggle from '../components/N8nActionToggle';
 import N8nAvatar from '../components/N8nAvatar';
 import N8nBadge from "../components/N8nBadge";
@@ -46,6 +47,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-badge', N8nBadge);
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/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..a03bbf4d37f5c 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, 'root-container']">
 		<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/CredentialsList.vue b/packages/editor-ui/src/components/CredentialsList.vue
deleted file mode 100644
index 4c9a00f57cbd0..0000000000000
--- a/packages/editor-ui/src/components/CredentialsList.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<template>
-	<Modal
-		:name="CREDENTIAL_LIST_MODAL_KEY"
-		width="80%"
-		:title="$locale.baseText('credentialsList.credentials')"
-	>
-		<template v-slot:content>
-			<n8n-heading tag="h3" size="small" color="text-light">{{ $locale.baseText('credentialsList.yourSavedCredentials') + ':' }}</n8n-heading>
-			<div class="new-credentials-button">
-				<n8n-button
-					:title="$locale.baseText('credentialsList.createNewCredential')"
-					icon="plus"
-					:label="$locale.baseText('credentialsList.addNew')"
-					size="large"
-					@click="createCredential()"
-				/>
-			</div>
-
-			<el-table class="ph-no-capture" :data="credentialsToDisplay" v-loading="loading" :default-sort = "{prop: 'name', order: 'ascending'}" stripe max-height="450" @row-click="editCredential">
-				<el-table-column property="name" :label="$locale.baseText('credentialsList.name')" class-name="clickable" sortable></el-table-column>
-				<el-table-column property="type" :label="$locale.baseText('credentialsList.type')" class-name="clickable" sortable></el-table-column>
-				<el-table-column property="createdAt" :label="$locale.baseText('credentialsList.created')" class-name="clickable" sortable></el-table-column>
-				<el-table-column property="updatedAt" :label="$locale.baseText('credentialsList.updated')" class-name="clickable" sortable></el-table-column>
-				<el-table-column
-					:label="$locale.baseText('credentialsList.operations')"
-					width="120">
-					<template slot-scope="scope">
-						<div class="cred-operations">
-							<n8n-icon-button :title="$locale.baseText('credentialsList.editCredential')" @click.stop="editCredential(scope.row)" size="small" icon="pen" />
-							<n8n-icon-button :title="$locale.baseText('credentialsList.deleteCredential')" @click.stop="deleteCredential(scope.row)" size="small" icon="trash" />
-						</div>
-					</template>
-				</el-table-column>
-			</el-table>
-		</template>
-	</Modal>
-</template>
-
-<script lang="ts">
-import { externalHooks } from '@/components/mixins/externalHooks';
-import { ICredentialsResponse } from '@/Interface';
-import { nodeHelpers } from '@/components/mixins/nodeHelpers';
-import { showMessage } from '@/components/mixins/showMessage';
-import { genericHelpers } from '@/components/mixins/genericHelpers';
-
-import { mapGetters } from "vuex";
-
-import mixins from 'vue-typed-mixins';
-import { convertToDisplayDate } from './helpers';
-import { CREDENTIAL_SELECT_MODAL_KEY, CREDENTIAL_LIST_MODAL_KEY } from '@/constants';
-
-import Modal from './Modal.vue';
-
-export default mixins(
-	externalHooks,
-	genericHelpers,
-	nodeHelpers,
-	showMessage,
-).extend({
-	name: 'CredentialsList',
-	components: {
-		Modal,
-	},
-	data() {
-		return {
-			CREDENTIAL_LIST_MODAL_KEY,
-			loading: true,
-		};
-	},
-	computed: {
-		...mapGetters('credentials', ['allCredentials']),
-		credentialsToDisplay(): ICredentialsResponse[] {
-			return this.allCredentials.reduce((accu: ICredentialsResponse[], cred: ICredentialsResponse) => {
-				const type = this.$store.getters['credentials/getCredentialTypeByName'](cred.type);
-
-				if (type) {
-					accu.push({
-						...cred,
-						type: type.displayName,
-						createdAt: convertToDisplayDate(cred.createdAt as number),
-						updatedAt: convertToDisplayDate(cred.updatedAt as number),
-					});
-				}
-
-				return accu;
-			}, []);
-		},
-	},
-	async mounted() {
-		try {
-			await Promise.all([
-				await this.$store.dispatch('credentials/fetchCredentialTypes'),
-				await this.$store.dispatch('credentials/fetchAllCredentials'),
-			]);
-		}	catch (e) {
-			this.$showError(e, this.$locale.baseText('credentialsList.errorLoadingCredentials'));
-		}
-		this.loading = false;
-		this.$telemetry.track('User opened Credentials panel', { workflow_id: this.$store.getters.workflowId });
-	},
-	destroyed() {
-		this.$externalHooks().run('credentialsList.destroyed');
-	},
-	methods: {
-		createCredential () {
-			this.$store.dispatch('ui/openModal', CREDENTIAL_SELECT_MODAL_KEY);
-		},
-
-		editCredential (credential: ICredentialsResponse) {
-			this.$store.dispatch('ui/openExistingCredential', { id: credential.id});
-			this.$telemetry.track('User opened Credential modal', { credential_type: credential.type, source: 'primary_menu', new_credential: false, workflow_id: this.$store.getters.workflowId });
-		},
-
-		async deleteCredential (credential: ICredentialsResponse) {
-			const deleteConfirmed = await this.confirmMessage(
-				this.$locale.baseText(
-					'credentialsList.confirmMessage.message',
-					{ interpolate: { credentialName: credential.name }},
-				),
-				this.$locale.baseText('credentialsList.confirmMessage.headline'),
-				null,
-				this.$locale.baseText('credentialsList.confirmMessage.confirmButtonText'),
-				this.$locale.baseText('credentialsList.confirmMessage.cancelButtonText'),
-			);
-
-			if (deleteConfirmed === false) {
-				return;
-			}
-
-			try {
-				await this.$store.dispatch('credentials/deleteCredential', {id: credential.id});
-			} catch (error) {
-				this.$showError(
-					error,
-					this.$locale.baseText('credentialsList.showError.deleteCredential.title'),
-				);
-
-				return;
-			}
-
-			// Now that the credentials got removed check if any nodes used them
-			this.updateNodesCredentialsIssues();
-
-			this.$showMessage({
-				title: this.$locale.baseText('credentialsList.showMessage.title'),
-				type: 'success',
-			});
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-
-.new-credentials-button {
-	float: right;
-	position: relative;
-	margin-bottom: var(--spacing-2xs);
-}
-
-.cred-operations {
-	> * {
-		margin-left: 10px;
-	}
-}
-
-</style>
diff --git a/packages/editor-ui/src/components/GiftNotificationIcon.vue b/packages/editor-ui/src/components/GiftNotificationIcon.vue
index b09529e5f8498..912b89e45d03d 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,6 +34,7 @@
       width: .36em;
       background-color: $gift-notification-inner-color;
       border-radius: 50%;
+
     }
   }
 }
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/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
index d20c5914ef93e..d82828f01af9b 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;
-	}
+	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
 }
 
 .top-menu {
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index 502eebf5d08f4..eb1fb0af69a26 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()">
+					<n8n-action-dropdown :items="workflowMenuItems" @select="onWorkflowMenuSelect" />
+				</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,11 @@ 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 { IWorkflowDataUpdate, IWorkflowToShare } from "@/Interface";
+
+import { saveAs } from 'file-saver';
+import { titleChange } from "../mixins/titleChange";
+import type { MessageBoxInputData } from 'element-ui/types/message-box';
 
 const hasChanged = (prev: string[], curr: string[]) => {
 	if (prev.length !== curr.length) {
@@ -100,7 +114,7 @@ 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: {
 		TagsContainer,
@@ -139,6 +153,51 @@ 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;
+		},
+		onWorkflowPage(): boolean {
+			return this.$route.meta && this.$route.meta.nodeView;
+		},
+		workflowMenuItems(): Array<{}> {
+			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: this.$style.deleteItem,
+					divided: true,
+				},
+			];
+		},
 	},
 	methods: {
 		async onSaveButtonClick () {
@@ -220,6 +279,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() {
@@ -235,6 +420,8 @@ $--text-line-height: 24px;
 $--header-spacing: 20px;
 
 .container {
+	position: relative;
+	top: -1px;
 	width: 100%;
 	display: flex;
 	align-items: center;
@@ -291,3 +478,17 @@ $--header-spacing: 20px;
 	align-items: center;
 }
 </style>
+
+<style module lang="scss">
+.workflowMenuContainer {
+	margin-left: var(--spacing-2xs);
+}
+
+.hiddenInput {
+	display: none;
+}
+
+.deleteItem {
+	color: var(--color-danger);
+}
+</style>
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 0e0539c107853..7c7bcb18de10a 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -1,176 +1,141 @@
 <template>
-	<div id="side-menu">
-		<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>
-			<n8n-menu default-active="workflow" @select="handleSelect" :collapse="isCollapsed">
-
-				<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>
+	<div id="side-menu" :class="{
+		['side-menu']: true,
+		[$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>
 
-				<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" :class="$style.templatesSubmenu">
 							<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>
-
-				<n8n-menu-item index="credentials">
-					<font-awesome-icon icon="key"/>&nbsp;
-					<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;
-					<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>
+							<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"/>
+						<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 class="ph-no-capture">
-							<n8n-menu-item class="user">
-								<div class="avatar">
-									<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
+						<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' : ''}}
 								</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>
-						<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>
 
 </template>
 
 <script lang="ts">
-
-import type { MessageBoxInputData } from 'element-ui/types/message-box';
-
 import {
 	IExecutionResponse,
-	IWorkflowDataUpdate,
 	IMenuItem,
-	IWorkflowToShare,
 } from '../Interface';
 
 import ExecutionsList from '@/components/ExecutionsList.vue';
@@ -184,27 +149,21 @@ 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';
 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,
+	ABOUT_MODAL_KEY,
 	VERSIONS_MODAL_KEY,
-	WORKFLOW_SETTINGS_MODAL_KEY,
-	WORKFLOW_OPEN_MODAL_KEY,
 	EXECUTIONS_MODAL_KEY,
 	VIEWS,
+	WORKFLOW_OPEN_MODAL_KEY,
 } from '@/constants';
 import { userHelpers } from './mixins/userHelpers';
+import { debounceHelper } from './mixins/debounce';
 
 export default mixins(
 	genericHelpers,
@@ -214,6 +173,7 @@ export default mixins(
 	workflowHelpers,
 	workflowRun,
 	userHelpers,
+	debounceHelper,
 )
 	.extend({
 		name: 'MainSidebar',
@@ -227,12 +187,22 @@ export default mixins(
 			return {
 				// @ts-ignore
 				basePath: this.$store.getters.getBaseUrl,
-				stopExecutionInProgress: false,
+				userMenuItems: [
+					{
+						id: 'settings',
+						label: this.$locale.baseText('settings'),
+					},
+					{
+						id: 'logout',
+						label: this.$locale.baseText('auth.signout'),
+					},
+				],
 			};
 		},
 		computed: {
 			...mapGetters('ui', {
 				isCollapsed: 'sidebarMenuCollapsed',
+				isNodeView: 'isNodeView',
 			}),
 			...mapGetters('versions', [
 				'hasVersionUpdates',
@@ -244,11 +214,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 [
 					{
@@ -293,69 +267,45 @@ 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) {
+				this.$externalHooks().run('mainSidebar.mounted', { userRef: this.$refs.user });
+			}
+			if (window.innerWidth > 900 && !this.isNodeView) {
+				this.$store.commit('ui/expandSidebarMenu');
+			}
+			this.checkWidthAndAdjustSidebar(window.innerWidth);
+		},
+		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() {
@@ -371,245 +321,98 @@ 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 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;
+			async handleSelect (key: string) {
+				switch (key) {
+					case '/workflow': {
+						await this.createNewWorkflow();
+						break;
 					}
-
-					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]!);
+					case 'workflow-open': {
+						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;
+					}
+					case '/credentials': {
+						this.$router.push({name: VIEWS.CREDENTIALS});
+						break;
+					}
+					case 'executions': {
+						this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
+						break;
+					}
+					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;
 				}
 			},
-			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'),
+			async createNewWorkflow (): Promise<void> {
+				const result = this.$store.getters.getStateIsDirty;
+				if(result) {
+					const confirmModal = await this.confirmModal(
+						this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
+						this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
 						'warning',
-						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.confirmButtonText'),
-						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.cancelButtonText'),
+						this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
+						this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
+						true,
 					);
-
-					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);
-				} 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;
+					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 });
 						}
-					} else {
-						if (this.$router.currentRoute.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.handleSelect3.title'),
+							title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
 							type: 'success',
 						});
+					} else if (confirmModal === MODAL_CLOSE) {
+						return;
 					}
-					this.$titleReset();
-				} else if (key === 'templates' || key === 'template-new') {
-					if (this.$router.currentRoute.name !== VIEWS.TEMPLATES) {
-						this.$router.push({ name: VIEWS.TEMPLATES });
-					}
-				} else if (key === 'credentials') {
-					if (this.$router.currentRoute.name !== VIEWS.CREDENTIALS) {
-						this.$router.push({ name: VIEWS.CREDENTIALS });
-					}
-				} 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') {
-					const defaultRoute = this.findFirstAccessibleSettingsRoute();
-					if (defaultRoute) {
-						const routeProps = this.$router.resolve({ name: defaultRoute });
-						this.$router.push(routeProps.route.path);
+				} 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();
 			},
-			findFirstAccessibleSettingsRoute() {
+			findFirstAccessibleSettingsRoute () {
 				// Get all settings rotes by filtering them by pageCategory property
 				const settingsRoutes = this.$router.getRoutes().filter(
 					category => category.meta.telemetry &&
@@ -625,18 +428,97 @@ 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">
+#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 {
-		font-size: 0.9em;
-		height: 35px;
-		line-height: 35px;
-		color: $custom-dialog-text-color;
-		--menu-item-hover-fill: var(--color-background-base);
+		--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;
@@ -644,230 +526,286 @@ export default mixins(
 		}
 
 		.svg-inline--fa {
+			color: var(--color-text-light);
 			position: relative;
 			right: -3px;
 		}
+
+		&:hover {
+			.svg-inline--fa {
+				color: var(--color-text-dark);
+			}
+		}
 	}
 }
+</style>
 
-#side-menu {
-	// Menu
-	.el-menu--vertical,
-	.el-menu {
-		border: none;
-		font-size: 14px;
-		--menu-item-hover-fill: var(--color-background-base);
+<style lang="scss" module>
 
-		.el-menu--collapse {
-			width: 75px;
-		}
+.sideMenu {
+	height: 100%;
 
-		.el-menu--popup,
-		.el-menu--inline {
-			font-size: 0.9em;
-			li.el-menu-item {
-				height: 35px;
-				line-height: 35px;
-				color: $custom-dialog-text-color;
-			}
+	&.sideMenuCollapsed {
+		.fullName,
+		:global(.item-title-root),
+		:global(.el-menu--collapse) :global(.el-submenu__icon-arrow),
+		:global(.el-icon-arrow-down) {
+			display: none;
 		}
 
-		.el-menu-item,
-		.el-submenu__title {
-			color: $color-primary;
-			font-size: 1.2em;
-			.el-submenu__icon-arrow {
-				color: $color-primary;
-				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;
-			}
+		.active {
+			background-color: var(--color-foreground-base);
+			border-radius: var(--border-radius-base);
+
+			svg { color: var(--color-text-dark) !important; }
 		}
 
-		.el-menu--inline {
-			.el-menu-item {
-				padding-left: 30px!important;
-			}
+		.userSubmenu::before {
+			width: 160%;
 		}
+	}
 
+	svg:global(.svg-inline--fa) {
+		position: relative;
+		left: 3px;
 	}
 
-	.el-menu-item {
-		a {
-			color: var(--color-text-base);
+	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; }
 
-			&.primary-item {
-				color: $color-primary;
-				vertical-align: baseline;
-			}
-		}
+	.helpMenu{
+		svg:global(.svg-inline--fa) { left: 6px !important; }
+		:global(.el-menu--inline) { margin-bottom: 8px; }
+	}
+}
 
-		&.logo-item {
-			background-color: $color-primary !important;
-			height: $header-height;
-			line-height: $header-height;
-			* {
-				vertical-align: middle;
-			}
+.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;
 
-			.icon {
-				position: relative;
-				height: 23px;
-				left: -10px;
-				top: -2px;
-			}
+		.icon {
+			position: relative;
+			left: 16px;
 		}
 	}
-}
 
-.about-icon {
-	margin-left: 5px;
+	ul { height: 100%; }
 }
 
-#collapse-change-button {
+.sideMenuCollapseButton {
 	position: absolute;
-	z-index: 10;
-	top: 55px;
-	left: 25px;
-	text-align: right;
-	line-height: 24px;
-	height: 20px;
-	width: 20px;
+	right: -10px;
+	top: 50%;
+	z-index: 999;
+	display: flex;
+	justify-content: center;
+	align-items: flex-end;
+	color: var(--color-text-base);
 	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;
+	width: 20px;
+	height: 20px;
+	border: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+	text-align: center;
+	border-radius: 50%;
 
-	-webkit-transition-property: -webkit-transform;
-	-moz-transition-property: -moz-transform;
-	-o-transition-property: -o-transform;
-	transition-property: transform;
+	&::before {
+		display: block;
+		position: relative;
+		left: px;
+		top: -2.5px;
+		transform: rotate(270deg);
+		content: "\e6df";
+		font-family: element-icons;
+		font-size: var(--font-size-2xs);
+		font-weight: bold;
+		color: var(--color-text-base);
+	}
 
-	overflow: hidden;
+	&.expandedButton {
+		&::before {
+			transform: rotate(90deg);
+			left: 0px;
+		}
+	}
 
-	.icon {
-		position: relative;
-		left: -5px;
-		top: -2px;
+	&:hover {
+		&::before {
+			color: var(--color-primary-shade-1);
+		}
 	}
 }
-#collapse-change-button:hover {
-	transform: scale(1.1);
-}
 
-.logo-text {
-	position: relative;
-	top: -3px;
-	left: 5px;
-	font-weight: bold;
-	color: var(--color-foreground-xlight);
-	text-decoration: none;
+.sideMenuFlexContainer {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	height: calc(100% - $header-height);
+	padding: var(--spacing-5xs) 0;
 }
 
-.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);
+.sideMenuUpper, .sideMenuLower {
+	padding: 0 var(--spacing-xs);
 }
 
-#side-menu {
-	position: fixed;
-	height: 100%;
 
-	.el-menu {
-		height: 100%;
+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;
+			}
+		}
 	}
 }
 
-.side-menu-wrapper {
-	height: 100%;
-	width: $sidebar-width;
-
-	&.expanded {
-		width: $sidebar-expanded-width;
+.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;
 	}
 
-	ul {
-		display: flex;
-		flex-direction: column;
+	* { vertical-align: middle; }
+	.icon {
+		height: 18px;
+		position: relative;
+		left: 6px;
 	}
+
 }
 
-.footer-menu-items {
+.footerMenuItems {
 	display: flex;
 	flex-grow: 1;
 	flex-direction: column;
 	justify-content: flex-end;
-	padding-bottom: 32px;
+	padding-bottom: var(-spacing-m);
 
-	&.logged-in {
-		padding-bottom: 8px;
+	&.loggedIn {
+		padding-bottom: var(--spacing-xs);
 	}
 }
 
-.el-menu-item.updates {
-	color: $sidebar-inactive-color !important;
-	.item-title-root {
-		font-size: 13px;
-		top: 0 !important;
-	}
+.aboutIcon {
+	margin-left: 5px;
+}
 
-	&:hover {
-		color: $sidebar-active-color;
+.updatesSubmenu {
+	margin-top: 0 !important;
+
+	.updatesLabel {
+		font-size: var(--font-size-xs);
 	}
 
-	.gift-container {
+	.giftContainer {
 		display: flex;
 		justify-content: flex-start;
 		align-items: center;
 		height: 100%;
 		width: 100%;
+
+		div > div { right: -.5em; }
 	}
 }
 
-.el-menu-item.user {
+.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;
+		}
 
-	&:hover {
-		background-color: unset;
 	}
 
 	.avatar {
-		top: 25%;
-		left: 18px;
-		position: absolute;
+		position: relative;
+		left: -2px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		padding-top: 16px;
+		cursor: default;
 	}
 
-	.item-title-root {
-		color: var(--color-text-base);
+	.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-s);
-		max-width: 130px;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		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; }
+}
 </style>
diff --git a/packages/editor-ui/src/components/Modals.vue b/packages/editor-ui/src/components/Modals.vue
index 733fd03986a42..feefb8f80f506 100644
--- a/packages/editor-ui/src/components/Modals.vue
+++ b/packages/editor-ui/src/components/Modals.vue
@@ -25,10 +25,6 @@
 			<CredentialsSelectModal />
 		</ModalRoot>
 
-		<ModalRoot :name="CREDENTIAL_LIST_MODAL_KEY">
-			<CredentialsList />
-		</ModalRoot>
-
 		<ModalRoot :name="DUPLICATE_MODAL_KEY">
 			<template v-slot:default="{ modalName, active }">
 				<DuplicateWorkflowDialog
@@ -119,7 +115,6 @@ import {
 	COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
 	CONTACT_PROMPT_MODAL_KEY,
 	CREDENTIAL_EDIT_MODAL_KEY,
-	CREDENTIAL_LIST_MODAL_KEY,
 	CREDENTIAL_SELECT_MODAL_KEY,
 	DELETE_USER_MODAL_KEY,
 	DUPLICATE_MODAL_KEY,
@@ -141,7 +136,6 @@ import CommunityPackageInstallModal from './CommunityPackageInstallModal.vue';
 import ChangePasswordModal from "./ChangePasswordModal.vue";
 import ContactPromptModal from './ContactPromptModal.vue';
 import CredentialEdit from "./CredentialEdit/CredentialEdit.vue";
-import CredentialsList from "./CredentialsList.vue";
 import InviteUsersModal from "./InviteUsersModal.vue";
 import CredentialsSelectModal from "./CredentialsSelectModal.vue";
 import DuplicateWorkflowDialog from "./DuplicateWorkflowDialog.vue";
@@ -167,7 +161,6 @@ export default Vue.extend({
 		ContactPromptModal,
 		ChangePasswordModal,
 		CredentialEdit,
-		CredentialsList,
 		CredentialsSelectModal,
 		DeleteUserModal,
 		DuplicateWorkflowDialog,
@@ -187,7 +180,6 @@ export default Vue.extend({
 		COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
 		CONTACT_PROMPT_MODAL_KEY,
 		CREDENTIAL_EDIT_MODAL_KEY,
-		CREDENTIAL_LIST_MODAL_KEY,
 		CREDENTIAL_SELECT_MODAL_KEY,
 		ABOUT_MODAL_KEY,
 		CHANGE_PASSWORD_MODAL_KEY,
diff --git a/packages/editor-ui/src/components/NodeCreator/SearchBar.vue b/packages/editor-ui/src/components/NodeCreator/SearchBar.vue
index 003da7a123864..d35e55ee2eeeb 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 c90984969d8ee..ac14f52c04f17 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -5,7 +5,7 @@
 				<i :class="$style.icon">
 					<font-awesome-icon icon="arrow-left" />
 				</i>
-				<n8n-heading slot="title" size="large" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
+				<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">
@@ -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>
@@ -54,14 +54,18 @@
 <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']),
 		settingsFakeDoorFeatures(): IFakeDoor[] {
@@ -87,27 +91,51 @@ export default mixins(
 		onReturn() {
 			this.$router.push({name: VIEWS.HOMEPAGE});
 		},
+		openUpdatesPanel() {
+			this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
+		},
 	},
 });
 </script>
 
 <style lang="scss" module>
+:global(.el-menu) {
+	--menu-item-height: 35px;
+	--submenu-item-height: 27px;
+}
+
 .container {
 	min-width: 200px;
 	height: 100%;
 	background-color: var(--color-background-xlight);
 	border-right: var(--border-base);
 	position: relative;
-	padding: var(--spacing-s);
+	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-xl);
+	margin-bottom: var(--spacing-l);
 	padding: 0 var(--spacing-xs);
 	height: 38px;
 	display: flex;
@@ -125,6 +153,9 @@ export default mixins(
 	}
 }
 
+.usersMenu svg { left: -2px; }
+.apiMenu svg { left: 2px; }
+
 .icon {
 	width: 16px;
 	display: inline-flex;
@@ -133,7 +164,11 @@ export default mixins(
 
 .versionContainer {
 	position: absolute;
-	left: 20px;
+	left: 23px;
 	bottom: 20px;
 }
+
+@media screen and (max-height: 420px) {
+	.updatesSubmenu, .versionContainer { display: none; }
+}
 </style>
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index 7d6d5e86f9811..9a2004f1ec546 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/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/WorkflowOpen.vue b/packages/editor-ui/src/components/WorkflowOpen.vue
index 0b80bf8665490..37f56757e5e2c 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: {
@@ -166,10 +178,10 @@ export default mixins(
 				const result = this.$store.getters.getStateIsDirty;
 				if(result) {
 					const confirmModal = await this.confirmModal(
-						this.$locale.baseText('workflowOpen.confirmMessage.message'),
-						this.$locale.baseText('workflowOpen.confirmMessage.headline'),
+						this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
+						this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
 						'warning',
-						this.$locale.baseText('workflowOpen.confirmMessage.confirmButtonText'),
+						this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
 						this.$locale.baseText('workflowOpen.confirmMessage.cancelButtonText'),
 						true,
 					);
@@ -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('generic.unsavedWork.confirmMessage.message'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
+					'warning',
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.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/components/layouts/PageViewLayout.vue b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
index 837353430114a..c4a13755eeac4 100644
--- a/packages/editor-ui/src/components/layouts/PageViewLayout.vue
+++ b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
@@ -33,7 +33,6 @@ export default Vue.extend({
 .wrapper {
 	display: flex;
 	height: 100%;
-	margin-left: 65px;
 	justify-content: center;
 	box-sizing: border-box;
 	background: var(--color-gray-light);
@@ -43,10 +42,6 @@ export default Vue.extend({
 	}
 }
 
-.expandedSidebar {
-	margin-left: 200px;
-}
-
 .container {
 	max-width: 1280px;
 	display: flex;
@@ -76,4 +71,14 @@ export default Vue.extend({
 	flex: 1 1 100%;
 	height: 100%;
 }
+
+@media (max-width: 500px) {
+	.container {
+		flex-direction: column;
+	}
+	.aside {
+		height: auto;
+		margin: 0;
+	}
+}
 </style>
diff --git a/packages/editor-ui/src/components/mixins/mouseSelect.ts b/packages/editor-ui/src/components/mixins/mouseSelect.ts
index dbe6890a48446..dcee43e1179fc 100644
--- a/packages/editor-ui/src/components/mixins/mouseSelect.ts
+++ b/packages/editor-ui/src/components/mixins/mouseSelect.ts
@@ -3,7 +3,8 @@ 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';
+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,8 +49,10 @@ export const mouseSelect = mixins(
 		},
 		getMousePositionWithinNodeView (event: MouseEvent | TouchEvent): XYPosition {
 			const [x, y] = getMousePosition(event);
+			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, y, 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/constants.ts b/packages/editor-ui/src/constants.ts
index e36e02fe28661..a6ea3f21c11b5 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -33,7 +33,6 @@ export const TAGS_MANAGER_MODAL_KEY = 'tagsManager';
 export const WORKFLOW_OPEN_MODAL_KEY = 'workflowOpen';
 export const VERSIONS_MODAL_KEY = 'versions';
 export const WORKFLOW_SETTINGS_MODAL_KEY = 'settings';
-export const CREDENTIAL_LIST_MODAL_KEY = 'credentialsList';
 export const PERSONALIZATION_MODAL_KEY = 'personalization';
 export const CONTACT_PROMPT_MODAL_KEY = 'contactPrompt';
 export const VALUE_SURVEY_MODAL_KEY = 'valueSurvey';
@@ -285,6 +284,7 @@ export enum VIEWS {
 	NOT_FOUND = "NotFoundView",
 	FAKE_DOOR = "ComingSoon",
 	COMMUNITY_NODES = "CommunityNodes",
+	WORKFLOWS = "WorkflowsView",
 }
 
 export enum FAKE_DOOR_FEATURES {
@@ -311,10 +311,18 @@ 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',
+}
+
 /**
  * Enterprise edition
  */
-
 export enum EnterpriseEditionFeature {
 	Sharing = 'sharing',
 }
diff --git a/packages/editor-ui/src/modules/ui.ts b/packages/editor-ui/src/modules/ui.ts
index 7e333f21f376d..166d1d737743e 100644
--- a/packages/editor-ui/src/modules/ui.ts
+++ b/packages/editor-ui/src/modules/ui.ts
@@ -7,7 +7,6 @@ import {
 	CREDENTIAL_SELECT_MODAL_KEY,
 	CHANGE_PASSWORD_MODAL_KEY,
 	CONTACT_PROMPT_MODAL_KEY,
-	CREDENTIAL_LIST_MODAL_KEY,
 	DELETE_USER_MODAL_KEY,
 	DUPLICATE_MODAL_KEY,
 	EXECUTIONS_MODAL_KEY,
@@ -23,7 +22,6 @@ import {
 	ONBOARDING_CALL_SIGNUP_MODAL_KEY,
 	FAKE_DOOR_FEATURES,
 	COMMUNITY_PACKAGE_MANAGE_ACTIONS,
-	MAIN_NODE_PANEL_WIDTH,
 } from '@/constants';
 import Vue from 'vue';
 import { ActionContext, Module } from 'vuex';
@@ -54,9 +52,6 @@ const module: Module<IUiState, IRootState> = {
 				mode: '',
 				activeId: null,
 			},
-			[CREDENTIAL_LIST_MODAL_KEY]: {
-				open: false,
-			},
 			[CREDENTIAL_SELECT_MODAL_KEY]: {
 				open: false,
 			},
@@ -214,6 +209,8 @@ const module: Module<IUiState, IRootState> = {
 		},
 		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: {
 		setMainPanelDimensions: (state: IUiState, params: { panelType:string, dimensions: { relativeLeft?: number, relativeRight?: number, relativeWidth?: number }}) => {
@@ -255,6 +252,12 @@ const module: Module<IUiState, IRootState> = {
 		toggleSidebarMenuCollapse: (state: IUiState) => {
 			state.sidebarMenuCollapsed = !state.sidebarMenuCollapsed;
 		},
+		collapseSidebarMenu: (state: IUiState) => {
+			state.sidebarMenuCollapsed = true;
+		},
+		expandSidebarMenu: (state: IUiState) => {
+			state.sidebarMenuCollapsed = false;
+		},
 		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 4b191e4e1a12d..1cf97aa44a552 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -1,5 +1,5 @@
 .clickable {
-	cursor: pointer;
+	cursor: pointer !important;
 }
 .primary-color {
 	color: $color-primary;
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index f096dce93141b..868898b45aba7 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -20,6 +20,11 @@
 	"generic.beta": "beta",
 	"generic.yes": "Yes",
 	"generic.no": "No",
+	"generic.settings": "Settings",
+	"generic.unsavedWork.confirmMessage.headline": "Save changes before leaving?",
+	"generic.unsavedWork.confirmMessage.message": "If you don't save, you will lose your changes.",
+	"generic.unsavedWork.confirmMessage.confirmButtonText": "Save",
+	"generic.unsavedWork.confirmMessage.cancelButtonText": "Leave without saving",
 	"about.aboutN8n": "About n8n",
 	"about.close": "Close",
 	"about.license": "License",
@@ -344,22 +349,13 @@
 	"mainSidebar.confirmMessage.workflowDelete.confirmButtonText": "Yes, delete",
 	"mainSidebar.confirmMessage.workflowDelete.headline": "Delete Workflow?",
 	"mainSidebar.confirmMessage.workflowDelete.message": "Are you sure that you want to delete '{workflowName}'?",
-	"mainSidebar.confirmMessage.workflowNew.cancelButtonText": "Leave without saving",
-	"mainSidebar.confirmMessage.workflowNew.confirmButtonText": "Save",
-	"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",
@@ -369,7 +365,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",
@@ -379,6 +374,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",
@@ -560,14 +560,6 @@
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
 	"nodeView.addNode": "Add node",
 	"nodeView.addSticky": "Click to add sticky note",
-	"nodeView.confirmMessage.beforeRouteLeave.cancelButtonText": "Leave without saving",
-	"nodeView.confirmMessage.beforeRouteLeave.confirmButtonText": "Save",
-	"nodeView.confirmMessage.beforeRouteLeave.headline": "Save changes before leaving?",
-	"nodeView.confirmMessage.beforeRouteLeave.message": "If you don't save, you will lose your changes.",
-	"nodeView.confirmMessage.initView.cancelButtonText": "Leave without saving",
-	"nodeView.confirmMessage.initView.confirmButtonText": "Save",
-	"nodeView.confirmMessage.initView.headline": "Save changes before leaving?",
-	"nodeView.confirmMessage.initView.message": "If you don't save, you will lose your changes.",
 	"nodeView.confirmMessage.receivedCopyPasteData.cancelButtonText": "",
 	"nodeView.confirmMessage.receivedCopyPasteData.confirmButtonText": "Yes, import",
 	"nodeView.confirmMessage.receivedCopyPasteData.headline": "Import Workflow?",
@@ -1058,10 +1050,6 @@
 	"workflowDetails.showMessage.title": "Name missing",
 	"workflowHelpers.showMessage.title": "Problem saving workflow",
 	"workflowOpen.active": "Active",
-	"workflowOpen.confirmMessage.cancelButtonText": "Leave without saving",
-	"workflowOpen.confirmMessage.confirmButtonText": "Save",
-	"workflowOpen.confirmMessage.headline": "Save changes before leaving?",
-	"workflowOpen.confirmMessage.message": "If you don't save, you will lose your changes.",
 	"workflowOpen.couldNotLoadActiveWorkflows": "Could not load active workflows",
 	"workflowOpen.created": "Created",
 	"workflowOpen.filterWorkflows": "Filter by tags",
@@ -1072,6 +1060,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",
@@ -1113,7 +1103,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 7e9487dd4db68..a6a2cb1b984ae 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,
@@ -120,6 +121,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/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/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 67c35c99bddb8..34d85399ba41d 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -307,11 +307,11 @@ export default mixins(
 			const result = this.$store.getters.getStateIsDirty;
 			if(result) {
 				const confirmModal = await this.confirmModal(
-					this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.message'),
-					this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.headline'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
 					'warning',
-					this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.confirmButtonText'),
-					this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.cancelButtonText'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
 					true,
 				);
 
@@ -1470,9 +1470,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;
@@ -3210,7 +3214,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;
@@ -3288,19 +3292,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 {
@@ -3308,6 +3307,7 @@ export default mixins(
 	width: 100%;
 	height: 100%;
 	transform-origin: 0 0;
+	z-index: -1;
 }
 
 .node-view-background {
@@ -3315,6 +3315,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 92803351d865d..35dd36cc65508 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 1340f4f447b64..051fc3adc3348 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@@ -320,23 +320,34 @@ export default mixins(genericHelpers, debounceHelper).extend({
 				this.updateSearchTracking(search, categories);
 			}
 		},
-		scrollToTop() {
+		scrollTo(position: number, behavior: ScrollBehavior = 'smooth') {
 			setTimeout(() => {
-				window.scrollTo({
-					top: 0,
-					behavior: 'smooth',
-				});
-			}, 100);
+				const contentArea = document.getElementById('content');
+				if (contentArea) {
+					contentArea.scrollTo({
+						top: position,
+						behavior,
+					});
+				}
+			}, 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();
 	},
@@ -345,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 edfc52842e73a..9d159f6e98aba 100644
--- a/packages/editor-ui/src/views/TemplatesView.vue
+++ b/packages/editor-ui/src/views/TemplatesView.vue
@@ -1,6 +1,5 @@
 <template>
 	<div :class="$style.template">
-		<div :class="isMenuCollapsed ? $style.menu : $style.expandedMenu"></div>
 		<div :class="$style.container">
 			<div :class="$style.header">
 				<div :class="$style.goBack" v-if="goBackEnabled">
@@ -30,38 +29,18 @@ export default Vue.extend({
 			default: false,
 		},
 	},
-	computed: {
-		isMenuCollapsed(): boolean {
-			return this.$store.getters['ui/sidebarMenuCollapsed'];
-		},
-	},
 });
 </script>
 
 <style lang="scss" module>
-.mockMenu {
-	height: 100%;
-	min-height: 100vh;
-}
-
-.menu {
-	composes: mockMenu;
-	min-width: $sidebar-width;
-}
-
-.expandedMenu {
-	composes: mockMenu;
-	min-width: $sidebar-expanded-width;
-}
-
 .template {
 	display: flex;
+	padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-4xl) var(--spacing-xl);
 }
 
 .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 d8cb2869a28af..2ae3bd4dbcbc3 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..17c69d514de19 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;
@@ -476,7 +477,8 @@ 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);
+	const { editorWidth, editorHeight } = getContentDimensions();
+	return getRelativePosition((editorWidth - SIDEBAR_WIDTH) / 2, (editorHeight - HEADER_HEIGHT) / 2, scale, offset);
 };
 
 export const getBackgroundStyles = (scale: number, offsetPosition: XYPosition) => {
@@ -612,24 +614,40 @@ export const addConnectionOutputSuccess = (connection: Connection, output: {tota
 };
 
 
+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? SIDEBAR_WIDTH: 0;
-	const headerHeight = addComponentPadding? HEADER_HEIGHT: 0;
-	const footerHeight = addComponentPadding? 200: 100;
+	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 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 + 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 + headerHeight; // find top right corner
@@ -637,7 +655,7 @@ export const getZoomToFit = (nodes: INodeUi[], addComponentPadding = true): {off
 
 	return {
 		zoomLevel,
-		offset: [xOffset, yOffset],
+		offset: [xOffset, yOffset - headerHeight],
 	};
 };