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/components/SettingsSidebar.vue

@@ -5,7 +5,7 @@
 				<i :class="$style.icon">
 					<font-awesome-icon icon="arrow-left" />
 				</i>
-				<n8n-heading slot="title" size="large" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
+				<n8n-heading slot="title" size="large" :class="$style.settingsHeading" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
 			</div>
 			<n8n-menu-item index="/settings/personal" v-if="canAccessPersonalSettings()" :class="$style.tab">
 				<i :class="$style.icon">
@@ -13,13 +13,13 @@
 				</i>
 				<span slot="title">{{ $locale.baseText('settings.personal') }}</span>
 			</n8n-menu-item>
-			<n8n-menu-item index="/settings/users" v-if="canAccessUsersSettings()" :class="$style.tab">
+			<n8n-menu-item index="/settings/users" v-if="canAccessUsersSettings()" :class="[$style.tab, $style.usersMenu]">
 				<i :class="$style.icon">
 					<font-awesome-icon icon="user-friends" />
 				</i>
 				<span slot="title">{{ $locale.baseText('settings.users') }}</span>
 			</n8n-menu-item>
-			<n8n-menu-item index="/settings/api" v-if="canAccessApiSettings()" :class="$style.tab">
+			<n8n-menu-item index="/settings/api" v-if="canAccessApiSettings()" :class="[$style.tab, $style.apiMenu]">
 				<i :class="$style.icon">
 					<font-awesome-icon icon="plug" />
 				</i>
@@ -54,14 +54,18 @@
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
 import { mapGetters } from 'vuex';
-import { ABOUT_MODAL_KEY, VIEWS } from '@/constants';
+import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
 import { userHelpers } from './mixins/userHelpers';
 import { IFakeDoor } from '@/Interface';
+import GiftNotificationIcon from './GiftNotificationIcon.vue';
 
 export default mixins(
 	userHelpers,
 ).extend({
 	name: 'SettingsSidebar',
+	components: {
+		GiftNotificationIcon,
+	},
 	computed: {
 		...mapGetters('settings', ['versionCli']),
 		settingsFakeDoorFeatures(): IFakeDoor[] {
@@ -87,27 +91,51 @@ export default mixins(
 		onReturn() {
 			this.$router.push({name: VIEWS.HOMEPAGE});
 		},
+		openUpdatesPanel() {
+			this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
+		},
 	},
 });
 </script>
 
 <style lang="scss" module>
+:global(.el-menu) {
+	--menu-item-height: 35px;
+	--submenu-item-height: 27px;
+}
+
 .container {
 	min-width: 200px;
 	height: 100%;
 	background-color: var(--color-background-xlight);
 	border-right: var(--border-base);
 	position: relative;
-	padding: var(--spacing-s);
+	padding: var(--spacing-xs);
+	overflow: auto;
+
+	ul {
+		height: 100%;
+	}
+
+	:global(.el-menu-item) > span{
+		position: relative;
+		left: 8px;
+	}
+}
+
+.settingsHeading {
+	position: relative;
+	left: 8px;
 }
 
 .tab {
 	margin-bottom: var(--spacing-2xs);
+	svg:global(.svg-inline--fa) { position: relative; }
 }
 
 .returnButton {
 	composes: tab;
-	margin-bottom: var(--spacing-xl);
+	margin-bottom: var(--spacing-l);
 	padding: 0 var(--spacing-xs);
 	height: 38px;
 	display: flex;
@@ -125,6 +153,9 @@ export default mixins(
 	}
 }
 
+.usersMenu svg { left: -2px; }
+.apiMenu svg { left: 2px; }
+
 .icon {
 	width: 16px;
 	display: inline-flex;
@@ -133,7 +164,11 @@ export default mixins(
 
 .versionContainer {
 	position: absolute;
-	left: 20px;
+	left: 23px;
 	bottom: 20px;
 }
+
+@media screen and (max-height: 420px) {
+	.updatesSubmenu, .versionContainer { display: none; }
+}
 </style>