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/views/CredentialsView.vue

@@ -14,24 +14,9 @@
 			</div>
 
 			<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
-				<n8n-menu default-active="owner" type="secondary" @select="onSelectOwner" ref="selectOwnerMenu">
-					<n8n-menu-item index="owner">
-						<template #title>
-							<n8n-icon icon="user"/>
-							<span class="ml-xs">
-							{{ $locale.baseText('credentials.menu.myCredentials') }}
-						</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="all">
-						<template #title>
-							<n8n-icon icon="globe-americas"/>
-							<span class="ml-xs">
-							{{ $locale.baseText('credentials.menu.allCredentials') }}
-						</span>
-						</template>
-					</n8n-menu-item>
-				</n8n-menu>
+				<div :class="$style.sidebarContainer">
+					<n8n-menu :items="menuItems" mode="tabs" @select="onSelectOwner" ref="selectOwnerMenu"></n8n-menu>
+				</div>
 			</enterprise-edition>
 		</template>
 
@@ -256,6 +241,7 @@ import {EnterpriseEditionFeature} from "@/constants";
 import TemplateCard from "@/components/TemplateCard.vue";
 import Vue from "vue";
 import { debounceHelper } from '@/components/mixins/debounce';
+import { IMenuItem } from 'n8n-design-system';
 
 export default mixins(
 	showMessage,
@@ -290,6 +276,22 @@ export default mixins(
 		};
 	},
 	computed: {
+		menuItems(): IMenuItem[] {
+			return [
+				{
+					id: 'owner',
+					icon: 'user',
+					label: this.$locale.baseText('credentials.menu.myCredentials'),
+					position: 'top',
+				},
+				{
+					id: 'all',
+					icon: 'globe-americas',
+					label: this.$locale.baseText('credentials.menu.allCredentials'),
+					position: 'top',
+				},
+			];
+		},
 		currentUser(): IUser {
 			return this.$store.getters['users/currentUser'];
 		},
@@ -561,5 +563,9 @@ export default mixins(
 .type-input {
 	--max-width: 265px;
 }
+
+.sidebarContainer ul {
+	padding: 0 !important;
+}
 </style>