admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Icon alignment in NavigationDrawerItems (#9164)

Browse Source 
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"
/>
This commit is contained in:
nitin
2024-12-20 16:23:21 +05:30
committed by GitHub
parent f499c728fd
commit 2e216e7a73
1 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
View File

@ -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>