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

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,35 @@ export default mixins(
 </script>
 
 <style lang="scss" module>
+.app {
+	position: fixed;
+	height: 100vh;
+	width: 100%;
+	overflow: hidden;
+}
+
 .container {
+	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;
 	height: 100%;
-	width: 100%;
 }
 
 .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>
 

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 {