Skip to content

Commit

Permalink
Icon alignment in NavigationDrawerItems (#9164)
Browse files Browse the repository at this point in the history
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"
/>
  • Loading branch information
ehconitin authored and mdrazak2001 committed Dec 20, 2024
1 parent a41c636 commit f1e38db
Showing 1 changed file with 5 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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)};
`;

Expand All @@ -208,7 +211,6 @@ const visibleStateStyles = css`

const StyledRightOptionsVisbility = styled.div<{
isMobile: boolean;
active: boolean;
}>`
display: block;
opacity: 0;
Expand All @@ -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}
Expand Down Expand Up @@ -343,10 +345,7 @@ export const NavigationDrawerItem = ({
e.preventDefault();
}}
>
<StyledRightOptionsVisbility
isMobile={isMobile}
active={active || false}
>
<StyledRightOptionsVisbility isMobile={isMobile}>
{rightOptions}
</StyledRightOptionsVisbility>
</StyledRightOptionsContainer>
Expand Down

0 comments on commit f1e38db

Please sign in to comment.