conditionals

This commit is contained in:
Rob Squires 2025-08-13 08:53:09 +01:00
parent c27caa4a07
commit 3e0033260f
3 changed files with 17 additions and 11 deletions

View File

@ -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>

View File

@ -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 {

View File

@ -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%;
}