Animated the Sidebar Objects Tree view opening/closing (#9287)

closes #6485 


https://github.com/user-attachments/assets/79efca87-1d9b-4fa2-a457-3117be679c6e

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/settings/components/AdvancedSettingsWrapper.tsx

@@ -1,26 +1,37 @@
-import { useExpandedAnimation } from '@/settings/hooks/useExpandedAnimation';
+import { ADVANCED_SETTINGS_ANIMATION_DURATION } from '@/settings/constants/AdvancedSettingsAnimationDurations';
 import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
 import styled from '@emotion/styled';
-import { AnimatePresence, motion } from 'framer-motion';
 import { useRecoilValue } from 'recoil';
-import { IconPoint, MAIN_COLORS } from 'twenty-ui';
+import { AnimatedExpandableContainer, IconPoint, MAIN_COLORS } from 'twenty-ui';
 
 const StyledAdvancedWrapper = styled.div`
   position: relative;
   width: 100%;
 `;
 
-const StyledIconContainer = styled.div`
+const StyledIconContainer = styled.div<{ navigationDrawerItem: boolean }>`
   display: flex;
-  height: 100%;
-  left: ${({ theme }) => theme.spacing(-4)};
   position: absolute;
-  top: 0;
+
+  ${({ navigationDrawerItem, theme }) => {
+    if (navigationDrawerItem) {
+      return `
+        height: 100%;
+        left: ${theme.spacing(-5)};
+        align-items: center;
+      `;
+    }
+    return `
+      left: ${theme.spacing(-4)};
+      top: ${theme.spacing(1)};
+    `;
+  }}
 `;
 
 const StyledContent = styled.div`
   width: 100%;
 `;
+
 const StyledIconPoint = styled(IconPoint)`
   margin-right: 0;
 `;
@@ -29,43 +40,37 @@ type AdvancedSettingsWrapperProps = {
   children: React.ReactNode;
   dimension?: 'width' | 'height';
   hideIcon?: boolean;
+  navigationDrawerItem?: boolean;
 };
 
 export const AdvancedSettingsWrapper = ({
   children,
   dimension = 'height',
   hideIcon = false,
+  navigationDrawerItem = false,
 }: AdvancedSettingsWrapperProps) => {
   const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
-  const { contentRef, motionAnimationVariants } = useExpandedAnimation(
-    isAdvancedModeEnabled,
-    dimension,
-  );
 
   return (
-    <AnimatePresence>
-      {isAdvancedModeEnabled && (
-        <motion.div
-          ref={contentRef}
-          initial="initial"
-          animate="animate"
-          exit="exit"
-          variants={motionAnimationVariants}
-        >
-          <StyledAdvancedWrapper>
-            {!hideIcon && (
-              <StyledIconContainer>
-                <StyledIconPoint
-                  size={12}
-                  color={MAIN_COLORS.yellow}
-                  fill={MAIN_COLORS.yellow}
-                />
-              </StyledIconContainer>
-            )}
-            <StyledContent>{children}</StyledContent>
-          </StyledAdvancedWrapper>
-        </motion.div>
-      )}
-    </AnimatePresence>
+    <AnimatedExpandableContainer
+      isExpanded={isAdvancedModeEnabled}
+      dimension={dimension}
+      animationDurations={ADVANCED_SETTINGS_ANIMATION_DURATION}
+      mode="scroll-height"
+      containAnimation={false}
+    >
+      <StyledAdvancedWrapper>
+        {!hideIcon && (
+          <StyledIconContainer navigationDrawerItem={navigationDrawerItem}>
+            <StyledIconPoint
+              size={12}
+              color={MAIN_COLORS.yellow}
+              fill={MAIN_COLORS.yellow}
+            />
+          </StyledIconContainer>
+        )}
+        <StyledContent>{children}</StyledContent>
+      </StyledAdvancedWrapper>
+    </AnimatedExpandableContainer>
   );
 };