From f1e38dbb3de6520b9ed13c38348d82afc0c134a1 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:23:21 +0530
Subject: [PATCH] Icon alignment in NavigationDrawerItems (#9164)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Icons are not aligned to the labels
before:
<img width="387" alt="Screenshot 2024-12-20 at 4 09 01 PM"
src="https://github.com/user-attachments/assets/c115abcd-9779-4597-b40e-6ceceeaa13b9"
/>

after:

<img width="387" alt="Screenshot 2024-12-20 at 4 08 36 PM"
src="https://github.com/user-attachments/assets/a0535030-a810-4023-b677-8380b833f712"
/>
---
 .../components/NavigationDrawerItem.tsx               | 11 +++++------
 1 file changed, 5 insertions(+), 6 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 1d924f55c4132..d3916a1ba0c77 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
@@ -183,6 +183,9 @@ const StyledSpacer = styled.span`
 const StyledIcon = styled.div`
   flex-shrink: 0;
   flex-grow: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin-right: ${({ theme }) => theme.spacing(2)};
 `;
 
@@ -208,7 +211,6 @@ const visibleStateStyles = css`
 
 const StyledRightOptionsVisbility = styled.div<{
   isMobile: boolean;
-  active: boolean;
 }>`
   display: block;
   opacity: 0;
@@ -221,7 +223,7 @@ const StyledRightOptionsVisbility = styled.div<{
   height: 1px;
   width: 1px;
 
-  ${({ isMobile, active }) => (isMobile || active) && visibleStateStyles}
+  ${({ isMobile }) => isMobile && visibleStateStyles}
 
   .navigation-drawer-item:hover & {
     ${visibleStateStyles}
@@ -343,10 +345,7 @@ export const NavigationDrawerItem = ({
                   e.preventDefault();
                 }}
               >
-                <StyledRightOptionsVisbility
-                  isMobile={isMobile}
-                  active={active || false}
-                >
+                <StyledRightOptionsVisbility isMobile={isMobile}>
                   {rightOptions}
                 </StyledRightOptionsVisbility>
               </StyledRightOptionsContainer>