diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx index 77e479df4..ea0c09c2b 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx @@ -20,6 +20,7 @@ export type MenuItemProps = { accent?: MenuItemAccent; text: string; iconButtons?: MenuItemIconButton[]; + isIconDisplayedOnHoverOnly?: boolean; isTooltipOpen?: boolean; className?: string; testId?: string; @@ -32,6 +33,7 @@ export const MenuItem = ({ text, iconButtons, isTooltipOpen, + isIconDisplayedOnHoverOnly = true, className, testId, onClick, @@ -53,6 +55,7 @@ export const MenuItem = ({ className={className} accent={accent} isMenuOpen={!!isTooltipOpen} + isIconDisplayedOnHoverOnly={isIconDisplayedOnHoverOnly} > 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 956f60206..1c2f4b027 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 @@ -102,12 +102,14 @@ export const StyledMenuItemRightContent = styled.div` export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{ isMenuOpen: boolean; + isIconDisplayedOnHoverOnly: boolean; }>` & .hoverable-buttons { pointer-events: none; position: fixed; right: ${({ theme }) => theme.spacing(2)}; - opacity: 0; + opacity: ${({ isIconDisplayedOnHoverOnly }) => + isIconDisplayedOnHoverOnly ? 0 : 1}; transition: opacity ${({ theme }) => theme.animation.duration.instant}s ease; } @@ -115,7 +117,6 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{ & .hoverable-buttons { opacity: 1; pointer-events: auto; - position: static; } } `; diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx index 7bba07e62..03aec0017 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx @@ -74,6 +74,7 @@ export const ViewPickerListContent = () => { Icon: IconLock, }, ].filter(isDefined)} + isIconDisplayedOnHoverOnly={view.key !== 'INDEX'} onClick={() => handleViewSelect(view.id)} LeftIcon={getIcon(view.icon)} text={view.name}