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/App.vue

@@ -1,14 +1,21 @@
 <template>
-	<div :class="$style.container">
+	<div :class="[$style.app, 'root-container']">
 		<LoadingView v-if="loading" />
-		<div v-else id="app" :class="$style.container">
-			<div id="header" :class="$style.header">
+		<div
+			v-else
+			id="app"
+			:class="{
+				[$style.container]: true,
+				[$style.sidebarCollapsed]: sidebarMenuCollapsed
+			}"
+		>
+			<div id="header" :class="$style['header']">
 				<router-view name="header"></router-view>
 			</div>
-			<div id="sidebar" :class="$style.sidebar">
+			<div id="sidebar" :class="$style['sidebar']">
 				<router-view name="sidebar"></router-view>
 			</div>
-			<div id="content" :class="$style.content">
+			<div id="content" :class="$style['content']">
 				<router-view />
 			</div>
 			<Modals />
@@ -47,6 +54,7 @@ export default mixins(
 	computed: {
 		...mapGetters('settings', ['isHiringBannerEnabled', 'isTemplatesEnabled', 'isTemplatesEndpointReachable', 'isUserManagementEnabled', 'showSetupPage']),
 		...mapGetters('users', ['currentUser']),
+		...mapGetters('ui', ['sidebarMenuCollapsed']),
 		defaultLocale (): string {
 			return this.$store.getters.defaultLocale;
 		},
@@ -180,26 +188,34 @@ export default mixins(
 </script>
 
 <style lang="scss" module>
+.app {
+	height: 100vh;
+	overflow: hidden;
+}
+
 .container {
-	height: 100%;
-	width: 100%;
+	display: grid;
+  grid-template-areas:
+    "sidebar header"
+    "sidebar content";
+  grid-auto-columns: fit-content($sidebar-expanded-width) 1fr;
+  grid-template-rows: fit-content($sidebar-width) 1fr;
 }
 
 .content {
-	composes: container;
-	background-color: var(--color-background-light);
-	position: relative;
+	grid-area: content;
+	overflow: auto;
+	height: 100vh;
 }
 
 .header {
-	z-index: 10;
-	position: fixed;
-	width: 100%;
+	grid-area: header;
+	z-index: 999;
 }
 
 .sidebar {
-	z-index: 15;
-	position: fixed;
+	grid-area: sidebar;
+	height: 100vh;
+	z-index: 999;
 }
 </style>
-