Animate the Sidebar Objects Tree view opening (#6521)

@Bonapara Issue #6485 Introduced the animation when opening the menu. Please let me know if this is fine or I need to make further changes. Thank you. --------- Co-authored-by: bosiraphael <[email protected]>
twentyhq · Aug 6, 2024 · cd33471 · cd33471
1 parent 23a2821
commit cd33471
Showing 1 changed file with 50 additions and 23 deletions.
diff --git a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-
+import { AnimatePresence, motion } from 'framer-motion';
 import { useLocation } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { isDefined, useIcons } from 'twenty-ui';
@@ -17,6 +16,20 @@ import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/compo
 import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
 import { View } from '@/views/types/View';
 import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemViews';
+import { Theme, useTheme } from '@emotion/react';
+
+const navItemsAnimationVariants = (theme: Theme) => ({
+  hidden: {
+    height: 0,
+    opacity: 0,
+    marginTop: 0,
+  },
+  visible: {
+    height: 'auto',
+    opacity: 1,
+    marginTop: theme.spacing(1),
+  },
+});
 
 export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
   const currentUser = useRecoilValue(currentUserState);
@@ -36,6 +49,8 @@ export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
   const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
   const loading = useIsPrefetchLoading();
 
+  const theme = useTheme();
+
   if (loading && isDefined(currentUser)) {
     return <ObjectMetadataNavItemsSkeletonLoader />;
   }
@@ -96,7 +111,7 @@ export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
               objectMetadataViews.length > 1;
 
             return (
-              <React.Fragment key={objectMetadataItem.id}>
+              <div key={objectMetadataItem.id}>
                 <NavigationDrawerItem
                   key={objectMetadataItem.id}
                   label={objectMetadataItem.labelPlural}
@@ -106,26 +121,38 @@ export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
                     currentPath === `/objects/${objectMetadataItem.namePlural}`
                   }
                 />
-                {shouldSubItemsBeDisplayed &&
-                  objectMetadataViews
-                    .sort((viewA, viewB) =>
-                      viewA.key === 'INDEX'
-                        ? -1
-                        : viewA.position - viewB.position,
-                    )
-                    .map((view) => (
-                      <NavigationDrawerSubItem
-                        key={view.id}
-                        label={view.name}
-                        to={`/objects/${objectMetadataItem.namePlural}?view=${view.id}`}
-                        active={
-                          currentPathWithSearch ===
-                          `/objects/${objectMetadataItem.namePlural}?view=${view.id}`
-                        }
-                        Icon={getIcon(view.icon)}
-                      />
-                    ))}
-              </React.Fragment>
+                <AnimatePresence>
+                  {shouldSubItemsBeDisplayed && (
+                    <motion.div
+                      initial="hidden"
+                      animate="visible"
+                      exit="hidden"
+                      variants={navItemsAnimationVariants(theme)}
+                      transition={{ duration: 0.3, ease: 'easeInOut' }}
+                    >
+                      {objectMetadataViews
+                        .sort((viewA, viewB) =>
+                          viewA.key === 'INDEX'
+                            ? -1
+                            : viewA.position - viewB.position,
+                        )
+                        .map((view) => (
+                          <div>
+                            <NavigationDrawerSubItem
+                              label={view.name}
+                              to={`/objects/${objectMetadataItem.namePlural}?view=${view.id}`}
+                              active={
+                                currentPathWithSearch ===
+                                `/objects/${objectMetadataItem.namePlural}?view=${view.id}`
+                              }
+                              Icon={getIcon(view.icon)}
+                            />
+                          </div>
+                        ))}
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
             );
           })}
       </NavigationDrawerSection>