From 7dfde04957e6b255c23bab84080b4e493fe946e1 Mon Sep 17 00:00:00 2001
From: Marie <51697796+ijreilly@users.noreply.github.com>
Date: Wed, 30 Oct 2024 17:18:44 +0100
Subject: [PATCH] Fix advanced settings display (#8196)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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">
---
 .../components/NavigationDrawer.tsx                | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

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