diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx index f2ea6c95a..b41eb757e 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx @@ -47,14 +47,16 @@ type SettingsNavigationItem = { indentationLevel?: NavigationDrawerItemIndentationLevel; }; +const StyledNavigationDrawerSection = styled(NavigationDrawerSection)` + margin-bottom: ${({ theme }) => theme.spacing(3)}; +`; + const StyledIconContainer = styled.div` border-right: 1px solid ${MAIN_COLORS.yellow}; - display: flex; - width: 16px; position: absolute; left: ${({ theme }) => theme.spacing(-5)}; margin-top: ${({ theme }) => theme.spacing(2)}; - height: 90%; + height: 75%; `; const StyledDeveloperSection = styled.div` @@ -119,7 +121,7 @@ export const SettingsNavigationDrawerItems = () => { return ( <> - + { /> ))} - - + + { Icon={IconCode} /> )} - + {isAdvancedModeEnabled && ( { - + { Icon={IconFunction} /> )} - + )} - + { onClick={signOut} Icon={IconDoorEnter} /> - + ); }; diff --git a/packages/twenty-front/src/modules/settings/hooks/useExpandedHeightAnimation.tsx b/packages/twenty-front/src/modules/settings/hooks/useExpandedHeightAnimation.tsx index 3a48c3bb2..e762990f0 100644 --- a/packages/twenty-front/src/modules/settings/hooks/useExpandedHeightAnimation.tsx +++ b/packages/twenty-front/src/modules/settings/hooks/useExpandedHeightAnimation.tsx @@ -6,15 +6,11 @@ const transitionValues = { opactity: { duration: 0.2 }, height: { duration: 0.4 }, }, - transitionEnd: { - overflow: 'visible', - }, }; const commonStyles = { opacity: 0, height: 0, - overflow: 'hidden', ...transitionValues, }; @@ -29,7 +25,6 @@ const advancedSectionAnimationConfig = ( opacity: 1, height: isExpanded ? measuredHeight : 0, ...transitionValues, - overflow: 'hidden', }, exit: { ...commonStyles, diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx index d25c3ab59..ce0bb6f70 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx @@ -49,12 +49,10 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>` width: 100%; } `; -const StyledItemsContainer = styled.div<{ isSubMenu?: boolean }>` +const StyledItemsContainer = styled.div` display: flex; flex-direction: column; margin-bottom: auto; - gap: ${({ theme }) => theme.spacing(3)}; - ${({ isSubMenu }) => (!isSubMenu ? 'overflow-y: auto' : '')}; `; export const NavigationDrawer = ({ @@ -111,9 +109,7 @@ export const NavigationDrawer = ({ showCollapseButton={isHovered} /> )} - - {children} - + {children} {footer}