Animated the Sidebar Objects Tree view opening/closing

packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx

@@ -15,6 +15,7 @@ import { NavigationDrawerInput } from '@/ui/navigation/navigation-drawer/compone
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import { NavigationDrawerItemsCollapsableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer';
 import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
+import { NavigationDrawerSubItemAnimatedExpandableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItemAnimatedExpandableContainer';
 import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment';
 import { Droppable } from '@hello-pangea/dnd';
 import { useContext, useState } from 'react';
@@ -158,7 +159,10 @@ export const CurrentWorkspaceMemberFavorites = ({
           </FavoritesDroppable>
         )}
 
-        {isOpen && (
+        <NavigationDrawerSubItemAnimatedExpandableContainer
+          isOpen={isOpen}
+          key={`folder-${folder.folderId}`}
+        >
           <Droppable droppableId={`folder-${folder.folderId}`}>
             {(provided) => (
               <div
@@ -202,7 +206,7 @@ export const CurrentWorkspaceMemberFavorites = ({
               </div>
             )}
           </Droppable>
-        )}
+        </NavigationDrawerSubItemAnimatedExpandableContainer>
       </NavigationDrawerItemsCollapsableContainer>
 
       {createPortal(

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerItemForObjectMetadataItem.tsx

@@ -5,6 +5,7 @@ import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import { NavigationDrawerItemsCollapsableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer';
 import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
+import { NavigationDrawerSubItemAnimatedExpandableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItemAnimatedExpandableContainer';
 import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment';
 import { View } from '@/views/types/View';
 import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemViews';
@@ -66,8 +67,11 @@ export const NavigationDrawerItemForObjectMetadataItem = ({
         Icon={getIcon(objectMetadataItem.icon)}
         active={isActive}
       />
-      {shouldSubItemsBeDisplayed &&
-        sortedObjectMetadataViews.map((view, index) => (
+
+      <NavigationDrawerSubItemAnimatedExpandableContainer
+        isOpen={shouldSubItemsBeDisplayed}
+      >
+        {sortedObjectMetadataViews.map((view, index) => (
           <NavigationDrawerSubItem
             label={view.name}
             to={`/objects/${objectMetadataItem.namePlural}?view=${view.id}`}
@@ -81,6 +85,7 @@ export const NavigationDrawerItemForObjectMetadataItem = ({
             key={view.id}
           />
         ))}
+      </NavigationDrawerSubItemAnimatedExpandableContainer>
     </NavigationDrawerItemsCollapsableContainer>
   );
 };

packages/twenty-front/src/modules/settings/hooks/useExpandedAnimation.ts

@@ -21,16 +21,19 @@ const advancedSectionAnimationConfig = (
   isExpanded: boolean,
   dimension: AnimationDimension,
   measuredValue?: number,
+  fitContent?: boolean,
 ) => ({
   initial: {
     ...commonStyles(dimension),
   },
   animate: {
     opacity: 1,
     [dimension]: isExpanded
-      ? dimension === 'width'
-        ? '100%'
-        : measuredValue
+      ? fitContent
+        ? 'fit-content'
+        : dimension === 'width'
+          ? '100%'
+          : measuredValue
       : 0,
     ...getTransitionValues(dimension),
   },
@@ -42,6 +45,7 @@ const advancedSectionAnimationConfig = (
 export const useExpandedAnimation = (
   isExpanded: boolean,
   dimension: AnimationDimension = 'height',
+  fitContent?: boolean,
 ) => {
   const contentRef = useRef<HTMLDivElement>(null);
   const [measuredValue, setMeasuredValue] = useState(0);
@@ -58,6 +62,7 @@ export const useExpandedAnimation = (
       isExpanded,
       dimension,
       dimension === 'height' ? measuredValue : undefined,
+      fitContent,
     ),
   };
 };

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSubItemAnimatedExpandableContainer.tsx

@@ -0,0 +1,43 @@
+import { useExpandedAnimation } from '@/settings/hooks/useExpandedAnimation';
+import styled from '@emotion/styled';
+import { AnimatePresence, motion } from 'framer-motion';
+import { ReactNode } from 'react';
+
+const StyledAnimatedContainer = styled(motion.div)`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+`;
+
+type NavigationDrawerSubItemAnimatedExpandableContainerProps = {
+  children: ReactNode;
+  isOpen?: boolean;
+};
+
+export const NavigationDrawerSubItemAnimatedExpandableContainer = ({
+  children,
+  isOpen = false,
+}: NavigationDrawerSubItemAnimatedExpandableContainerProps) => {
+  const { contentRef, motionAnimationVariants } = useExpandedAnimation(
+    isOpen,
+    'height',
+    true,
+  );
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <StyledAnimatedContainer
+          ref={contentRef}
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          variants={motionAnimationVariants}
+        >
+          {children}
+        </StyledAnimatedContainer>
+      )}
+    </AnimatePresence>
+  );
+};