fix: Add isIconStatic prop item to allow the icons to be always rendered statically ignoring hover behaviour (#4676)

Fix #4653

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

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}
     >
       <StyledMenuItemLeftContent>
         <MenuItemLeftContent LeftIcon={LeftIcon ?? undefined} text={text} />

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;
     }
   }
 `;

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}