diff --git a/src/BIMDataComponents/BIMDataDropdownMenu/BIMDataDropdownMenu.vue b/src/BIMDataComponents/BIMDataDropdownMenu/BIMDataDropdownMenu.vue
index f98529e3..c97175b2 100644
--- a/src/BIMDataComponents/BIMDataDropdownMenu/BIMDataDropdownMenu.vue
+++ b/src/BIMDataComponents/BIMDataDropdownMenu/BIMDataDropdownMenu.vue
@@ -22,9 +22,12 @@
v-for="item in menuItems"
:key="item.name"
class="bimdata-dropdown__elements__menu-items__item"
- @click="item.action && item.action()"
- @mouseover="handleCurrentItem(item.name)"
- @mouseleave="handleCurrentItem()"
+ :class="`bimdata-dropdown__elements__menu-items__item--${
+ hasNoChildren(item) ? 'no-children' : 'has-children'
+ }`"
+ @click.stop="onClick(item)"
+ @mouseover="onMouseOver(item)"
+ @mouseleave="onMouseLeave(item)"
>
@@ -128,6 +131,22 @@ export default {
this.currentItemName = null;
}
},
+ onClick(item) {
+ if (this.hasNoChildren(item) || !item.action) return;
+ item.action();
+ },
+ onMouseOver(item) {
+ if (this.hasNoChildren(item)) return;
+ this.handleCurrentItem(item.name);
+ },
+ onMouseLeave(item) {
+ if (this.hasNoChildren(item)) return;
+ this.handleCurrentItem();
+ },
+ hasNoChildren(item) {
+ const { children } = item;
+ return children && children.length === 0;
+ },
},
};
diff --git a/src/BIMDataComponents/BIMDataDropdownMenu/_BIMDataDropdownMenu.scss b/src/BIMDataComponents/BIMDataDropdownMenu/_BIMDataDropdownMenu.scss
index d4219017..1b07a502 100644
--- a/src/BIMDataComponents/BIMDataDropdownMenu/_BIMDataDropdownMenu.scss
+++ b/src/BIMDataComponents/BIMDataDropdownMenu/_BIMDataDropdownMenu.scss
@@ -43,6 +43,14 @@
&__item {
position: relative;
+
+ &--no-children {
+ color: var(--color-silver-dark);
+ }
+ &--has-children {
+ color: var(--color-primary);
+ }
+
div {
padding-left: var(--spacing-unit);
}