From 5bd685ef2a0a8ee81933b07b3e3e6bcd6f11f6df Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Tue, 31 Dec 2024 09:24:06 +0100
Subject: [PATCH] Fix Navigation drawer design for object path (#9290)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Navigation drawer design is broken for object path, we always see
elipsis. Comes from the fact we only use padding 2px on right while
using 4px on the left.
<img width="242" alt="Capture d’écran 2024-12-31 à 08 27 11"
src="https://github.com/user-attachments/assets/bbc673f3-9c61-4df9-999e-d4a2d93276a9"
/>

Using 2px padding only makes sense when there is a right element, to
match figma.
<img width="242" alt="Capture d’écran 2024-12-31 à 08 29 07"
src="https://github.com/user-attachments/assets/db5fe19c-5074-4f5c-a1b5-af183c0eb745"
/>

Adding a condition to using 4px padding if no right element.
<img width="224" alt="Capture d’écran 2024-12-31 à 08 22 53"
src="https://github.com/user-attachments/assets/9909fd10-75a6-43ee-ae3d-c7124e5421b9"
/>

Co-authored-by: ehconitin <nitinkoche03@gmail.com>
---
 .../navigation-drawer/components/NavigationDrawerItem.tsx   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
index c04c4fde1..af6d39fdc 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
@@ -46,7 +46,7 @@ export type NavigationDrawerItemProps = {
 type StyledItemProps = Pick<
   NavigationDrawerItemProps,
   'active' | 'danger' | 'indentationLevel' | 'soon' | 'to' | 'isDragging'
-> & { isNavigationDrawerExpanded: boolean };
+> & { isNavigationDrawerExpanded: boolean; hasRightOptions: boolean };
 
 const StyledItem = styled('button', {
   shouldForwardProp: (prop) =>
@@ -80,7 +80,8 @@ const StyledItem = styled('button', {
 
   padding-bottom: ${({ theme }) => theme.spacing(1)};
   padding-left: ${({ theme }) => theme.spacing(1)};
-  padding-right: ${({ theme }) => theme.spacing(0.5)};
+  padding-right: ${({ theme, hasRightOptions }) =>
+    hasRightOptions ? theme.spacing(0.5) : theme.spacing(1)};
   padding-top: ${({ theme }) => theme.spacing(1)};
 
   margin-top: ${({ indentationLevel }) =>
@@ -284,6 +285,7 @@ export const NavigationDrawerItem = ({
         indentationLevel={indentationLevel}
         isNavigationDrawerExpanded={isNavigationDrawerExpanded}
         isDragging={isDragging}
+        hasRightOptions={!!rightOptions}
       >
         <StyledItemElementsContainer>
           {showBreadcrumb && (