feat(editor): updated n8n-menu component (#4290)

* 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

* ✨ New `n8n-menu-item` component

* ✨ Implemented new `n8n-menu` design system component, updated menu items to support collapsed mode

* Minor update to n8n-menu storybook entry

* 💄 Updating collapsed sub-menu style. Fixing vue error on hover.

* ⚡ Changing IMenuItem from interface to type

* ✨ Added new n8n-menu component to editor main sidebar

* ⚡ Finished main sidebar

* ⚡ Added new menus to setttings and credentials view

* ✨ Implemented tab and router modes for n8n-menu

* ✨ Implemented credentials menus using new n8n-menu component

* 💄 Finishing main and settings sidebar details, updating design system stories

* 💄 Adding injected items support to main sidebar, handling navigation errors, small tweaks

* ✔️ Fixing linting errors

* ✔️ Addressing typescript errors in design system components

* ⚡ Using design-system types in editor UI

* 💄 Add support for custom icon size in menu items

* 👌 Addressing code review and design review feedback

* 💄 Minor updates

packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue

@@ -49,34 +49,7 @@
 		<template slot="content">
 			<div :class="$style.container">
 				<div :class="$style.sidebar">
-					<n8n-menu
-						type="secondary"
-						@select="onTabSelect"
-						defaultActive="connection"
-						:light="true"
-					>
-						<n8n-menu-item index="connection">
-							<span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.connection') }}</span>
-						</n8n-menu-item>
-						<enterprise-edition v-if="credentialType" :features="[EnterpriseEditionFeature.Sharing]">
-							<n8n-menu-item index="sharing">
-								<span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.sharing') }}</span>
-							</n8n-menu-item>
-							<template #fallback>
-								<n8n-menu-item
-									v-for="fakeDoor in credentialsFakeDoorFeatures"
-									v-bind:key="fakeDoor.featureName"
-									:index="`coming-soon/${fakeDoor.id}`"
-									:class="$style.tab"
-								>
-									<span slot="title">{{ $locale.baseText(fakeDoor.featureName) }}</span>
-								</n8n-menu-item>
-							</template>
-						</enterprise-edition>
-						<n8n-menu-item v-if="credentialType" index="details">
-							<span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.details') }}</span>
-						</n8n-menu-item>
-					</n8n-menu>
+					<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect" ></n8n-menu>
 				</div>
 				<div v-if="activeTab === 'connection'" :class="$style.mainContent" ref="content">
 					<CredentialConfig
@@ -170,6 +143,8 @@ import {IDataObject} from "n8n-workflow";
 import FeatureComingSoon from '../FeatureComingSoon.vue';
 import {mapGetters} from "vuex";
 import {getCredentialPermissions, IPermissions} from "@/permissions";
+import { IMenuItem } from 'n8n-design-system';
+import { BaseTextKey } from '@/plugins/i18n';
 
 interface NodeAccessMap {
 	[nodeType: string]: ICredentialNodeAccess | null;
@@ -421,6 +396,43 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 			return getCredentialPermissions(this.currentUser, (this.credentialId ? this.currentCredential : this.credentialData) as ICredentialsResponse, this.$store);
 		},
+		sidebarItems(): IMenuItem[] {
+				const items: IMenuItem[] = [
+					{
+						id: 'connection',
+						label: this.$locale.baseText('credentialEdit.credentialEdit.connection'),
+						position: 'top',
+					},
+					{
+						id: 'sharing',
+						label: this.$locale.baseText('credentialEdit.credentialEdit.sharing'),
+						position: 'top',
+						available: this.credentialType !== null && this.isSharingAvailable,
+					},
+				];
+
+				if (this.credentialType !== null && !this.isSharingAvailable) {
+					for (const item of this.credentialsFakeDoorFeatures) {
+						items.push({
+							id: `coming-soon/${item.id}`,
+							label: this.$locale.baseText(item.featureName as BaseTextKey),
+							position: 'top',
+						});
+					}
+				}
+
+				items.push(
+					{
+						id: 'details',
+						label: this.$locale.baseText('credentialEdit.credentialEdit.details'),
+						position: 'top',
+					},
+				);
+				return items;
+		},
+		isSharingAvailable(): boolean {
+			return this.$store.getters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing) === true;
+		},
 	},
 	methods: {
 		async beforeClose() {
@@ -458,7 +470,6 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 			return false;
 		},
-
 		displayCredentialParameter(parameter: INodeProperties): boolean {
 			if (parameter.type === 'hidden') {
 				return false;
@@ -979,6 +990,10 @@ export default mixins(showMessage, nodeHelpers).extend({
 	min-width: 170px;
 	margin-right: var(--spacing-l);
 	flex-grow: 1;
+
+	ul {
+		padding: 0 !important;
+	}
 }
 
 .header {