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}