diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx
index b7ceaa2706d5..0f789680a3df 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx
@@ -79,6 +79,7 @@ export const MenuItem = ({
LeftIcon={LeftIcon ?? undefined}
text={text}
contextualText={contextualText}
+ disabled={disabled}
/>
@@ -89,7 +90,7 @@ export const MenuItem = ({
{RightIcon && (
)}
- {hasSubMenu && (
+ {hasSubMenu && !disabled && (
{showIconButtons && (
diff --git a/packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx b/packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
index a67d60073a5b..6954ce80bce6 100644
--- a/packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
@@ -19,7 +19,7 @@ const StyledMainText = styled.div`
`;
const StyledContextualText = styled.div`
- color: ${({ theme }) => theme.color.gray35};
+ color: ${({ theme }) => theme.font.color.light};
font-family: inherit;
font-size: inherit;
@@ -40,7 +40,7 @@ type MenuItemLeftContentProps = {
className?: string;
LeftIcon: IconComponent | null | undefined;
showGrip?: boolean;
- isDisabled?: boolean;
+ disabled?: boolean;
text: ReactNode;
contextualText?: ReactNode;
};
@@ -51,7 +51,7 @@ export const MenuItemLeftContent = ({
text,
contextualText,
showGrip = false,
- isDisabled = false,
+ disabled = false,
}: MenuItemLeftContentProps) => {
const theme = useTheme();
@@ -63,7 +63,7 @@ export const MenuItemLeftContent = ({
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
color={
- isDisabled ? theme.font.color.extraLight : theme.font.color.light
+ disabled ? theme.font.color.extraLight : theme.font.color.light
}
/>
diff --git a/packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx b/packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
index 3012a0d170a2..d67bb7af0dff 100644
--- a/packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
@@ -43,7 +43,11 @@ export const StyledMenuItemBase = styled.div`
(disabled || isHoverBackgroundDisabled) ?? HOVER_BACKGROUND};
${({ theme, accent, disabled }) => {
- const isDisabled = !isUndefined(disabled) && disabled !== false;
+ if (!isUndefined(disabled) && disabled !== false) {
+ return css`
+ color: ${theme.font.color.tertiary};
+ `;
+ }
switch (accent) {
case 'danger': {
@@ -52,20 +56,17 @@ export const StyledMenuItemBase = styled.div`
&:hover {
background: ${theme.background.transparent.danger};
}
- ${isDisabled && `opacity: 0.4;`}
`;
}
case 'placeholder': {
return css`
color: ${theme.font.color.tertiary};
- ${isDisabled && `opacity: 0.4;`}
`;
}
case 'default':
default: {
return css`
color: ${theme.font.color.secondary};
- ${isDisabled && `opacity: 0.4;`}
`;
}
}