feat(editor): Main navigation redesign (#4144)

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

* ✨ Implemented new editor layout using css grid

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

* ✨ Reworking main sidebar layout and responsiveness

* 💄 Minor type update

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

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

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

* 💄 CSS cleanup/refactor + minor vue refactoring

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

* 👌 Addressing review feedback

* ✨ Added collapsed and expanded versions of n8n logo

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

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

* 💄 Updating main content height

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

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

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

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

* 💄 Moving template layout style from global css class to component level

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

* 💄 Updating disabled states in new WF menu

* 💄 Initial stab at new sidebar styling

* ✨ Finished main navigation restyling

* ✨ Updating `zoomToFit` and centering logic

* ✨ Adding updates menu item to settings sidebar

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

* 💄 Removing old code & refactoring

* 💄 Minor CSS tweaks

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

* 💄 Updating sidebar expand/collapse animation

* 💄 Few more refinements of sidebar animation

* 👌 Addressing code review comments

* ✨ Moved ActionDropdown component to design system

* 👌 Fixing bugs reported during code review and testing

* 👌 Addressing design review comments for the new sidebar

* ✔️ Updating `N8nActionDropdown` component tests

* ✨ Remembering scroll position when going back to templates list

* ✨ Updating zoomToFit logic to account for footer content

* 👌 Addressing latest sidebar review comments

* 👌 Addressing main sidebar product review comments

* 💄 Updating css variable names after vite merge

* ✔️ Fixing linting errors in the design system

* ✔️ Fixing `element-ui` type import

* 👌 Addressing the code review comments.

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

* 💄 Updating credentials view responsiveness and route highlight handling

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

* 💄 Updated active submenu text color

packages/editor-ui/src/views/NodeView.vue

@@ -307,11 +307,11 @@ export default mixins(
 			const result = this.$store.getters.getStateIsDirty;
 			if(result) {
 				const confirmModal = await this.confirmModal(
-					this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.message'),
-					this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.headline'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
 					'warning',
-					this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.confirmButtonText'),
-					this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.cancelButtonText'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
 					true,
 				);
 
@@ -1470,9 +1470,13 @@ export default mixins(
 				const nodeTypeName = event.dataTransfer.getData('nodeTypeName');
 				if (nodeTypeName) {
 					const mousePosition = this.getMousePositionWithinNodeView(event);
+					const sidebarOffset = this.sidebarMenuCollapsed ? CanvasHelpers.SIDEBAR_WIDTH : CanvasHelpers.SIDEBAR_WIDTH_EXPANDED;
 
 					this.addNodeButton(nodeTypeName, {
-						position: [mousePosition[0] - CanvasHelpers.NODE_SIZE / 2, mousePosition[1] - CanvasHelpers.NODE_SIZE / 2],
+						position: [
+							mousePosition[0] - CanvasHelpers.NODE_SIZE / 2,
+							mousePosition[1] - CanvasHelpers.NODE_SIZE / 2,
+						],
 						dragAndDrop: true,
 					});
 					this.createNodeActive = false;
@@ -3210,7 +3214,7 @@ export default mixins(
 <style scoped lang="scss">
 
 .zoom-menu {
-	$--zoom-menu-margin: 5;
+	$--zoom-menu-margin: 15;
 
 	position: fixed;
 	left: $sidebar-width + $--zoom-menu-margin;
@@ -3288,19 +3292,14 @@ export default mixins(
 }
 
 .node-view-root {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	left: 0;
-	top: 0;
 	overflow: hidden;
 	background-color: var(--color-canvas-background);
+	width: 100%;
+	height: 100%;
 }
 
 .node-view-wrapper {
 	position: fixed;
-	width: 100%;
-	height: 100%;
 }
 
 .node-view {
@@ -3308,6 +3307,7 @@ export default mixins(
 	width: 100%;
 	height: 100%;
 	transform-origin: 0 0;
+	z-index: -1;
 }
 
 .node-view-background {
@@ -3315,6 +3315,7 @@ export default mixins(
 	position: absolute;
 	width: 10000px;
 	height: 10000px;
+	z-index: -2;
 }
 
 .move-active {

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}) {

packages/editor-ui/src/views/TemplatesSearchView.vue

@@ -320,23 +320,34 @@ export default mixins(genericHelpers, debounceHelper).extend({
 				this.updateSearchTracking(search, categories);
 			}
 		},
-		scrollToTop() {
+		scrollTo(position: number, behavior: ScrollBehavior = 'smooth') {
 			setTimeout(() => {
-				window.scrollTo({
-					top: 0,
-					behavior: 'smooth',
-				});
-			}, 100);
+				const contentArea = document.getElementById('content');
+				if (contentArea) {
+					contentArea.scrollTo({
+						top: position,
+						behavior,
+					});
+				}
+			}, 0);
 		},
 	},
 	watch: {
 		workflows(newWorkflows) {
 			if (newWorkflows.length === 0) {
-				this.scrollToTop();
+				this.scrollTo(0);
 			}
 		},
 	},
 	beforeRouteLeave(to, from, next) {
+		const contentArea = document.getElementById('content');
+		if (contentArea) {
+			// When leaving this page, store current scroll position in route data
+			if (this.$route.meta && this.$route.meta.setScrollPosition && typeof this.$route.meta.setScrollPosition === 'function') {
+				this.$route.meta.setScrollPosition(contentArea.scrollTop);
+			}
+		}
+
 		this.trackSearch();
 		next();
 	},
@@ -345,6 +356,13 @@ export default mixins(genericHelpers, debounceHelper).extend({
 		this.loadCategories();
 		this.loadWorkflowsAndCollections(true);
 		this.$store.dispatch('users/showPersonalizationSurvey');
+
+		setTimeout(() => {
+			// Check if there is scroll position saved in route and scroll to it
+			if (this.$route.meta && this.$route.meta.scrollOffset > 0) {
+				this.scrollTo(this.$route.meta.scrollOffset, 'auto');
+			}
+		}, 100);
 	},
 	async created() {
 		if (this.$route.query.search && typeof this.$route.query.search === 'string') {

packages/editor-ui/src/views/TemplatesView.vue

@@ -1,6 +1,5 @@
 <template>
 	<div :class="$style.template">
-		<div :class="isMenuCollapsed ? $style.menu : $style.expandedMenu"></div>
 		<div :class="$style.container">
 			<div :class="$style.header">
 				<div :class="$style.goBack" v-if="goBackEnabled">
@@ -30,38 +29,18 @@ export default Vue.extend({
 			default: false,
 		},
 	},
-	computed: {
-		isMenuCollapsed(): boolean {
-			return this.$store.getters['ui/sidebarMenuCollapsed'];
-		},
-	},
 });
 </script>
 
 <style lang="scss" module>
-.mockMenu {
-	height: 100%;
-	min-height: 100vh;
-}
-
-.menu {
-	composes: mockMenu;
-	min-width: $sidebar-width;
-}
-
-.expandedMenu {
-	composes: mockMenu;
-	min-width: $sidebar-expanded-width;
-}
-
 .template {
 	display: flex;
+	padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-4xl) var(--spacing-xl);
 }
 
 .container {
 	width: 100%;
 	max-width: 1024px;
-	padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-4xl) var(--spacing-3xl);
 	margin: 0 auto;
 
 	@media (max-width: $breakpoint-md) {

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: {

packages/editor-ui/src/views/canvasHelpers.ts

@@ -28,10 +28,11 @@ const MIN_X_TO_SHOW_OUTPUT_LABEL = 90;
 const MIN_Y_TO_SHOW_OUTPUT_LABEL = 100;
 
 export const NODE_SIZE = 100;
-export const DEFAULT_START_POSITION_X = 240;
-export const DEFAULT_START_POSITION_Y = 300;
+export const DEFAULT_START_POSITION_X = 175;
+export const DEFAULT_START_POSITION_Y = 235;
 export const HEADER_HEIGHT = 65;
 export const SIDEBAR_WIDTH = 65;
+export const SIDEBAR_WIDTH_EXPANDED = 200;
 export const MAX_X_TO_PUSH_DOWNSTREAM_NODES = 300;
 export const PUSH_NODES_OFFSET = NODE_SIZE * 2 + GRID_SIZE;
 const LOOPBACK_MINIMUM = 140;
@@ -476,7 +477,8 @@ export const getRelativePosition = (x: number, y: number, scale: number, offset:
 };
 
 export const getMidCanvasPosition = (scale: number, offset: XYPosition): XYPosition => {
-	return getRelativePosition((window.innerWidth - SIDEBAR_WIDTH) / 2, (window.innerHeight - HEADER_HEIGHT) / 2, scale, offset);
+	const { editorWidth, editorHeight } = getContentDimensions();
+	return getRelativePosition((editorWidth - SIDEBAR_WIDTH) / 2, (editorHeight - HEADER_HEIGHT) / 2, scale, offset);
 };
 
 export const getBackgroundStyles = (scale: number, offsetPosition: XYPosition) => {
@@ -612,24 +614,40 @@ export const addConnectionOutputSuccess = (connection: Connection, output: {tota
 };
 
 
+const getContentDimensions = (): { editorWidth: number, editorHeight: number } => {
+	let contentWidth = window.innerWidth;
+	let contentHeight = window.innerHeight;
+	const contentElement = document.getElementById('content');
+
+	if (contentElement) {
+		const contentBounds = contentElement.getBoundingClientRect();
+		contentWidth = contentBounds.width;
+		contentHeight = contentBounds.height;
+	}
+	return {
+		editorWidth: contentWidth,
+		editorHeight: contentHeight,
+	};
+};
+
 export const getZoomToFit = (nodes: INodeUi[], addComponentPadding = true): {offset: XYPosition, zoomLevel: number} => {
 	const {minX, minY, maxX, maxY} = getWorkflowCorners(nodes);
-	const sidebarWidth = addComponentPadding? SIDEBAR_WIDTH: 0;
-	const headerHeight = addComponentPadding? HEADER_HEIGHT: 0;
-	const footerHeight = addComponentPadding? 200: 100;
+	const { editorWidth, editorHeight } = getContentDimensions();
+	const sidebarWidth = addComponentPadding ? SIDEBAR_WIDTH : 0;
+	const headerHeight = addComponentPadding ? HEADER_HEIGHT: 0;
+	const footerHeight = addComponentPadding ? 200 : 100;
 
 	const PADDING = NODE_SIZE * 4;
 
-	const editorWidth = window.innerWidth;
 	const diffX = maxX - minX + sidebarWidth + PADDING;
 	const scaleX = editorWidth / diffX;
 
-	const editorHeight = window.innerHeight;
-	const diffY = maxY - minY + headerHeight + PADDING;
+	const diffY = maxY - minY + PADDING;
 	const scaleY = editorHeight / diffY;
 
 	const zoomLevel = Math.min(scaleX, scaleY, 1);
-	let xOffset = (minX * -1) * zoomLevel + sidebarWidth; // find top right corner
+
+	let xOffset = (minX * -1) * zoomLevel; // find top right corner
 	xOffset += (editorWidth - sidebarWidth - (maxX - minX) * zoomLevel) / 2; // add padding to center workflow
 
 	let yOffset = (minY * -1) * zoomLevel + headerHeight; // find top right corner
@@ -637,7 +655,7 @@ export const getZoomToFit = (nodes: INodeUi[], addComponentPadding = true): {off
 
 	return {
 		zoomLevel,
-		offset: [xOffset, yOffset],
+		offset: [xOffset, yOffset - headerHeight],
 	};
 };