From 3e0033260ff97c3cf8a1d620cdd4f3287bfbb0e6 Mon Sep 17 00:00:00 2001
From: Rob Squires <robtf9@icloud.com>
Date: Wed, 13 Aug 2025 08:53:09 +0100
Subject: [PATCH] conditionals

---
 .../src/components/N8nSidebar/Sidebar.vue     | 19 +++++++++++++------
 .../components/N8nSidebar/SidebarSubMenu.vue  |  6 +++---
 .../src/components/VersionUpdateCTA.vue       |  3 +--
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSidebar/Sidebar.vue b/packages/frontend/@n8n/design-system/src/components/N8nSidebar/Sidebar.vue
index 6575a53591f..6293ce90933 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nSidebar/Sidebar.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSidebar/Sidebar.vue
@@ -15,8 +15,8 @@ import SidebarSubMenu from './SidebarSubMenu.vue';
 
 const props = defineProps<{
 	personal: { id: string; items: TreeItemType[] };
-	shared: TreeItemType[];
-	projects: { title: string; id: string; icon: IconName; items: TreeItemType[] }[];
+	shared?: TreeItemType[];
+	projects?: { title: string; id: string; icon: IconName; items: TreeItemType[] }[];
 	userName: string;
 	releaseChannel: 'stable' | 'dev' | 'beta' | 'nightly';
 	menuItems: IMenuItem[];
@@ -136,8 +136,8 @@ function getMenuItemRoute(item: IMenuItem) {
 				:selectable="false"
 				:collapsible="false"
 			/>
-
 			<SidebarSection
+				v-if="shared"
 				title="Shared with me"
 				id="shared"
 				icon="share"
@@ -147,8 +147,8 @@ function getMenuItemRoute(item: IMenuItem) {
 			/>
 			<N8nText size="small" bold color="text-light" class="sidebarSubheader">Projects</N8nText>
 			<SidebarSection
-				v-if="props.projects.length"
-				v-for="project in props.projects"
+				v-if="projects?.length"
+				v-for="project in projects"
 				:title="project.title"
 				:id="project.id"
 				:icon="project.icon"
@@ -231,7 +231,9 @@ function getMenuItemRoute(item: IMenuItem) {
 				</template>
 				<template #content>
 					<div v-for="item in helpMenuItems" :key="item.id" class="sidebarSubMenuSection">
-						<N8nText size="small" bold color="text-light">{{ item.label }}</N8nText>
+						<N8nText class="sidebarSubMenuSectionHeader" size="small" bold color="text-light">{{
+							item.label
+						}}</N8nText>
 						<div v-for="subItem in item.children" :key="subItem.id">
 							<component
 								v-if="subItem.component"
@@ -380,4 +382,9 @@ function getMenuItemRoute(item: IMenuItem) {
 .sidebarSubMenuSection:first-of-type {
 	margin-bottom: var(--spacing-xs);
 }
+
+.sidebarSubMenuSectionHeader {
+	margin-bottom: var(--spacing-3xs);
+	display: block;
+}
 </style>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSidebar/SidebarSubMenu.vue b/packages/frontend/@n8n/design-system/src/components/N8nSidebar/SidebarSubMenu.vue
index 43d0269f475..f70a7652bc5 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nSidebar/SidebarSubMenu.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSidebar/SidebarSubMenu.vue
@@ -8,7 +8,7 @@ import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka
 			<slot name="trigger" />
 		</PopoverTrigger>
 		<PopoverPortal>
-			<PopoverContent side="top" :side-offset="5" style="z-index: 1000" class="sidebarSubMenu">
+			<PopoverContent side="top" style="z-index: 1000" class="sidebarSubMenu">
 				<slot name="content" />
 			</PopoverContent>
 		</PopoverPortal>
@@ -20,9 +20,9 @@ import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka
 	background-color: var(--color-foreground-xlight);
 	border: var(--border-base);
 	border-radius: var(--border-radius-base);
-	padding: var(--spacing-2xs);
+	padding: var(--spacing-xs);
 	box-shadow: var(--box-shadow-light);
-	min-width: 200px;
+	min-width: 300px;
 }
 
 .sidebarSubMenuTrigger {
diff --git a/packages/frontend/editor-ui/src/components/VersionUpdateCTA.vue b/packages/frontend/editor-ui/src/components/VersionUpdateCTA.vue
index 4473333d4e5..67119cb794d 100644
--- a/packages/frontend/editor-ui/src/components/VersionUpdateCTA.vue
+++ b/packages/frontend/editor-ui/src/components/VersionUpdateCTA.vue
@@ -60,8 +60,7 @@ const onUpdateClick = async () => {
 	margin-top: var(--spacing-xs);
 	padding: var(--spacing-xs) var(--spacing-xs);
 	border-radius: var(--border-radius-base);
-	border: var(--border-base);
-	background: var(--color-background-light);
+	background: var(--color-background-xlight);
 	width: 100%;
 }