diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue index 3dbb7b327e0af..b0789934f9175 100644 --- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue +++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue @@ -36,6 +36,9 @@ > {{ child.label }} + + + {{ item.label }} + + + @@ -264,6 +270,7 @@ export default defineComponent({ padding: var(--spacing-2xs) var(--spacing-xs) !important; margin: 0 !important; border-radius: var(--border-radius-base) !important; + overflow: hidden; } .icon { @@ -272,6 +279,13 @@ export default defineComponent({ text-align: center; } +.secondaryIcon { + display: flex; + align-items: center; + justify-content: flex-end; + flex: 1; +} + .label { overflow: hidden; text-overflow: ellipsis; @@ -294,6 +308,9 @@ export default defineComponent({ .label { display: none; } + .secondaryIcon { + display: none; + } } .submenuPopper { diff --git a/packages/design-system/src/types/menu.ts b/packages/design-system/src/types/menu.ts index 17a7c400b63c1..b4c00f9a8a43e 100644 --- a/packages/design-system/src/types/menu.ts +++ b/packages/design-system/src/types/menu.ts @@ -2,6 +2,7 @@ export type IMenuItem = { id: string; label: string; icon?: string; + secondaryIcon?: { name: string; size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' }; customIconSize?: 'medium' | 'small'; available?: boolean; position?: 'top' | 'bottom'; diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue index 8656a25fa54cb..d8fa837daa9a0 100644 --- a/packages/editor-ui/src/components/MainSidebar.vue +++ b/packages/editor-ui/src/components/MainSidebar.vue @@ -216,6 +216,9 @@ export default defineComponent({ { id: 'workflows', icon: 'network-wired', + secondaryIcon: this.versionControlStore.preferences.branchReadOnly + ? { name: 'lock' } + : undefined, label: this.$locale.baseText('mainSidebar.workflows'), position: 'top', activateOnRouteNames: [VIEWS.WORKFLOWS], diff --git a/packages/editor-ui/src/plugins/icons/index.ts b/packages/editor-ui/src/plugins/icons/index.ts index c5df57f73e0a5..ef898784af958 100644 --- a/packages/editor-ui/src/plugins/icons/index.ts +++ b/packages/editor-ui/src/plugins/icons/index.ts @@ -81,6 +81,7 @@ import { faLink, faList, faLightbulb, + faLock, faMapSigns, faMousePointer, faNetworkWired, @@ -219,6 +220,7 @@ addIcon(faKey); addIcon(faLink); addIcon(faList); addIcon(faLightbulb); +addIcon(faLock); addIcon(faMapSigns); addIcon(faMousePointer); addIcon(faNetworkWired);