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

Fix Navigation drawer design for object path (#9290)

Browse Source 
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>
This commit is contained in:
Thomas Trompette
2024-12-31 09:24:06 +01:00
committed by GitHub
parent c3c07e08c8
commit 5bd685ef2a
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,7 +46,7 @@ export type NavigationDrawerItemProps = {
type StyledItemProps = Pick< type StyledItemProps = Pick<
NavigationDrawerItemProps, NavigationDrawerItemProps,
'active' | 'danger' | 'indentationLevel' | 'soon' | 'to' | 'isDragging' 'active' | 'danger' | 'indentationLevel' | 'soon' | 'to' | 'isDragging'
> & { isNavigationDrawerExpanded: boolean }; > & { isNavigationDrawerExpanded: boolean; hasRightOptions: boolean };
const StyledItem = styled('button', { const StyledItem = styled('button', {
shouldForwardProp: (prop) => shouldForwardProp: (prop) =>
@ -80,7 +80,8 @@ const StyledItem = styled('button', {
padding-bottom: ${({ theme }) => theme.spacing(1)}; padding-bottom: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ 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)}; padding-top: ${({ theme }) => theme.spacing(1)};
margin-top: ${({ indentationLevel }) => margin-top: ${({ indentationLevel }) =>
@ -284,6 +285,7 @@ export const NavigationDrawerItem = ({
indentationLevel={indentationLevel} indentationLevel={indentationLevel}
isNavigationDrawerExpanded={isNavigationDrawerExpanded} isNavigationDrawerExpanded={isNavigationDrawerExpanded}
isDragging={isDragging} isDragging={isDragging}
hasRightOptions={!!rightOptions}
> >
<StyledItemElementsContainer> <StyledItemElementsContainer>
{showBreadcrumb && ( {showBreadcrumb && (