diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx
index 6db4ddc59a32d..98c01586b93f9 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx
@@ -3,7 +3,10 @@ import { IconComponent } from 'twenty-ui';
import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
-import { StyledHoverableMenuItemBase } from '../internals/components/StyledMenuItemBase';
+import {
+ StyledHoverableMenuItemBase,
+ StyledMenuItemBase,
+} from '../internals/components/StyledMenuItemBase';
import { MenuItemAccent } from '../types/MenuItemAccent';
import { MenuItemIconButton } from './MenuItem';
@@ -15,10 +18,11 @@ export type MenuItemDraggableProps = {
isTooltipOpen?: boolean;
onClick?: () => void;
text: string;
- isDragDisabled?: boolean;
className?: string;
isIconDisplayedOnHoverOnly?: boolean;
showGrip?: boolean;
+ isDragDisabled?: boolean;
+ isHoverDisabled?: boolean;
};
export const MenuItemDraggable = ({
LeftIcon,
@@ -30,9 +34,23 @@ export const MenuItemDraggable = ({
className,
isIconDisplayedOnHoverOnly = true,
showGrip = false,
+ isHoverDisabled = false,
}: MenuItemDraggableProps) => {
const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
+ if (isHoverDisabled) {
+ return (
+
+
+
+ );
+ }
+
return (
- {showGrip && (
-
- )}
+ {showGrip &&
+ (isDisabled ? (
+
+ ) : (
+
+
+
+ ))}
{LeftIcon && (
)}
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
index 71cd27eae09e7..a2489def35b98 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
@@ -7,6 +7,7 @@ import { MenuItemAccent } from '../../types/MenuItemAccent';
export type MenuItemBaseProps = {
accent?: MenuItemAccent;
isKeySelected?: boolean;
+ isHoverBackgroundDisabled?: boolean;
};
export const StyledMenuItemBase = styled.div`
@@ -31,7 +32,8 @@ export const StyledMenuItemBase = styled.div`
padding: var(--vertical-padding) var(--horizontal-padding);
- ${HOVER_BACKGROUND};
+ ${({ isHoverBackgroundDisabled }) =>
+ isHoverBackgroundDisabled ?? HOVER_BACKGROUND};
${({ theme, accent }) => {
switch (accent) {
@@ -99,6 +101,10 @@ export const StyledMenuItemRightContent = styled.div`
flex-direction: row;
`;
+export const StyledDraggableItem = styled.div`
+ cursor: grab;
+`;
+
export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
isIconDisplayedOnHoverOnly?: boolean;
}>`
diff --git a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx
index b667efd3a6062..edbbdf3c0a8da 100644
--- a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx
@@ -107,9 +107,10 @@ export const ViewFieldsVisibilityDropdownSection = ({
isTooltipOpen={openToolTipIndex === fieldIndex}
text={field.label}
className={`${title}-fixed-item-tooltip-anchor-${fieldIndex}`}
- accent="placeholder"
- isDragDisabled
+ accent={'placeholder'}
+ isHoverDisabled={field.isVisible}
showGrip
+ isDragDisabled
/>
))}
{!!draggableItems.length && (