From 9d2bb33646ca9bf587485f479259be0de38c8d64 Mon Sep 17 00:00:00 2001
From: Basant Besra <besrabasant@gmail.com>
Date: Thu, 4 Apr 2024 17:35:56 +0530
Subject: [PATCH] fix: Add `isIconStatic` prop item to allow the icons to be
 always rendered statically ignoring hover behaviour (#4676)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix #4653

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
---
 .../modules/ui/navigation/menu-item/components/MenuItem.tsx  | 3 +++
 .../menu-item/internals/components/StyledMenuItemBase.tsx    | 5 +++--
 .../views/view-picker/components/ViewPickerListContent.tsx   | 1 +
 3 files changed, 7 insertions(+), 2 deletions(-)

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