mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

prevent disabled links from redirecting

Browse source
This commit is contained in:
r00gm 2024-11-05 14:58:33 +01:00
parent 0adfd33e55
commit ccacaedb2b
No known key found for this signature in database
1 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue
View file

@ -19,6 +19,7 @@ type Item = BaseItem & {
defineProps<{ defineProps<{
menu: Item[]; menu: Item[];
disabled?: boolean;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
@ -39,6 +40,7 @@ const emit = defineEmits<{
:class="$style.trigger" :class="$style.trigger"
:popper-offset="-10" :popper-offset="-10"
:popper-class="$style.submenu" :popper-class="$style.submenu"
:disabled
> >
<template #title> <template #title>
<slot /> <slot />
@ -49,7 +51,7 @@ const emit = defineEmits<{
<ElSubMenu :index="item.id" :popper-offset="-10" data-test-id="navigation-submenu"> <ElSubMenu :index="item.id" :popper-offset="-10" data-test-id="navigation-submenu">
<template #title>{{ item.title }}</template> <template #title>{{ item.title }}</template>
<template v-for="subitem in item.submenu" :key="subitem.id"> <template v-for="subitem in item.submenu" :key="subitem.id">
<ConditionalRouterLink :to="subitem.route"> <ConditionalRouterLink :to="!subitem.disabled && subitem.route">
<ElMenuItem <ElMenuItem
data-test-id="navigation-submenu-item" data-test-id="navigation-submenu-item"
:index="subitem.id" :index="subitem.id"
@ -63,7 +65,7 @@ const emit = defineEmits<{
</template> </template>
</ElSubMenu> </ElSubMenu>
</template> </template>
<ConditionalRouterLink v-else :to="item.route"> <ConditionalRouterLink v-else :to="!item.disabled && item.route">
<ElMenuItem <ElMenuItem
:index="item.id" :index="item.id"
:disabled="item.disabled" :disabled="item.disabled"
@ -88,6 +90,7 @@ const emit = defineEmits<{
height: auto; height: auto;
line-height: initial; line-height: initial;
border-bottom: 0 !important; border-bottom: 0 !important;
padding: 0;
:global(.el-sub-menu__icon-arrow) { :global(.el-sub-menu__icon-arrow) {
display: none; display: none;
} }
@ -99,6 +102,8 @@ const emit = defineEmits<{
} }
.submenu { .submenu {
padding: 5px 0 !important;
:global(.el-menu--horizontal .el-menu .el-menu-item), :global(.el-menu--horizontal .el-menu .el-menu-item),
:global(.el-menu--horizontal .el-menu .el-sub-menu__title) { :global(.el-menu--horizontal .el-menu .el-sub-menu__title) {
color: var(--color-text-dark); color: var(--color-text-dark);
@ -109,6 +114,15 @@ const emit = defineEmits<{
background-color: var(--color-foreground-base); background-color: var(--color-foreground-base);
} }
:global(.el-popper) {
padding: 0 10px !important;
}
:global(.el-menu--popup) {
border: 1px solid var(--color-foreground-base);
border-radius: var(--border-radius-base);
}
:global(.el-menu--horizontal .el-menu .el-menu-item.is-disabled) { :global(.el-menu--horizontal .el-menu .el-menu-item.is-disabled) {
opacity: 1; opacity: 1;
cursor: default; cursor: default;