From d03f439b21713b3512773d3b2fee6ddb574e15da Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Tue, 6 Sep 2022 15:56:41 +0200
Subject: [PATCH 01/19] =?UTF-8?q?=E2=9C=A8=20Implemented=20new=20editor=20?=
 =?UTF-8?q?layout=20using=20css=20grid?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/App.vue                | 47 +++++++++++++------
 .../src/components/MainHeader/MainHeader.vue  |  7 ---
 .../editor-ui/src/components/MainSidebar.vue  | 29 +-----------
 packages/editor-ui/src/views/NodeView.vue     | 11 ++---
 4 files changed, 38 insertions(+), 56 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 7faa2132d766c..86f5eeaf3c361 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">
 		<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['sidebar-collapsed']]: 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 />
@@ -45,6 +52,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;
 		},
@@ -178,26 +186,37 @@ 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-template-columns: 200px 1fr;
+  grid-template-rows: 65px 1fr; // TODO: Use variables for width
+
+	&.sidebar-collapsed {
+		grid-template-columns: 65px 1fr;
+	}
 }
 
 .content {
-	composes: container;
-	background-color: var(--color-background-light);
-	position: relative;
+	grid-area: content;
 }
 
 .header {
-	z-index: 10;
-	position: fixed;
-	width: 100%;
+	grid-area: header;
+	z-index: 999;
 }
 
 .sidebar {
-	z-index: 15;
-	position: fixed;
+	grid-area: sidebar;
+	z-index: 999;
 }
 </style>
 
diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
index c76322fb66bb5..e222dd9871e87 100644
--- a/packages/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -55,18 +55,11 @@ export default mixins(
 
 <style lang="scss">
 .main-header {
-	position: fixed;
-	top: 0;
 	background-color: var(--color-background-xlight);
 	height: 65px;
 	width: 100%;
 	box-sizing: border-box;
 
-	padding-left: $--sidebar-width;
-
-	&.expanded {
-		padding-left: $--sidebar-expanded-width;
-	}
 }
 
 .top-menu {
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 1c7f527f564c7..ad1cb963725cc 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -2,7 +2,7 @@
 	<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 class="side-menu-wrapper">
 			<div id="collapse-change-button" class="clickable" @click="toggleCollapse">
 				<font-awesome-icon icon="angle-right" class="icon" />
 			</div>
@@ -678,10 +678,6 @@ export default mixins(
 		font-size: 14px;
 		--menu-item-hover-fill: var(--color-primary-tint-3);
 
-		.el-menu--collapse {
-			width: 75px;
-		}
-
 		.el-menu--popup,
 		.el-menu--inline {
 			font-size: 0.9em;
@@ -809,29 +805,6 @@ export default mixins(
 	transform: translateX(60px) rotate(180deg);
 }
 
-#side-menu {
-	position: fixed;
-	height: 100%;
-
-	.el-menu {
-		height: 100%;
-	}
-}
-
-.side-menu-wrapper {
-	height: 100%;
-	width: $--sidebar-width;
-
-	&.expanded {
-		width: $--sidebar-expanded-width;
-	}
-
-	ul {
-		display: flex;
-		flex-direction: column;
-	}
-}
-
 .footer-menu-items {
 	display: flex;
 	flex-grow: 1;
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 1eff378543b34..4623b9a1d8967 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -3286,19 +3286,14 @@ export default mixins(
 }
 
 .node-view-root {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	left: 0;
-	top: 0;
 	overflow: hidden;
 	background-color: var(--color-canvas-background);
+	width: 100%;
+	height: 100%;
 }
 
 .node-view-wrapper {
 	position: fixed;
-	width: 100%;
-	height: 100%;
 }
 
 .node-view {
@@ -3306,6 +3301,7 @@ export default mixins(
 	width: 100%;
 	height: 100%;
 	transform-origin: 0 0;
+	z-index: -1;
 }
 
 .node-view-background {
@@ -3313,6 +3309,7 @@ export default mixins(
 	position: absolute;
 	width: 10000px;
 	height: 10000px;
+	z-index: -2;
 }
 
 .move-active {

From 3c50a34d509d41ca9bb2c4826865670b28d3c64d Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Wed, 7 Sep 2022 14:21:00 +0200
Subject: [PATCH 02/19] =?UTF-8?q?=E2=9C=A8=20Reworking=20main=20navigation?=
 =?UTF-8?q?=20layout,=20migrating=20some=20styling=20to=20css=20modules?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor-ui/src/components/MainSidebar.vue  | 402 ++++++++++--------
 1 file changed, 218 insertions(+), 184 deletions(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index ad1cb963725cc..29ce0680500b8 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -1,177 +1,183 @@
 <template>
-	<div id="side-menu">
+	<div id="side-menu" :class="['side-menu', $style['side-menu']]">
 		<input type="file" ref="importFile" style="display: none" v-on:change="handleFileImport()">
 
-		<div class="side-menu-wrapper">
+		<div :class="$style['side-menu-wrapper']">
 			<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">
+				<div :class="$style['side-menu-flex-container']">
+					<div :class="$style['side-menu-upper']">
+						<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="$style['logo-text']" slot="title">n8n.io</span>
+							</a>
+						</n8n-menu-item>
+
+						<MenuItemsIterator :items="sidebarMenuTopItems" :root="true"/>
+
+						<el-submenu index="workflow" title="Workflow" popperClass="sidebar-popper">
+							<template slot="title">
+								<font-awesome-icon icon="network-wired"/>&nbsp;
+								<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.workflows') }}</span>
+							</template>
+
+							<n8n-menu-item index="workflow-new">
+								<template slot="title">
+									<font-awesome-icon icon="file"/>&nbsp;
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.new') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item v-if="isTemplatesEnabled" index="template-new">
+								<template slot="title">
+									<font-awesome-icon icon="box-open"/>&nbsp;
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.newTemplate') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-open">
+								<template slot="title">
+									<font-awesome-icon icon="folder-open"/>&nbsp;
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.open') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-save" :disabled="!onWorkflowPage">
+								<template slot="title">
+									<font-awesome-icon icon="save"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.save') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-duplicate" :disabled="!onWorkflowPage || !currentWorkflow">
+								<template slot="title">
+									<font-awesome-icon icon="copy"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.duplicate') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-delete" :disabled="!onWorkflowPage || !currentWorkflow">
+								<template slot="title">
+									<font-awesome-icon icon="trash"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.delete') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-download" :disabled="!onWorkflowPage">
+								<template slot="title">
+									<font-awesome-icon icon="file-download"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.download') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-import-url" :disabled="!onWorkflowPage">
+								<template slot="title">
+									<font-awesome-icon icon="cloud"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.importFromUrl') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-import-file" :disabled="!onWorkflowPage">
+								<template slot="title">
+									<font-awesome-icon icon="hdd"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.importFromFile') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-settings" :disabled="!onWorkflowPage || !currentWorkflow">
+								<template slot="title">
+									<font-awesome-icon icon="cog"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.settings') }}</span>
+								</template>
+							</n8n-menu-item>
+						</el-submenu>
 
-				<n8n-menu-item index="logo" class="logo-item">
-					<a href="https://n8n.io" target="_blank">
-						<img :src="basePath + 'n8n-icon-small.png'" class="icon" alt="n8n.io"/>
-						<span class="logo-text" slot="title">n8n.io</span>
-					</a>
-				</n8n-menu-item>
-
-				<MenuItemsIterator :items="sidebarMenuTopItems" :root="true"/>
-
-				<el-submenu index="workflow" title="Workflow" popperClass="sidebar-popper">
-					<template slot="title">
-						<font-awesome-icon icon="network-wired"/>&nbsp;
-						<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.workflows') }}</span>
-					</template>
-
-					<n8n-menu-item index="workflow-new">
-						<template slot="title">
-							<font-awesome-icon icon="file"/>&nbsp;
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.new') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item v-if="isTemplatesEnabled" index="template-new">
-						<template slot="title">
+						<n8n-menu-item v-if="isTemplatesEnabled" index="templates">
 							<font-awesome-icon icon="box-open"/>&nbsp;
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.newTemplate') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-open">
-						<template slot="title">
-							<font-awesome-icon icon="folder-open"/>&nbsp;
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.open') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-save" :disabled="!onWorkflowPage">
-						<template slot="title">
-							<font-awesome-icon icon="save"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.save') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-duplicate" :disabled="!onWorkflowPage || !currentWorkflow">
-						<template slot="title">
-							<font-awesome-icon icon="copy"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.duplicate') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-delete" :disabled="!onWorkflowPage || !currentWorkflow">
-						<template slot="title">
-							<font-awesome-icon icon="trash"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.delete') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-download" :disabled="!onWorkflowPage">
-						<template slot="title">
-							<font-awesome-icon icon="file-download"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.download') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-import-url" :disabled="!onWorkflowPage">
-						<template slot="title">
-							<font-awesome-icon icon="cloud"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.importFromUrl') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-import-file" :disabled="!onWorkflowPage">
-						<template slot="title">
-							<font-awesome-icon icon="hdd"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.importFromFile') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-settings" :disabled="!onWorkflowPage || !currentWorkflow">
-						<template slot="title">
-							<font-awesome-icon icon="cog"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.settings') }}</span>
-						</template>
-					</n8n-menu-item>
-				</el-submenu>
-
-				<n8n-menu-item v-if="isTemplatesEnabled" index="templates">
-					<font-awesome-icon icon="box-open"/>&nbsp;
-					<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.templates') }}</span>
-				</n8n-menu-item>
-
-				<el-submenu index="credentials" :title="$locale.baseText('mainSidebar.credentials')" popperClass="sidebar-popper">
-					<template slot="title">
-						<font-awesome-icon icon="key"/>&nbsp;
-						<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.credentials') }}</span>
-					</template>
-
-					<n8n-menu-item index="credentials-new">
-						<template slot="title">
-							<font-awesome-icon icon="file"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.new') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="credentials-open">
-						<template slot="title">
-							<font-awesome-icon icon="folder-open"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.open') }}</span>
-						</template>
-					</n8n-menu-item>
-				</el-submenu>
-
-				<n8n-menu-item index="executions">
-					<font-awesome-icon icon="tasks"/>&nbsp;
-					<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.executions') }}</span>
-				</n8n-menu-item>
-
-				<n8n-menu-item index="settings" v-if="canUserAccessSettings && currentUser">
-					<font-awesome-icon icon="cog"/>&nbsp;
-					<span slot="title" class="item-title-root">{{ $locale.baseText('settings') }}</span>
-				</n8n-menu-item>
-
-				<el-submenu index="help" class="help-menu" title="Help" popperClass="sidebar-popper">
-					<template slot="title">
-						<font-awesome-icon icon="question"/>&nbsp;
-						<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.help') }}</span>
-					</template>
-
-					<MenuItemsIterator :items="helpMenuItems" :afterItemClick="trackHelpItemClick" />
-
-					<n8n-menu-item index="help-about">
-						<template slot="title">
-							<font-awesome-icon class="about-icon" icon="info"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.aboutN8n') }}</span>
-						</template>
-					</n8n-menu-item>
-				</el-submenu>
-
-				<MenuItemsIterator :items="sidebarMenuBottomItems" :root="true"/>
-
-				<div :class="`footer-menu-items ${currentUser ? 'logged-in': ''}`">
-					<n8n-menu-item index="updates" class="updates" v-if="hasVersionUpdates" @click="openUpdatesPanel">
-						<div class="gift-container">
-							<GiftNotificationIcon />
-						</div>
-						<span slot="title" class="item-title-root">{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available</span>
-					</n8n-menu-item>
-					<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle" v-if="canUserAccessSidebarUserInfo && currentUser">
-						<div ref="user">
-							<n8n-menu-item class="user">
-								<div class="avatar">
-									<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
+							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.templates') }}</span>
+						</n8n-menu-item>
+
+						<el-submenu index="credentials" :title="$locale.baseText('mainSidebar.credentials')" popperClass="sidebar-popper">
+							<template slot="title">
+								<font-awesome-icon icon="key"/>&nbsp;
+								<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.credentials') }}</span>
+							</template>
+
+							<n8n-menu-item index="credentials-new">
+								<template slot="title">
+									<font-awesome-icon icon="file"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.new') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="credentials-open">
+								<template slot="title">
+									<font-awesome-icon icon="folder-open"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.open') }}</span>
+								</template>
+							</n8n-menu-item>
+						</el-submenu>
+
+						<n8n-menu-item index="executions">
+							<font-awesome-icon icon="tasks"/>&nbsp;
+							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.executions') }}</span>
+						</n8n-menu-item>
+					</div>
+					<div :class="$style['side-menu-lower']">
+						<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="$style['about-icon']" icon="info"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.aboutN8n') }}</span>
+								</template>
+							</n8n-menu-item>
+						</el-submenu>
+
+						<MenuItemsIterator :items="sidebarMenuBottomItems" :root="true"/>
+
+						<div :class="{
+							[$style['footer-menu-items']] : true,
+							[$style['logged-in']]: currentUser !== undefined
+						}">
+							<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" v-if="!isCollapsed">
-									{{currentUser.fullName}}
-								</span>
+								<span slot="title" class="item-title-root">{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available</span>
 							</n8n-menu-item>
+							<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle" v-if="canUserAccessSidebarUserInfo && currentUser">
+								<div ref="user">
+									<n8n-menu-item class="user">
+										<div class="avatar">
+											<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
+										</div>
+										<span slot="title" class="item-title-root" v-if="!isCollapsed">
+											{{currentUser.fullName}}
+										</span>
+									</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>
-						<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>
 
@@ -649,6 +655,50 @@ export default mixins(
 	});
 </script>
 
+<style lang="scss" module>
+
+.side-menu {
+	height: 100%;
+}
+
+.side-menu-wrapper {
+	height: 100%;
+	ul { height: 100%; }
+}
+
+.side-menu-flex-container {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.about-icon {
+	margin-left: 5px;
+}
+
+.logo-text {
+	position: relative;
+	top: -3px;
+	left: 5px;
+	font-weight: bold;
+	color: var(--color-foreground-xlight);
+	text-decoration: none;
+}
+
+.footer-menu-items {
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+	justify-content: flex-end;
+	padding-bottom: 32px;
+
+	&.logged-in {
+		padding-bottom: 8px;
+	}
+}
+</style>
+
 <style lang="scss">
 .sidebar-popper{
 	.el-menu-item {
@@ -750,10 +800,6 @@ export default mixins(
 	}
 }
 
-.about-icon {
-	margin-left: 5px;
-}
-
 #collapse-change-button {
 	position: absolute;
 	z-index: 10;
@@ -789,14 +835,6 @@ export default mixins(
 	transform: scale(1.1);
 }
 
-.logo-text {
-	position: relative;
-	top: -3px;
-	left: 5px;
-	font-weight: bold;
-	color: var(--color-foreground-xlight);
-	text-decoration: none;
-}
 
 .expanded #collapse-change-button {
 	-webkit-transform: translateX(60px) rotate(180deg);
@@ -805,18 +843,6 @@ export default mixins(
 	transform: translateX(60px) rotate(180deg);
 }
 
-.footer-menu-items {
-	display: flex;
-	flex-grow: 1;
-	flex-direction: column;
-	justify-content: flex-end;
-	padding-bottom: 32px;
-
-	&.logged-in {
-		padding-bottom: 8px;
-	}
-}
-
 .el-menu-item.updates {
 	color: $--sidebar-inactive-color !important;
 	.item-title-root {
@@ -863,4 +889,12 @@ export default mixins(
 	}
 }
 
+.el-menu--collapse .el-submenu .el-submenu__title span,
+.el-menu--collapse .el-submenu__icon-arrow {
+  height: 0;
+  width: 0;
+  overflow: hidden;
+  visibility: hidden;
+  display: inline-block;
+}
 </style>

From fe35ebce245607830cb133f96af4cfd5dde1b281 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Wed, 7 Sep 2022 17:04:47 +0200
Subject: [PATCH 03/19] =?UTF-8?q?=E2=9C=A8=20Reworking=20main=20sidebar=20?=
 =?UTF-8?q?layout=20and=20responsiveness?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/public/n8n-icon.svg        |   3 +
 .../editor-ui/src/components/MainSidebar.vue  | 272 ++++++++++--------
 packages/editor-ui/src/modules/ui.ts          |   3 +
 packages/editor-ui/src/plugins/icons.ts       |   2 +
 4 files changed, 155 insertions(+), 125 deletions(-)
 create mode 100644 packages/editor-ui/public/n8n-icon.svg

diff --git a/packages/editor-ui/public/n8n-icon.svg b/packages/editor-ui/public/n8n-icon.svg
new file mode 100644
index 0000000000000..62e0c21bb7486
--- /dev/null
+++ b/packages/editor-ui/public/n8n-icon.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/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 29ce0680500b8..32b7b42394805 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -3,17 +3,26 @@
 		<input type="file" ref="importFile" style="display: none" v-on:change="handleFileImport()">
 
 		<div :class="$style['side-menu-wrapper']">
-			<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">
 				<div :class="$style['side-menu-flex-container']">
 					<div :class="$style['side-menu-upper']">
-						<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="$style['logo-text']" slot="title">n8n.io</span>
+						<n8n-menu-item
+							index="logo"
+							:class="{[$style['logo-item']]: true, [$style['logo-item--collapsed']]: isCollapsed}"
+							@click="onLogoMenuItemClick"
+						>
+							<a href="https://n8n.io" target="_blank" :class="$style['logo-link']">
+								<img :src="basePath + 'n8n-icon.svg'" :class="$style['icon']" alt="n8n"/>
+								<span :class="['logo-text', $style['logo-text']]" slot="title">n8n</span>
 							</a>
+							<div
+								id="collapse-change-button"
+								:class="['clickable', $style['side-menu-collapse-button']]"
+								@click="toggleCollapse"
+							>
+								<font-awesome-icon v-if="isCollapsed" icon="angle-right" :class="$style['icon-collapsed']" />
+								<font-awesome-icon v-else icon="angle-left" :class="$style['icon-expanded']" />
+							</div>
 						</n8n-menu-item>
 
 						<MenuItemsIterator :items="sidebarMenuTopItems" :root="true"/>
@@ -122,7 +131,7 @@
 							<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">
+						<el-submenu index="help" :class="$style['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>
@@ -144,7 +153,7 @@
 							[$style['footer-menu-items']] : true,
 							[$style['logged-in']]: currentUser !== undefined
 						}">
-							<n8n-menu-item index="updates" class="updates" v-if="hasVersionUpdates" @click="openUpdatesPanel">
+							<n8n-menu-item index="updates" :class="['updates-submenu']" v-if="hasVersionUpdates" @click="openUpdatesPanel">
 								<div class="gift-container">
 									<GiftNotificationIcon />
 								</div>
@@ -152,11 +161,11 @@
 							</n8n-menu-item>
 							<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle" v-if="canUserAccessSidebarUserInfo && currentUser">
 								<div ref="user">
-									<n8n-menu-item class="user">
-										<div class="avatar">
+									<n8n-menu-item :class="$style['user-submenu']">
+										<div :class="$style['avatar']">
 											<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
 										</div>
-										<span slot="title" class="item-title-root" v-if="!isCollapsed">
+										<span slot="title" :class="['item-title-root', $style['username'] ]" v-if="!isCollapsed">
 											{{currentUser.fullName}}
 										</span>
 									</n8n-menu-item>
@@ -371,6 +380,13 @@ export default mixins(
 			if (this.$refs.user) {
 				this.$externalHooks().run('mainSidebar.mounted', { userRef: this.$refs.user });
 			}
+			this.checkWidthAndAdjustSidebar(window.outerWidth);
+		},
+		created() {
+			window.addEventListener("resize", this.onResize);
+		},
+		destroyed() {
+			window.removeEventListener("resize", this.onResize);
 		},
 		methods: {
 			trackHelpItemClick (itemType: string) {
@@ -394,6 +410,11 @@ export default mixins(
 					this.$showError(e, this.$locale.baseText('auth.signout.error'));
 				}
 			},
+			onLogoMenuItemClick () {
+				if (this.isCollapsed) {
+					this.toggleCollapse();
+				}
+			},
 			toggleCollapse () {
 				this.$store.commit('ui/toggleSidebarMenuCollapse');
 			},
@@ -651,6 +672,18 @@ 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>
@@ -677,12 +710,47 @@ export default mixins(
 	margin-left: 5px;
 }
 
+.logo-item {
+	display: flex;
+	justify-content: space-between;
+	height: $--header-height;
+	line-height: $--header-height;
+
+	&:hover { background-color: initial; }
+
+	* {
+		vertical-align: middle;
+	}
+
+	.icon {
+		height: 18px;
+	}
+}
+
+.logo-item--collapsed {
+	border-bottom: 1px solid var(--color-foreground-base);
+
+	.side-menu-collapse-button {
+		display: none;
+	}
+	&:hover {
+		img {
+			display: none;
+		}
+		.side-menu-collapse-button {
+			display: block;
+			position: relative;
+			left: -10px;
+			color: #EA4B71;
+		}
+	}
+}
+
 .logo-text {
 	position: relative;
-	top: -3px;
 	left: 5px;
 	font-weight: bold;
-	color: var(--color-foreground-xlight);
+	color: #101330;
 	text-decoration: none;
 }
 
@@ -697,6 +765,65 @@ export default mixins(
 		padding-bottom: 8px;
 	}
 }
+
+.updates-submenu {
+	color: $--sidebar-inactive-color !important;
+	.item-title-root {
+		font-size: 13px;
+		top: 0 !important;
+	}
+
+	&:hover {
+		color: $--sidebar-active-color;
+	}
+
+	.gift-container {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		height: 100%;
+		width: 100%;
+	}
+}
+
+.user-submenu {
+	position: relative;
+
+	&:hover {
+		background-color: unset;
+	}
+
+	.avatar {
+		top: 25%;
+		left: 18px;
+		position: absolute;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.username {
+		color: var(--color-text-base);
+		font-weight: var(--font-weight-bold);
+		font-size: var(--font-size-s);
+		max-width: 130px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+.side-menu-collapse-button {
+	color: #7D7D87;
+
+	&:hover {
+		color: #EA4B71;
+	}
+}
+
+
+@media screen and (max-height: 470px) {
+	.help-menu { display: none; }
+}
 </style>
 
 <style lang="scss">
@@ -706,7 +833,7 @@ export default mixins(
 		height: 35px;
 		line-height: 35px;
 		color: $--custom-dialog-text-color;
-		--menu-item-hover-fill: var(--color-primary-tint-3);
+		--menu-item-hover-fill: var(--color-foreground-base);
 
 		.item-title {
 			position: absolute;
@@ -726,7 +853,7 @@ export default mixins(
 	.el-menu {
 		border: none;
 		font-size: 14px;
-		--menu-item-hover-fill: var(--color-primary-tint-3);
+		--menu-item-hover-fill: var(--color-foreground-base);
 
 		.el-menu--popup,
 		.el-menu--inline {
@@ -740,10 +867,10 @@ export default mixins(
 
 		.el-menu-item,
 		.el-submenu__title {
-			color: $--color-primary;
+			color: var(--color-text-dark);
 			font-size: 1.2em;
 			.el-submenu__icon-arrow {
-				color: $--color-primary;
+				color: var(--color-text-dark);
 				font-weight: 800;
 				font-size: 1em;
 			}
@@ -780,117 +907,12 @@ export default mixins(
 				vertical-align: baseline;
 			}
 		}
-
-		&.logo-item {
-			background-color: $--color-primary !important;
-			height: $--header-height;
-			line-height: $--header-height;
-			* {
-				vertical-align: middle;
-			}
-
-
-			.icon {
-				position: relative;
-				height: 23px;
-				left: -10px;
-				top: -2px;
-			}
-		}
-	}
-}
-
-#collapse-change-button {
-	position: absolute;
-	z-index: 10;
-	top: 55px;
-	left: 25px;
-	text-align: right;
-	line-height: 24px;
-	height: 20px;
-	width: 20px;
-	background-color: var(--color-foreground-xlight);
-	border: none;
-	border-radius: 15px;
-
-	-webkit-transition-duration: 0.5s;
-	-moz-transition-duration: 0.5s;
-	-o-transition-duration: 0.5s;
-	transition-duration: 0.5s;
-
-	-webkit-transition-property: -webkit-transform;
-	-moz-transition-property: -moz-transform;
-	-o-transition-property: -o-transform;
-	transition-property: transform;
-
-	overflow: hidden;
-
-	.icon {
-		position: relative;
-		left: -5px;
-		top: -2px;
-	}
-}
-#collapse-change-button:hover {
-	transform: scale(1.1);
-}
-
-
-.expanded #collapse-change-button {
-	-webkit-transform: translateX(60px) rotate(180deg);
-	-moz-transform: translateX(60px) rotate(180deg);
-	-o-transform: translateX(60px) rotate(180deg);
-	transform: translateX(60px) rotate(180deg);
-}
-
-.el-menu-item.updates {
-	color: $--sidebar-inactive-color !important;
-	.item-title-root {
-		font-size: 13px;
-		top: 0 !important;
-	}
-
-	&:hover {
-		color: $--sidebar-active-color;
-	}
-
-	.gift-container {
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-		height: 100%;
-		width: 100%;
-	}
-}
-
-.el-menu-item.user {
-	position: relative;
-
-	&:hover {
-		background-color: unset;
-	}
-
-	.avatar {
-		top: 25%;
-		left: 18px;
-		position: absolute;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.item-title-root {
-		color: var(--color-text-base);
-		font-weight: var(--font-weight-bold);
-		font-size: var(--font-size-s);
-		max-width: 130px;
-		overflow: hidden;
-		text-overflow: ellipsis;
 	}
 }
 
 .el-menu--collapse .el-submenu .el-submenu__title span,
-.el-menu--collapse .el-submenu__icon-arrow {
+.el-menu--collapse .el-submenu__icon-arrow,
+.el-menu--collapse .logo-text {
   height: 0;
   width: 0;
   overflow: hidden;
diff --git a/packages/editor-ui/src/modules/ui.ts b/packages/editor-ui/src/modules/ui.ts
index 23cfb0ebe8c12..255924bbdaac1 100644
--- a/packages/editor-ui/src/modules/ui.ts
+++ b/packages/editor-ui/src/modules/ui.ts
@@ -236,6 +236,9 @@ const module: Module<IUiState, IRootState> = {
 		toggleSidebarMenuCollapse: (state: IUiState) => {
 			state.sidebarMenuCollapsed = !state.sidebarMenuCollapsed;
 		},
+		collapseSidebarMenu: (state: IUiState) => {
+			state.sidebarMenuCollapsed = true;
+		},
 		setCurrentView: (state: IUiState, currentView: string) => {
 			state.currentView = currentView;
 		},
diff --git a/packages/editor-ui/src/plugins/icons.ts b/packages/editor-ui/src/plugins/icons.ts
index 428dafa1fa0e6..1c0e1237d1880 100644
--- a/packages/editor-ui/src/plugins/icons.ts
+++ b/packages/editor-ui/src/plugins/icons.ts
@@ -4,6 +4,7 @@ import { IconDefinition, library } from '@fortawesome/fontawesome-svg-core';
 import {
 	faAngleDoubleLeft,
 	faAngleDown,
+	faAngleLeft,
 	faAngleRight,
 	faAngleUp,
 	faArrowLeft,
@@ -115,6 +116,7 @@ function addIcon(icon: any) { // tslint:disable-line:no-any
 
 addIcon(faAngleDoubleLeft);
 addIcon(faAngleDown);
+addIcon(faAngleLeft);
 addIcon(faAngleRight);
 addIcon(faAngleUp);
 addIcon(faArrowLeft);

From b67ce67f256609dfa4892e27a589fbbc347c6f81 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Wed, 7 Sep 2022 17:24:28 +0200
Subject: [PATCH 04/19] =?UTF-8?q?=F0=9F=92=84=20Minor=20type=20update?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/components/MainSidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 32b7b42394805..78d870efdd4dc 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -679,7 +679,7 @@ export default mixins(
 				const browserWidth = (event.target as Window).outerWidth;
 				this.checkWidthAndAdjustSidebar(browserWidth);
 			},
-			checkWidthAndAdjustSidebar (width: Number) {
+			checkWidthAndAdjustSidebar (width: number) {
 				if (width < 900) {
 					this.$store.commit('ui/collapseSidebarMenu');
 				}

From c6831d2cb11544429bd4b707fd8bf8ce64bf3f55 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 8 Sep 2022 09:21:34 +0200
Subject: [PATCH 05/19] =?UTF-8?q?=E2=9C=A8=20Updated=20editor=20grid=20lay?=
 =?UTF-8?q?out=20so=20empty=20cells=20are=20collapsed=20(`fit-content`),?=
 =?UTF-8?q?=20fixed=20updates=20menu=20items=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/App.vue                    |  4 ++--
 packages/editor-ui/src/components/MainSidebar.vue | 11 +++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 86f5eeaf3c361..f0fd874a80e64 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -198,10 +198,10 @@ export default mixins(
     "sidebar header"
     "sidebar content";
   grid-template-columns: 200px 1fr;
-  grid-template-rows: 65px 1fr; // TODO: Use variables for width
+  grid-template-rows: fit-content(65px) 1fr; // TODO: Use variables for width
 
 	&.sidebar-collapsed {
-		grid-template-columns: 65px 1fr;
+		grid-template-columns: fit-content(65px) 1fr;
 	}
 }
 
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 78d870efdd4dc..b0de133e21c3f 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -153,11 +153,13 @@
 							[$style['footer-menu-items']] : true,
 							[$style['logged-in']]: currentUser !== undefined
 						}">
-							<n8n-menu-item index="updates" :class="['updates-submenu']" v-if="hasVersionUpdates" @click="openUpdatesPanel">
-								<div class="gift-container">
+							<n8n-menu-item index="updates" :class="$style['updates-submenu']" v-if="hasVersionUpdates" @click="openUpdatesPanel">
+								<div :class="$style['gift-container']">
 									<GiftNotificationIcon />
 								</div>
-								<span slot="title" class="item-title-root">{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available</span>
+								<span slot="title" :class="['item-title-root', $style['updates-label']]">
+									{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available
+								</span>
 							</n8n-menu-item>
 							<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle" v-if="canUserAccessSidebarUserInfo && currentUser">
 								<div ref="user">
@@ -768,7 +770,8 @@ export default mixins(
 
 .updates-submenu {
 	color: $--sidebar-inactive-color !important;
-	.item-title-root {
+
+	.updates-label {
 		font-size: 13px;
 		top: 0 !important;
 	}

From 61dcb2ec448458c90a31c8a5496c71bb2ca435b5 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 8 Sep 2022 14:14:30 +0200
Subject: [PATCH 06/19] =?UTF-8?q?=E2=9C=A8=20Implemented=20new=20user=20ar?=
 =?UTF-8?q?ea=20look=20&=20feel=20in=20main=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/App.vue                |   6 +-
 .../editor-ui/src/components/MainSidebar.vue  | 102 +++++++++++-------
 packages/editor-ui/src/n8n-theme.scss         |   2 +-
 3 files changed, 70 insertions(+), 40 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index f0fd874a80e64..25974fc9551e8 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -187,7 +187,9 @@ export default mixins(
 
 <style lang="scss" module>
 .app {
+	position: fixed;
 	height: 100vh;
+	width: 100%;
 	overflow: hidden;
 }
 
@@ -197,11 +199,11 @@ export default mixins(
   grid-template-areas:
     "sidebar header"
     "sidebar content";
-  grid-template-columns: 200px 1fr;
+  grid-auto-columns: fit-content(200px) 1fr;
   grid-template-rows: fit-content(65px) 1fr; // TODO: Use variables for width
 
 	&.sidebar-collapsed {
-		grid-template-columns: fit-content(65px) 1fr;
+		grid-auto-columns: fit-content(65px) 1fr;
 	}
 }
 
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index b0de133e21c3f..66457f179f2a4 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -161,30 +161,32 @@
 									{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available
 								</span>
 							</n8n-menu-item>
-							<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle" v-if="canUserAccessSidebarUserInfo && currentUser">
-								<div ref="user">
-									<n8n-menu-item :class="$style['user-submenu']">
-										<div :class="$style['avatar']">
+							<div ref="user" v-if="canUserAccessSidebarUserInfo && currentUser">
+								<n8n-menu-item :class="$style['user-submenu']">
+									<!-- 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>
-										<span slot="title" :class="['item-title-root', $style['username'] ]" v-if="!isCollapsed">
-											{{currentUser.fullName}}
-										</span>
-									</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>
+									</el-dropdown>
+									<div slot="title" :class="['item-title-root', $style['username'] ]" v-if="!isCollapsed">
+										<span>{{currentUser.fullName}}</span>
+										<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle">
+											<div :class="{[$style['user-actions']]: true }">
+												<n8n-icon icon="ellipsis-v" />
+												<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>
+								</n8n-menu-item>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -395,11 +397,15 @@ export default mixins(
 				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() {
@@ -774,6 +780,7 @@ export default mixins(
 	.updates-label {
 		font-size: 13px;
 		top: 0 !important;
+		left: 13px !important;
 	}
 
 	&:hover {
@@ -791,27 +798,45 @@ export default mixins(
 
 .user-submenu {
 	position: relative;
+	border-top: 1px solid var(--color-foreground-light);
+	cursor: default;
 
 	&:hover {
 		background-color: unset;
 	}
 
 	.avatar {
-		top: 25%;
-		left: 18px;
-		position: absolute;
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		cursor: default;
 	}
 
 	.username {
+		display: flex;
+		width: 60%;
+		left: 8px !important;
+		justify-content: space-between;
 		color: var(--color-text-base);
 		font-weight: var(--font-weight-bold);
-		font-size: var(--font-size-s);
-		max-width: 130px;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		font-size: var(--font-size-xs);
+		cursor: default;
+
+		span {
+			max-width: 130px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.user-actions {
+		position: relative;
+		left: 10px;
+		cursor: pointer;
+
+		&:hover {
+			color: var(--color-primary);
+		}
 	}
 }
 
@@ -870,6 +895,8 @@ export default mixins(
 
 		.el-menu-item,
 		.el-submenu__title {
+			display: flex;
+			align-items: center;
 			color: var(--color-text-dark);
 			font-size: 1.2em;
 			.el-submenu__icon-arrow {
@@ -887,9 +914,10 @@ export default mixins(
 				font-size: var(--font-size-s);
 			}
 			.item-title-root {
-				position: absolute;
-				left: 60px;
-				top: 1px;
+				display: block;
+				margin-right: 25px;
+				position: relative;
+				left: 20px;
 			}
 		}
 
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index 04f2c0b6980d5..3c8b409785be2 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -3,7 +3,7 @@
 @import "~n8n-design-system/theme/dist/index.css";
 
 .clickable {
-	cursor: pointer;
+	cursor: pointer !important;
 }
 .primary-color {
 	color: $--color-primary;

From 142ea65e4cdb5d1d435c469c2db6ee2c978ea1b7 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 8 Sep 2022 14:34:21 +0200
Subject: [PATCH 07/19] =?UTF-8?q?=F0=9F=92=84=20Adjusting=20sidebar=20bott?=
 =?UTF-8?q?om=20padding=20when=20user=20area=20is=20not=20shown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 66457f179f2a4..60eb9a9afe305 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -151,7 +151,7 @@
 
 						<div :class="{
 							[$style['footer-menu-items']] : true,
-							[$style['logged-in']]: currentUser !== undefined
+							[$style['logged-in']]: showUserArea,
 						}">
 							<n8n-menu-item index="updates" :class="$style['updates-submenu']" v-if="hasVersionUpdates" @click="openUpdatesPanel">
 								<div :class="$style['gift-container']">
@@ -161,7 +161,7 @@
 									{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available
 								</span>
 							</n8n-menu-item>
-							<div ref="user" v-if="canUserAccessSidebarUserInfo && currentUser">
+							<div ref="user" v-if="showUserArea">
 								<n8n-menu-item :class="$style['user-submenu']">
 									<!-- This dropdown is only enabled when sidebar is collapsed -->
 									<el-dropdown :disabled="!isCollapsed" placement="right-end" trigger="click" @command="onUserActionToggle">
@@ -278,11 +278,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 [
 					{
@@ -767,7 +771,7 @@ export default mixins(
 	flex-grow: 1;
 	flex-direction: column;
 	justify-content: flex-end;
-	padding-bottom: 32px;
+	padding-bottom: 20px;
 
 	&.logged-in {
 		padding-bottom: 8px;

From ba56e0762d2c270de0c4fb4890fb568145e9bfa8 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 8 Sep 2022 15:55:18 +0200
Subject: [PATCH 08/19] =?UTF-8?q?=F0=9F=92=84=20CSS=20cleanup/refactor=20+?=
 =?UTF-8?q?=20minor=20vue=20refactoring?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/App.vue                |  10 +-
 .../editor-ui/src/components/MainSidebar.vue  | 113 ++++++++----------
 packages/editor-ui/src/modules/ui.ts          |   3 +
 3 files changed, 56 insertions(+), 70 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 25974fc9551e8..b28afe5217651 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -194,17 +194,13 @@ export default mixins(
 }
 
 .container {
-	height: 100%;
 	display: grid;
   grid-template-areas:
     "sidebar header"
     "sidebar content";
-  grid-auto-columns: fit-content(200px) 1fr;
-  grid-template-rows: fit-content(65px) 1fr; // TODO: Use variables for width
-
-	&.sidebar-collapsed {
-		grid-auto-columns: fit-content(65px) 1fr;
-	}
+  grid-auto-columns: fit-content($--sidebar-expanded-width) 1fr;
+  grid-template-rows: fit-content($--sidebar-width) 1fr;
+	height: 100%;
 }
 
 .content {
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 60eb9a9afe305..c4ba89329105a 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -3,26 +3,25 @@
 		<input type="file" ref="importFile" style="display: none" v-on:change="handleFileImport()">
 
 		<div :class="$style['side-menu-wrapper']">
+			<div
+				id="collapse-change-button"
+				:class="['clickable', $style['side-menu-collapse-button']]"
+				@click="toggleCollapse"
+			>
+				<font-awesome-icon v-if="isCollapsed" icon="angle-right" :class="$style['icon-collapsed']" />
+				<font-awesome-icon v-else icon="angle-left" :class="$style['icon-expanded']" />
+			</div>
 			<n8n-menu default-active="workflow" @select="handleSelect" :collapse="isCollapsed">
 				<div :class="$style['side-menu-flex-container']">
 					<div :class="$style['side-menu-upper']">
 						<n8n-menu-item
 							index="logo"
 							:class="{[$style['logo-item']]: true, [$style['logo-item--collapsed']]: isCollapsed}"
-							@click="onLogoMenuItemClick"
 						>
 							<a href="https://n8n.io" target="_blank" :class="$style['logo-link']">
 								<img :src="basePath + 'n8n-icon.svg'" :class="$style['icon']" alt="n8n"/>
 								<span :class="['logo-text', $style['logo-text']]" slot="title">n8n</span>
 							</a>
-							<div
-								id="collapse-change-button"
-								:class="['clickable', $style['side-menu-collapse-button']]"
-								@click="toggleCollapse"
-							>
-								<font-awesome-icon v-if="isCollapsed" icon="angle-right" :class="$style['icon-collapsed']" />
-								<font-awesome-icon v-else icon="angle-left" :class="$style['icon-expanded']" />
-							</div>
 						</n8n-menu-item>
 
 						<MenuItemsIterator :items="sidebarMenuTopItems" :root="true"/>
@@ -422,13 +421,8 @@ export default mixins(
 					this.$showError(e, this.$locale.baseText('auth.signout.error'));
 				}
 			},
-			onLogoMenuItemClick () {
-				if (this.isCollapsed) {
-					this.toggleCollapse();
-				}
-			},
 			toggleCollapse () {
-				this.$store.commit('ui/toggleSidebarMenuCollapse');
+				this.$store.dispatch('ui/toggleSidebarMenuCollapse');
 			},
 			clearExecutionData () {
 				this.$store.commit('setWorkflowExecutionData', null);
@@ -702,24 +696,41 @@ export default mixins(
 
 <style lang="scss" module>
 
+$--n8n-logo-text-color: #101330;
+
 .side-menu {
 	height: 100%;
 }
 
 .side-menu-wrapper {
 	height: 100%;
+	position: relative;
 	ul { height: 100%; }
 }
 
+.side-menu-collapse-button {
+	position: absolute;
+	right: -10px;
+	top: 50%;
+	z-index: 999;
+	color: var(--color-text-base);
+	background-color: var(--color-foreground-xlight);
+	width: 20px;
+	height: 20px;
+	border: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+	text-align: center;
+	border-radius: 50%;
+
+	&:hover {
+		color: #EA4B71;
+	}
+}
+
 .side-menu-flex-container {
-	height: 100%;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
-}
-
-.about-icon {
-	margin-left: 5px;
+	height: 100%;
 }
 
 .logo-item {
@@ -727,43 +738,24 @@ export default mixins(
 	justify-content: space-between;
 	height: $--header-height;
 	line-height: $--header-height;
-
 	&:hover { background-color: initial; }
 
-	* {
-		vertical-align: middle;
-	}
+	* { vertical-align: middle; }
+	.icon { height: 18px; }
 
-	.icon {
-		height: 18px;
+	.logo-text {
+		position: relative;
+		left: 5px;
+		font-weight: bold;
+		color: $--n8n-logo-text-color;
+		text-decoration: none;
 	}
 }
 
 .logo-item--collapsed {
-	border-bottom: 1px solid var(--color-foreground-base);
-
-	.side-menu-collapse-button {
-		display: none;
-	}
-	&:hover {
-		img {
-			display: none;
-		}
-		.side-menu-collapse-button {
-			display: block;
-			position: relative;
-			left: -10px;
-			color: #EA4B71;
-		}
-	}
-}
+	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
 
-.logo-text {
-	position: relative;
-	left: 5px;
-	font-weight: bold;
-	color: #101330;
-	text-decoration: none;
+	.logo-text { display: none; }
 }
 
 .footer-menu-items {
@@ -774,15 +766,19 @@ export default mixins(
 	padding-bottom: 20px;
 
 	&.logged-in {
-		padding-bottom: 8px;
+		padding-bottom: var(--spacing-m);
 	}
 }
 
+.about-icon {
+	margin-left: 5px;
+}
+
 .updates-submenu {
 	color: $--sidebar-inactive-color !important;
 
 	.updates-label {
-		font-size: 13px;
+		font-size: var(--font-size-xs);
 		top: 0 !important;
 		left: 13px !important;
 	}
@@ -802,7 +798,7 @@ export default mixins(
 
 .user-submenu {
 	position: relative;
-	border-top: 1px solid var(--color-foreground-light);
+	border-top: var(--border-width-base) var(--border-style-base) var(--color-foreground-light);
 	cursor: default;
 
 	&:hover {
@@ -844,15 +840,6 @@ export default mixins(
 	}
 }
 
-.side-menu-collapse-button {
-	color: #7D7D87;
-
-	&:hover {
-		color: #EA4B71;
-	}
-}
-
-
 @media screen and (max-height: 470px) {
 	.help-menu { display: none; }
 }
@@ -946,12 +933,12 @@ export default mixins(
 }
 
 .el-menu--collapse .el-submenu .el-submenu__title span,
-.el-menu--collapse .el-submenu__icon-arrow,
-.el-menu--collapse .logo-text {
+.el-menu--collapse .el-submenu__icon-arrow {
   height: 0;
   width: 0;
   overflow: hidden;
   visibility: hidden;
   display: inline-block;
 }
+
 </style>
diff --git a/packages/editor-ui/src/modules/ui.ts b/packages/editor-ui/src/modules/ui.ts
index 255924bbdaac1..b993a3fdb26be 100644
--- a/packages/editor-ui/src/modules/ui.ts
+++ b/packages/editor-ui/src/modules/ui.ts
@@ -338,6 +338,9 @@ const module: Module<IUiState, IRootState> = {
 			context.commit('setMode', { name: COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, mode: COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE });
 			context.commit('openModal', COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY);
 		},
+		toggleSidebarMenuCollapse: (context: ActionContext<IUiState, IRootState>): void => {
+			context.commit('toggleSidebarMenuCollapse');
+		},
 	},
 };
 

From d18e973e840316294e1a4228da58e0e44ff2277c Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Tue, 13 Sep 2022 09:54:41 +0200
Subject: [PATCH 09/19] =?UTF-8?q?=E2=9C=A8=20Fixing=20overscoll=20issue=20?=
 =?UTF-8?q?in=20chrome=20and=20scrolling=20behaviour=20of=20the=20content?=
 =?UTF-8?q?=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design-system/theme/src/reset.scss | 2 +-
 packages/editor-ui/src/App.vue              | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/design-system/theme/src/reset.scss b/packages/design-system/theme/src/reset.scss
index 6688cb9621eef..546de883be185 100644
--- a/packages/design-system/theme/src/reset.scss
+++ b/packages/design-system/theme/src/reset.scss
@@ -15,7 +15,7 @@ html {
 body {
 	height: 100%;
 	width: 100%;
-	overscroll-behavior-x: none;
+	overscroll-behavior: none;
 	line-height: 1;
 	font-size: var(--font-size-m);
 	font-weight: var(--font-weight-regular);
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index b28afe5217651..45de583a2ef1c 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -187,9 +187,7 @@ export default mixins(
 
 <style lang="scss" module>
 .app {
-	position: fixed;
 	height: 100vh;
-	width: 100%;
 	overflow: hidden;
 }
 
@@ -200,11 +198,12 @@ export default mixins(
     "sidebar content";
   grid-auto-columns: fit-content($--sidebar-expanded-width) 1fr;
   grid-template-rows: fit-content($--sidebar-width) 1fr;
-	height: 100%;
 }
 
 .content {
 	grid-area: content;
+	overflow: auto;
+	height: calc(100vh - $--header-height);
 }
 
 .header {
@@ -214,6 +213,7 @@ export default mixins(
 
 .sidebar {
 	grid-area: sidebar;
+	height: 100vh;
 	z-index: 999;
 }
 </style>

From 56e28ef550148e91d6b5ee8dc4e8865dc02d6a7a Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Tue, 13 Sep 2022 10:26:58 +0200
Subject: [PATCH 10/19] =?UTF-8?q?=F0=9F=91=8C=20Addressing=20review=20feed?=
 =?UTF-8?q?back?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/App.vue                |  4 +-
 .../editor-ui/src/components/MainSidebar.vue  | 76 +++++++++----------
 packages/editor-ui/src/modules/ui.ts          |  3 -
 3 files changed, 40 insertions(+), 43 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 45de583a2ef1c..0449c70a75190 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -5,8 +5,8 @@
 			v-else
 			id="app"
 			:class="{
-				[$style['container']]: true,
-				[$style['sidebar-collapsed']]: sidebarMenuCollapsed
+				[$style.container]: true,
+				[$style.sidebarCollapsed]: sidebarMenuCollapsed
 			}"
 		>
 			<div id="header" :class="$style['header']">
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index c4ba89329105a..eb9c3ae079f2e 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -1,26 +1,26 @@
 <template>
-	<div id="side-menu" :class="['side-menu', $style['side-menu']]">
+	<div id="side-menu" :class="['side-menu', $style.sideMenu]">
 		<input type="file" ref="importFile" style="display: none" v-on:change="handleFileImport()">
 
-		<div :class="$style['side-menu-wrapper']">
+		<div :class="$style.sideMenuWrapper">
 			<div
 				id="collapse-change-button"
-				:class="['clickable', $style['side-menu-collapse-button']]"
+				:class="['clickable', $style.sideMenuCollapseButton]"
 				@click="toggleCollapse"
 			>
 				<font-awesome-icon v-if="isCollapsed" icon="angle-right" :class="$style['icon-collapsed']" />
 				<font-awesome-icon v-else icon="angle-left" :class="$style['icon-expanded']" />
 			</div>
 			<n8n-menu default-active="workflow" @select="handleSelect" :collapse="isCollapsed">
-				<div :class="$style['side-menu-flex-container']">
-					<div :class="$style['side-menu-upper']">
+				<div :class="$style.sideMenuFlexContainer">
+					<div :class="$style.sideMenuUpper">
 						<n8n-menu-item
 							index="logo"
-							:class="{[$style['logo-item']]: true, [$style['logo-item--collapsed']]: isCollapsed}"
+							:class="{[$style.logoItem]: true, [$style.logoItemCollapsed]: isCollapsed}"
 						>
 							<a href="https://n8n.io" target="_blank" :class="$style['logo-link']">
 								<img :src="basePath + 'n8n-icon.svg'" :class="$style['icon']" alt="n8n"/>
-								<span :class="['logo-text', $style['logo-text']]" slot="title">n8n</span>
+								<span :class="['logo-text', $style.logoText]" slot="title">n8n</span>
 							</a>
 						</n8n-menu-item>
 
@@ -124,13 +124,13 @@
 							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.executions') }}</span>
 						</n8n-menu-item>
 					</div>
-					<div :class="$style['side-menu-lower']">
+					<div :class="$style.sideMenuLower">
 						<n8n-menu-item index="settings" v-if="canUserAccessSettings && currentUser">
 							<font-awesome-icon icon="cog"/>&nbsp;
 							<span slot="title" class="item-title-root">{{ $locale.baseText('settings') }}</span>
 						</n8n-menu-item>
 
-						<el-submenu index="help" :class="$style['help-menu']" title="Help" popperClass="sidebar-popper">
+						<el-submenu index="help" :class="$style.helpMenu" title="Help" popperClass="sidebar-popper">
 							<template slot="title">
 								<font-awesome-icon icon="question"/>&nbsp;
 								<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.help') }}</span>
@@ -149,22 +149,22 @@
 						<MenuItemsIterator :items="sidebarMenuBottomItems" :root="true"/>
 
 						<div :class="{
-							[$style['footer-menu-items']] : true,
-							[$style['logged-in']]: showUserArea,
+							[$style.footerMenuItems] : true,
+							[$style.loggedIn]: showUserArea,
 						}">
-							<n8n-menu-item index="updates" :class="$style['updates-submenu']" v-if="hasVersionUpdates" @click="openUpdatesPanel">
-								<div :class="$style['gift-container']">
+							<n8n-menu-item index="updates" :class="$style.updatesSubmenu" v-if="hasVersionUpdates" @click="openUpdatesPanel">
+								<div :class="$style.giftContainer">
 									<GiftNotificationIcon />
 								</div>
-								<span slot="title" :class="['item-title-root', $style['updates-label']]">
+								<span slot="title" :class="['item-title-root', $style.updatesLabel]">
 									{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available
 								</span>
 							</n8n-menu-item>
 							<div ref="user" v-if="showUserArea">
-								<n8n-menu-item :class="$style['user-submenu']">
+								<n8n-menu-item :class="$style.userSubmenu">
 									<!-- This dropdown is only enabled when sidebar is collapsed -->
 									<el-dropdown :disabled="!isCollapsed" placement="right-end" trigger="click" @command="onUserActionToggle">
-										<div :class="{[$style['avatar']]: true, ['clickable']: isCollapsed }">
+										<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>
@@ -172,10 +172,10 @@
 											</el-dropdown-menu>
 										</div>
 									</el-dropdown>
-									<div slot="title" :class="['item-title-root', $style['username'] ]" v-if="!isCollapsed">
+									<div slot="title" :class="['item-title-root', $style.username ]" v-if="!isCollapsed">
 										<span>{{currentUser.fullName}}</span>
 										<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle">
-											<div :class="{[$style['user-actions']]: true }">
+											<div :class="{[$style.userActions]: true }">
 												<n8n-icon icon="ellipsis-v" />
 												<el-dropdown-menu slot="dropdown">
 													<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
@@ -422,7 +422,7 @@ export default mixins(
 				}
 			},
 			toggleCollapse () {
-				this.$store.dispatch('ui/toggleSidebarMenuCollapse');
+				this.$store.commit('ui/toggleSidebarMenuCollapse');
 			},
 			clearExecutionData () {
 				this.$store.commit('setWorkflowExecutionData', null);
@@ -698,17 +698,17 @@ export default mixins(
 
 $--n8n-logo-text-color: #101330;
 
-.side-menu {
+.sideMenu {
 	height: 100%;
 }
 
-.side-menu-wrapper {
+.sideMenuWrapper {
 	height: 100%;
 	position: relative;
 	ul { height: 100%; }
 }
 
-.side-menu-collapse-button {
+.sideMenuCollapseButton {
 	position: absolute;
 	right: -10px;
 	top: 50%;
@@ -722,18 +722,18 @@ $--n8n-logo-text-color: #101330;
 	border-radius: 50%;
 
 	&:hover {
-		color: #EA4B71;
+		color: var(--color-primary-shade-1);
 	}
 }
 
-.side-menu-flex-container {
+.sideMenuFlexContainer {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
 	height: 100%;
 }
 
-.logo-item {
+.logoItem {
 	display: flex;
 	justify-content: space-between;
 	height: $--header-height;
@@ -743,7 +743,7 @@ $--n8n-logo-text-color: #101330;
 	* { vertical-align: middle; }
 	.icon { height: 18px; }
 
-	.logo-text {
+	.logoText {
 		position: relative;
 		left: 5px;
 		font-weight: bold;
@@ -752,32 +752,32 @@ $--n8n-logo-text-color: #101330;
 	}
 }
 
-.logo-item--collapsed {
-	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+.logoItemCollapsed {
+	border-bottom: var(--border-base);
 
-	.logo-text { display: none; }
+	.logoText { display: none; }
 }
 
-.footer-menu-items {
+.footerMenuItems {
 	display: flex;
 	flex-grow: 1;
 	flex-direction: column;
 	justify-content: flex-end;
 	padding-bottom: 20px;
 
-	&.logged-in {
+	&.loggedIn {
 		padding-bottom: var(--spacing-m);
 	}
 }
 
-.about-icon {
+.aboutIcon {
 	margin-left: 5px;
 }
 
-.updates-submenu {
+.updatesSubmenu {
 	color: $--sidebar-inactive-color !important;
 
-	.updates-label {
+	.updatesLabel {
 		font-size: var(--font-size-xs);
 		top: 0 !important;
 		left: 13px !important;
@@ -787,7 +787,7 @@ $--n8n-logo-text-color: #101330;
 		color: $--sidebar-active-color;
 	}
 
-	.gift-container {
+	.giftContainer {
 		display: flex;
 		justify-content: flex-start;
 		align-items: center;
@@ -796,7 +796,7 @@ $--n8n-logo-text-color: #101330;
 	}
 }
 
-.user-submenu {
+.userSubmenu {
 	position: relative;
 	border-top: var(--border-width-base) var(--border-style-base) var(--color-foreground-light);
 	cursor: default;
@@ -829,7 +829,7 @@ $--n8n-logo-text-color: #101330;
 		}
 	}
 
-	.user-actions {
+	.userActions {
 		position: relative;
 		left: 10px;
 		cursor: pointer;
@@ -841,7 +841,7 @@ $--n8n-logo-text-color: #101330;
 }
 
 @media screen and (max-height: 470px) {
-	.help-menu { display: none; }
+	.helpMenu { display: none; }
 }
 </style>
 
diff --git a/packages/editor-ui/src/modules/ui.ts b/packages/editor-ui/src/modules/ui.ts
index b993a3fdb26be..255924bbdaac1 100644
--- a/packages/editor-ui/src/modules/ui.ts
+++ b/packages/editor-ui/src/modules/ui.ts
@@ -338,9 +338,6 @@ const module: Module<IUiState, IRootState> = {
 			context.commit('setMode', { name: COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, mode: COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE });
 			context.commit('openModal', COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY);
 		},
-		toggleSidebarMenuCollapse: (context: ActionContext<IUiState, IRootState>): void => {
-			context.commit('toggleSidebarMenuCollapse');
-		},
 	},
 };
 

From 239665b0a1a31a0fc87d1427a464b332d4ca7691 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Tue, 13 Sep 2022 12:27:46 +0200
Subject: [PATCH 11/19] =?UTF-8?q?=E2=9C=A8=20Added=20collapsed=20and=20exp?=
 =?UTF-8?q?anded=20versions=20of=20n8n=20logo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../public/{n8n-icon.svg => n8n-logo-collapsed.svg}  |  0
 packages/editor-ui/public/n8n-logo-expanded.svg      |  6 ++++++
 packages/editor-ui/src/components/MainSidebar.vue    | 12 ++++++++----
 3 files changed, 14 insertions(+), 4 deletions(-)
 rename packages/editor-ui/public/{n8n-icon.svg => n8n-logo-collapsed.svg} (100%)
 create mode 100644 packages/editor-ui/public/n8n-logo-expanded.svg

diff --git a/packages/editor-ui/public/n8n-icon.svg b/packages/editor-ui/public/n8n-logo-collapsed.svg
similarity index 100%
rename from packages/editor-ui/public/n8n-icon.svg
rename to packages/editor-ui/public/n8n-logo-collapsed.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/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index eb9c3ae079f2e..05dba2a8742ec 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -19,8 +19,8 @@
 							:class="{[$style.logoItem]: true, [$style.logoItemCollapsed]: isCollapsed}"
 						>
 							<a href="https://n8n.io" target="_blank" :class="$style['logo-link']">
-								<img :src="basePath + 'n8n-icon.svg'" :class="$style['icon']" alt="n8n"/>
-								<span :class="['logo-text', $style.logoText]" slot="title">n8n</span>
+								<img v-if="isCollapsed" :src="basePath + 'n8n-logo-collapsed.svg'" :class="$style['icon']" alt="n8n"/>
+								<img v-else :src="basePath + 'n8n-logo-expanded.svg'" :class="$style['icon']" alt="n8n"/>
 							</a>
 						</n8n-menu-item>
 
@@ -175,9 +175,9 @@
 									<div slot="title" :class="['item-title-root', $style.username ]" v-if="!isCollapsed">
 										<span>{{currentUser.fullName}}</span>
 										<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle">
-											<div :class="{[$style.userActions]: true }">
+											<div :class="{[$style.userActions]: true, ['user-actions']: true }">
 												<n8n-icon icon="ellipsis-v" />
-												<el-dropdown-menu slot="dropdown">
+												<el-dropdown-menu slot="dropdown" :class="$style.userActionsMenu">
 													<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
 													<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
 												</el-dropdown-menu>
@@ -840,6 +840,10 @@ $--n8n-logo-text-color: #101330;
 	}
 }
 
+.userActionsMenu {
+	margin-left: 25px !important;
+}
+
 @media screen and (max-height: 470px) {
 	.helpMenu { display: none; }
 }

From b1cfbf273329b3ada34e1adf73f50050d6b6094c Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Tue, 13 Sep 2022 12:42:40 +0200
Subject: [PATCH 12/19] =?UTF-8?q?=E2=9C=A8=20Updating=20infinite=20scrolli?=
 =?UTF-8?q?ng=20in=20templates=20view=20to=20work=20with=20the=20new=20lay?=
 =?UTF-8?q?out?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/components/TemplateList.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

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,

From 18b8a0caf5952b93ff02f8e437e7c797ef1a5ce9 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Tue, 13 Sep 2022 16:12:43 +0200
Subject: [PATCH 13/19] =?UTF-8?q?=F0=9F=92=84=20Updating=20main=20sidebar?=
 =?UTF-8?q?=20expanded=20width=20and=20templates=20view=20left=20margin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/components/MainSidebar.vue | 5 +++++
 packages/editor-ui/src/views/TemplatesView.vue    | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 05dba2a8742ec..48c61e151ffe5 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -925,6 +925,7 @@ $--n8n-logo-text-color: #101330;
 	}
 
 	.el-menu-item {
+		min-width: 200px;
 		a {
 			color: var(--color-text-base);
 
@@ -945,4 +946,8 @@ $--n8n-logo-text-color: #101330;
   display: inline-block;
 }
 
+
+.el-menu--collapse .el-menu-item {
+	min-width: auto !important;
+}
 </style>
diff --git a/packages/editor-ui/src/views/TemplatesView.vue b/packages/editor-ui/src/views/TemplatesView.vue
index 9a3a830065389..0251f318ccc1c 100644
--- a/packages/editor-ui/src/views/TemplatesView.vue
+++ b/packages/editor-ui/src/views/TemplatesView.vue
@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.template">
 		<div :class="isMenuCollapsed ? $style.menu : $style.expandedMenu"></div>
-		<div :class="$style.container">
+		<div :class="{[$style.container]: true, [$style.menuCollapsed]: isMenuCollapsed}">
 			<div :class="$style.header">
 				<div :class="$style.goBack" v-if="goBackEnabled">
 					<GoBackButton />
@@ -61,9 +61,11 @@ export default Vue.extend({
 .container {
 	width: 100%;
 	max-width: 1024px;
-	padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-4xl) var(--spacing-3xl);
+	padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-4xl) 0;
 	margin: 0 auto;
 
+	&.menuCollapsed { padding-left: var(--spacing-3xl); }
+
 	@media (max-width: $--breakpoint-md) {
 		width: 900px;
 	}

From cafe8060551f1b954e6a36b1018e1dba162e34ea Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Tue, 13 Sep 2022 16:27:20 +0200
Subject: [PATCH 14/19] =?UTF-8?q?=F0=9F=92=84=20Updating=20main=20content?=
 =?UTF-8?q?=20height?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 0449c70a75190..93bb61866240b 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -203,7 +203,7 @@ export default mixins(
 .content {
 	grid-area: content;
 	overflow: auto;
-	height: calc(100vh - $--header-height);
+	height: 100vh;
 }
 
 .header {

From 7ae465802967d2ffb60543a2fdd2e35157f40011 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Tue, 13 Sep 2022 17:07:29 +0200
Subject: [PATCH 15/19] =?UTF-8?q?=F0=9F=92=84=20Adding=20global=20styles?=
 =?UTF-8?q?=20for=20scrollable=20views=20with=20centered=20content,=20mino?=
 =?UTF-8?q?r=20updates=20to=20user=20area?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/App.vue                   | 16 +++++++++++++++-
 .../editor-ui/src/components/MainSidebar.vue     |  6 +++---
 packages/editor-ui/src/views/TemplatesView.vue   |  6 +-----
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 93bb61866240b..f01949321e3b1 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.app">
+	<div :class="{[$style.app]: true, ['root-container']: true, ['menu-collapsed']: sidebarMenuCollapsed}">
 		<LoadingView v-if="loading" />
 		<div
 			v-else
@@ -218,3 +218,17 @@ export default mixins(
 }
 </style>
 
+<style lang="scss">
+.root-container {
+	.centered-content {
+		padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-4xl) 0;
+	}
+}
+
+.root-container.menu-collapsed {
+	.centered-content {
+		padding-left: var(--spacing-3xl);
+	}
+}
+
+</style>
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 48c61e151ffe5..7fea7312d01df 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -813,8 +813,8 @@ $--n8n-logo-text-color: #101330;
 	}
 
 	.username {
-		display: flex;
-		width: 60%;
+		display: flex !important;
+		width: 80%;
 		left: 8px !important;
 		justify-content: space-between;
 		color: var(--color-text-base);
@@ -823,7 +823,7 @@ $--n8n-logo-text-color: #101330;
 		cursor: default;
 
 		span {
-			max-width: 130px;
+			max-width: 100px;
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
diff --git a/packages/editor-ui/src/views/TemplatesView.vue b/packages/editor-ui/src/views/TemplatesView.vue
index 0251f318ccc1c..af466f4a48bff 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.template]: true, ['centered-content']: true}">
 		<div :class="{[$style.container]: true, [$style.menuCollapsed]: isMenuCollapsed}">
 			<div :class="$style.header">
 				<div :class="$style.goBack" v-if="goBackEnabled">
@@ -61,11 +60,8 @@ export default Vue.extend({
 .container {
 	width: 100%;
 	max-width: 1024px;
-	padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-4xl) 0;
 	margin: 0 auto;
 
-	&.menuCollapsed { padding-left: var(--spacing-3xl); }
-
 	@media (max-width: $--breakpoint-md) {
 		width: 900px;
 	}

From a4b597b4018f6e27792213d25fa2d8de21ab665d Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Wed, 14 Sep 2022 13:21:50 +0200
Subject: [PATCH 16/19] =?UTF-8?q?=E2=9C=A8=20Updating=20zoomToFit=20logic,?=
 =?UTF-8?q?=20lasso=20select=20box=20position=20and=20new=20nodes=20positi?=
 =?UTF-8?q?oning?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/components/MainSidebar.vue  | 14 +++++++++++---
 .../editor-ui/src/components/mixins/mouseSelect.ts |  5 +++--
 packages/editor-ui/src/views/NodeView.vue          |  8 ++++++--
 packages/editor-ui/src/views/canvasHelpers.ts      | 11 ++++++-----
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 7fea7312d01df..ac376508d4300 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -8,8 +8,8 @@
 				:class="['clickable', $style.sideMenuCollapseButton]"
 				@click="toggleCollapse"
 			>
-				<font-awesome-icon v-if="isCollapsed" icon="angle-right" :class="$style['icon-collapsed']" />
-				<font-awesome-icon v-else icon="angle-left" :class="$style['icon-expanded']" />
+				<font-awesome-icon v-if="isCollapsed" icon="angle-right" :class="$style.iconCollapsed" />
+				<font-awesome-icon v-else icon="angle-left" :class="$style.iconExpanded" />
 			</div>
 			<n8n-menu default-active="workflow" @select="handleSelect" :collapse="isCollapsed">
 				<div :class="$style.sideMenuFlexContainer">
@@ -721,6 +721,14 @@ $--n8n-logo-text-color: #101330;
 	text-align: center;
 	border-radius: 50%;
 
+	svg {
+		position: relative;
+		top: .5px;
+	}
+
+	.iconCollapsed { left: .5px; }
+	.iconExpanded { left: -.5px; }
+
 	&:hover {
 		color: var(--color-primary-shade-1);
 	}
@@ -823,7 +831,7 @@ $--n8n-logo-text-color: #101330;
 		cursor: default;
 
 		span {
-			max-width: 100px;
+			width: 100px;
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
diff --git a/packages/editor-ui/src/components/mixins/mouseSelect.ts b/packages/editor-ui/src/components/mixins/mouseSelect.ts
index dbe6890a48446..f15dae838b345 100644
--- a/packages/editor-ui/src/components/mixins/mouseSelect.ts
+++ b/packages/editor-ui/src/components/mixins/mouseSelect.ts
@@ -3,7 +3,7 @@ import { INodeUi, XYPosition } from '@/Interface';
 import mixins from 'vue-typed-mixins';
 
 import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers';
-import { getMousePosition, getRelativePosition } from '@/views/canvasHelpers';
+import { getMousePosition, getRelativePosition, HEADER_HEIGHT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_EXPANDED } from '@/views/canvasHelpers';
 
 export const mouseSelect = mixins(
 	deviceSupportHelpers,
@@ -43,8 +43,9 @@ export const mouseSelect = mixins(
 		},
 		getMousePositionWithinNodeView (event: MouseEvent | TouchEvent): XYPosition {
 			const [x, y] = getMousePosition(event);
+			const sidebarOffset = this.$store.getters['ui/sidebarMenuCollapsed'] ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_EXPANDED;
 			// @ts-ignore
-			return getRelativePosition(x, y, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition);
+			return getRelativePosition(x - sidebarOffset, y - HEADER_HEIGHT, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition);
 		},
 		showSelectBox (event: MouseEvent) {
 			const [x, y] = this.getMousePositionWithinNodeView(event);
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 4623b9a1d8967..4177cf07856d9 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1176,7 +1176,7 @@ export default mixins(
 					return;
 				}
 
-				const {zoomLevel, offset} = CanvasHelpers.getZoomToFit(nodes, !this.isDemo);
+				const {zoomLevel, offset} = CanvasHelpers.getZoomToFit(nodes, this.sidebarMenuCollapsed, !this.isDemo);
 
 				this.setZoomLevel(zoomLevel);
 				this.$store.commit('setNodeViewOffsetPosition', {newOffset: offset});
@@ -1468,9 +1468,13 @@ export default mixins(
 				const nodeTypeName = event.dataTransfer.getData('nodeTypeName');
 				if (nodeTypeName) {
 					const mousePosition = this.getMousePositionWithinNodeView(event);
+					const sidebarOffset = this.sidebarMenuCollapsed ? CanvasHelpers.SIDEBAR_WIDTH : CanvasHelpers.SIDEBAR_WIDTH_EXPANDED;
 
 					this.addNodeButton(nodeTypeName, {
-						position: [mousePosition[0] - CanvasHelpers.NODE_SIZE / 2, mousePosition[1] - CanvasHelpers.NODE_SIZE / 2],
+						position: [
+							mousePosition[0] - CanvasHelpers.NODE_SIZE / 2 - sidebarOffset,
+							mousePosition[1] - CanvasHelpers.NODE_SIZE / 2 - CanvasHelpers.HEADER_HEIGHT,
+						],
 						dragAndDrop: true,
 					});
 					this.createNodeActive = false;
diff --git a/packages/editor-ui/src/views/canvasHelpers.ts b/packages/editor-ui/src/views/canvasHelpers.ts
index 47893dd124d86..6d5c73aa5fd98 100644
--- a/packages/editor-ui/src/views/canvasHelpers.ts
+++ b/packages/editor-ui/src/views/canvasHelpers.ts
@@ -28,10 +28,11 @@ const MIN_X_TO_SHOW_OUTPUT_LABEL = 90;
 const MIN_Y_TO_SHOW_OUTPUT_LABEL = 100;
 
 export const NODE_SIZE = 100;
-export const DEFAULT_START_POSITION_X = 240;
-export const DEFAULT_START_POSITION_Y = 300;
+export const DEFAULT_START_POSITION_X = 175;
+export const DEFAULT_START_POSITION_Y = 235;
 export const HEADER_HEIGHT = 65;
 export const SIDEBAR_WIDTH = 65;
+export const SIDEBAR_WIDTH_EXPANDED = 200;
 export const MAX_X_TO_PUSH_DOWNSTREAM_NODES = 300;
 export const PUSH_NODES_OFFSET = NODE_SIZE * 2 + GRID_SIZE;
 const LOOPBACK_MINIMUM = 140;
@@ -612,9 +613,9 @@ export const addConnectionOutputSuccess = (connection: Connection, output: {tota
 };
 
 
-export const getZoomToFit = (nodes: INodeUi[], addComponentPadding = true): {offset: XYPosition, zoomLevel: number} => {
+export const getZoomToFit = (nodes: INodeUi[], isSidebarCollapsed: boolean, addComponentPadding = true): {offset: XYPosition, zoomLevel: number} => {
 	const {minX, minY, maxX, maxY} = getWorkflowCorners(nodes);
-	const sidebarWidth = addComponentPadding? SIDEBAR_WIDTH: 0;
+	const sidebarWidth = addComponentPadding? isSidebarCollapsed ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_EXPANDED : 0;
 	const headerHeight = addComponentPadding? HEADER_HEIGHT: 0;
 	const footerHeight = addComponentPadding? 200: 100;
 
@@ -637,7 +638,7 @@ export const getZoomToFit = (nodes: INodeUi[], addComponentPadding = true): {off
 
 	return {
 		zoomLevel,
-		offset: [xOffset, yOffset],
+		offset: [xOffset - sidebarWidth, yOffset - headerHeight],
 	};
 };
 

From fd0dc1eeb01105b4b7fbe16624078b411030d7cd Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Wed, 14 Sep 2022 14:16:16 +0200
Subject: [PATCH 17/19] =?UTF-8?q?=E2=9C=A8=20Fixing=20new=20node=20drop=20?=
 =?UTF-8?q?position=20now=20that=20mouse=20detection=20has=20been=20adjust?=
 =?UTF-8?q?ed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/views/NodeView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 4177cf07856d9..6ece3b66e6965 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1472,8 +1472,8 @@ export default mixins(
 
 					this.addNodeButton(nodeTypeName, {
 						position: [
-							mousePosition[0] - CanvasHelpers.NODE_SIZE / 2 - sidebarOffset,
-							mousePosition[1] - CanvasHelpers.NODE_SIZE / 2 - CanvasHelpers.HEADER_HEIGHT,
+							mousePosition[0] - CanvasHelpers.NODE_SIZE / 2,
+							mousePosition[1] - CanvasHelpers.NODE_SIZE / 2,
 						],
 						dragAndDrop: true,
 					});

From 8e7ea9d7180af811cb705ce8cecdfab7689aed8c Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Wed, 14 Sep 2022 15:57:46 +0200
Subject: [PATCH 18/19] =?UTF-8?q?=F0=9F=91=8C=20Updating=20templates=20vie?=
 =?UTF-8?q?w=20scroll=20to=20top=20logic=20and=20responsive=20padding,=20a?=
 =?UTF-8?q?ligning=20menu=20items=20titles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/App.vue                    | 13 ++-----------
 packages/editor-ui/src/components/MainSidebar.vue | 15 ++++++++-------
 .../src/views/TemplatesCollectionView.vue         | 11 +++++++----
 .../editor-ui/src/views/TemplatesSearchView.vue   | 11 +++++++----
 .../editor-ui/src/views/TemplatesWorkflowView.vue | 10 +++++++---
 5 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index f01949321e3b1..7f681006f9310 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -219,16 +219,7 @@ export default mixins(
 </style>
 
 <style lang="scss">
-.root-container {
-	.centered-content {
-		padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-4xl) 0;
-	}
+.centered-content {
+	padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-4xl) var(--spacing-xl);
 }
-
-.root-container.menu-collapsed {
-	.centered-content {
-		padding-left: var(--spacing-3xl);
-	}
-}
-
 </style>
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index ac376508d4300..dec10e14704e5 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -786,9 +786,10 @@ $--n8n-logo-text-color: #101330;
 	color: $--sidebar-inactive-color !important;
 
 	.updatesLabel {
+		position: relative !important;
 		font-size: var(--font-size-xs);
 		top: 0 !important;
-		left: 13px !important;
+		left: -2px !important;
 	}
 
 	&:hover {
@@ -821,9 +822,10 @@ $--n8n-logo-text-color: #101330;
 	}
 
 	.username {
+		position: relative !important;
 		display: flex !important;
-		width: 80%;
-		left: 8px !important;
+		width: 68%;
+		left: 13px !important;
 		justify-content: space-between;
 		color: var(--color-text-base);
 		font-weight: var(--font-weight-bold);
@@ -917,10 +919,9 @@ $--n8n-logo-text-color: #101330;
 				font-size: var(--font-size-s);
 			}
 			.item-title-root {
-				display: block;
-				margin-right: 25px;
-				position: relative;
-				left: 20px;
+				position: absolute;
+				left: 60px;
+				top: 1px;
 			}
 		}
 
diff --git a/packages/editor-ui/src/views/TemplatesCollectionView.vue b/packages/editor-ui/src/views/TemplatesCollectionView.vue
index 42c40b5612aac..5fe7df5843544 100644
--- a/packages/editor-ui/src/views/TemplatesCollectionView.vue
+++ b/packages/editor-ui/src/views/TemplatesCollectionView.vue
@@ -96,10 +96,13 @@ export default mixins(workflowHelpers).extend({
 	methods: {
 		scrollToTop() {
 			setTimeout(() => {
-				window.scrollTo({
-					top: 0,
-					behavior: 'smooth',
-				});
+				const contentArea = document.getElementById('content');
+				if (contentArea) {
+					contentArea.scrollTo({
+						top: 0,
+						behavior: 'smooth',
+					});
+				}
 			}, 50);
 		},
 		onOpenTemplate({event, id}: {event: MouseEvent, id: string}) {
diff --git a/packages/editor-ui/src/views/TemplatesSearchView.vue b/packages/editor-ui/src/views/TemplatesSearchView.vue
index ba2b24f40fb72..f37e82ba21357 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@@ -321,10 +321,13 @@ export default mixins(genericHelpers).extend({
 		},
 		scrollToTop() {
 			setTimeout(() => {
-				window.scrollTo({
-					top: 0,
-					behavior: 'smooth',
-				});
+				const contentArea = document.getElementById('content');
+				if (contentArea) {
+					contentArea.scrollTo({
+						top: 0,
+						behavior: 'smooth',
+					});
+				}
 			}, 100);
 		},
 	},
diff --git a/packages/editor-ui/src/views/TemplatesWorkflowView.vue b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
index 271144534c832..32a74cbd0c05b 100644
--- a/packages/editor-ui/src/views/TemplatesWorkflowView.vue
+++ b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
@@ -110,9 +110,13 @@ export default mixins(workflowHelpers).extend({
 			this.showPreview = false;
 		},
 		scrollToTop() {
-			window.scrollTo({
-				top: 0,
-			});
+			const contentArea = document.getElementById('content');
+
+			if (contentArea) {
+				contentArea.scrollTo({
+					top: 0,
+				});
+			}
 		},
 	},
 	watch: {

From e49fcc85fcb7180fdbbdb9c92523789357b4970b Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 15 Sep 2022 09:53:14 +0200
Subject: [PATCH 19/19] =?UTF-8?q?=F0=9F=92=84=20Moving=20template=20layout?=
 =?UTF-8?q?=20style=20from=20global=20css=20class=20to=20component=20level?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/App.vue                 |  6 ------
 packages/editor-ui/src/views/TemplatesView.vue | 10 ++++++----
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 39325606595a2..09a06b373851d 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -219,9 +219,3 @@ export default mixins(
 	z-index: 999;
 }
 </style>
-
-<style lang="scss">
-.centered-content {
-	padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-4xl) var(--spacing-xl);
-}
-</style>
diff --git a/packages/editor-ui/src/views/TemplatesView.vue b/packages/editor-ui/src/views/TemplatesView.vue
index af466f4a48bff..f3522655fa012 100644
--- a/packages/editor-ui/src/views/TemplatesView.vue
+++ b/packages/editor-ui/src/views/TemplatesView.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="{[$style.template]: true, ['centered-content']: true}">
+	<div :class="$style.template">
 		<div :class="{[$style.container]: true, [$style.menuCollapsed]: isMenuCollapsed}">
 			<div :class="$style.header">
 				<div :class="$style.goBack" v-if="goBackEnabled">
@@ -38,6 +38,11 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" module>
+.template {
+	display: flex;
+	padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-4xl) var(--spacing-xl);
+}
+
 .mockMenu {
 	height: 100%;
 	min-height: 100vh;
@@ -53,9 +58,6 @@ export default Vue.extend({
 	min-width: $--sidebar-expanded-width;
 }
 
-.template {
-	display: flex;
-}
 
 .container {
 	width: 100%;