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

Fix advanced settings display (#8196)

Browse Source 
In [this PR (fix navigation
overflow)](https://github.com/twentyhq/twenty/pull/7795) we introduced a
regression, hidding the left-side animation with advanced settings:
<img width="285" alt="Capture d’écran 2024-10-30 à 12 56 22"
src="https://github.com/user-attachments/assets/46d7b1e5-4759-42e9-9bcb-aaa0fedfe542">

<img width="274" alt="Capture d’écran 2024-10-30 à 12 56 31"
src="https://github.com/user-attachments/assets/d3c3d337-f6fc-4509-a920-4c2c7506f061">
This commit is contained in:
Marie
2024-10-30 17:18:44 +01:00
committed by GitHub
parent 3957658e1c
commit 7dfde04957
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
View File

@ -22,9 +22,9 @@ export type NavigationDrawerProps = {
title?: string; title?: string;
}; };
const StyledAnimatedContainer = styled(motion.div)` const StyledAnimatedContainer = styled(motion.div)<{ isSettings?: boolean }>`
max-height: 100vh; max-height: 100vh;
overflow: hidden; overflow: ${({ isSettings }) => (isSettings ? 'visible' : 'hidden')};
`; `;
const StyledContainer = styled.div<{ const StyledContainer = styled.div<{
@ -50,11 +50,12 @@ const StyledContainer = styled.div<{
padding-right: 20px; padding-right: 20px;
} }
`; `;
const StyledItemsContainer = styled.div`
const StyledItemsContainer = styled.div<{ isSettings?: boolean }>`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: auto; margin-bottom: auto;
overflow: hidden; overflow: ${({ isSettings }) => (isSettings ? 'visible' : 'hidden')};
flex: 1; flex: 1;
`; `;
@ -102,6 +103,7 @@ export const NavigationDrawer = ({
transition={{ transition={{
duration: theme.animation.duration.normal, duration: theme.animation.duration.normal,
}} }}
isSettings={isSettingsDrawer}
> >
<StyledContainer <StyledContainer
isSettings={isSettingsDrawer} isSettings={isSettingsDrawer}
@ -118,7 +120,9 @@ export const NavigationDrawer = ({
showCollapseButton={isHovered} showCollapseButton={isHovered}
/> />
)} )}
<StyledItemsContainer>{children}</StyledItemsContainer> <StyledItemsContainer isSettings={isSettingsDrawer}>
{children}
</StyledItemsContainer>
{footer} {footer}
</StyledContainer> </StyledContainer>
</StyledAnimatedContainer> </StyledAnimatedContainer>