prevent disabled links from redirecting

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

View file

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