Fix advanced settings display (#8196)

In [this PR (fix navigation overflow)](#7795) we introduced a regression, hidding the left-side animation with advanced settings: <img width="285" alt="Capture d’écran 2024-10-30 à 12 56 22" src="https://github.com/user-attachments/assets/46d7b1e5-4759-42e9-9bcb-aaa0fedfe542"> <img width="274" alt="Capture d’écran 2024-10-30 à 12 56 31" src="https://github.com/user-attachments/assets/d3c3d337-f6fc-4509-a920-4c2c7506f061">
twentyhq · Oct 30, 2024 · 7dfde04 · 7dfde04
1 parent 3957658
commit 7dfde04
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/.../twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx b/.../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>