From 6c172a9d3dd8b34b6e60d1eefafa8e34afc3da85 Mon Sep 17 00:00:00 2001
From: AliElsayed <ali.elamiir.a@gmail.com>
Date: Sat, 3 Aug 2024 09:52:54 +0300
Subject: [PATCH 1/3] Animate the Sidebar Objects Tree view opening

---
 .../components/ObjectMetadataNavItems.tsx     | 54 ++++++++++++-------
 1 file changed, 34 insertions(+), 20 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
index ed14eaf674a0..9a31f4ad2712 100644
--- 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,5 @@
+import { motion } from 'framer-motion';
 import React from 'react';
-
 import { useLocation } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { useIcons } from 'twenty-ui';
@@ -17,6 +17,11 @@ import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/us
 import { View } from '@/views/types/View';
 import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemViews';
 
+const navItemsAnimationVariants = {
+  hidden: { height: 0 },
+  visible: { height: 'auto' },
+};
+
 export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
   const { toggleNavigationSection, isNavigationSectionOpenState } =
     useNavigationSection('Objects' + (isRemote ? 'Remote' : 'Workspace'));
@@ -103,25 +108,34 @@ 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)}
-                      />
-                    ))}
+                {shouldSubItemsBeDisplayed && (
+                  <motion.div
+                    initial="hidden"
+                    animate="visible"
+                    exit="hidden"
+                    variants={navItemsAnimationVariants}
+                    transition={{ duration: 0.3 }}
+                  >
+                    {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)}
+                        />
+                      ))}
+                  </motion.div>
+                )}
               </React.Fragment>
             );
           })}

From 6ee79b08df2762ee61a9124a2c837d36186b9968 Mon Sep 17 00:00:00 2001
From: AliElsayed <ali.elamiir.a@gmail.com>
Date: Tue, 6 Aug 2024 01:37:25 +0300
Subject: [PATCH 2/3] Adjust sidebar object tree view animation

---
 .../components/ObjectMetadataNavItems.tsx     | 72 +++++++++++--------
 1 file changed, 42 insertions(+), 30 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
index 9a31f4ad2712..7887a463af1d 100644
--- a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
+++ b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import React from 'react';
 import { useLocation } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
@@ -18,8 +18,13 @@ import { View } from '@/views/types/View';
 import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemViews';
 
 const navItemsAnimationVariants = {
-  hidden: { height: 0 },
-  visible: { height: 'auto' },
+  hidden: { height: 0, opacity: 0, transition: { duration: 0.3, staggerChildren: 0.1, staggerDirection: -1 } },
+  visible: { height: 'auto', opacity: 1, transition: { duration: 0.3, staggerChildren: 0.1 } }
+};
+
+const navSubItemsAnimationVariants = {
+  hidden: { opacity: 0},
+  visible: { opacity: 1}
 };
 
 export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
@@ -108,34 +113,41 @@ export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
                     currentPath === `/objects/${objectMetadataItem.namePlural}`
                   }
                 />
-                {shouldSubItemsBeDisplayed && (
-                  <motion.div
-                    initial="hidden"
-                    animate="visible"
-                    exit="hidden"
-                    variants={navItemsAnimationVariants}
-                    transition={{ duration: 0.3 }}
-                  >
-                    {objectMetadataViews
-                      .sort((viewA, viewB) =>
-                        viewA.key === 'INDEX'
-                          ? -1
-                          : viewA.position - viewB.position,
-                      )
-                      .map((view) => (
-                        <NavigationDrawerSubItem
+                <AnimatePresence>
+                  {shouldSubItemsBeDisplayed && (
+                    <motion.div
+                      initial="hidden"
+                      animate="visible"
+                      exit="hidden"
+                      variants={navItemsAnimationVariants}
+                    >
+                      {objectMetadataViews
+                        .sort((viewA, viewB) =>
+                          viewA.key === 'INDEX'
+                            ? -1
+                            : viewA.position - viewB.position,
+                        )
+                        .map((view) => (
+                          <motion.div
                           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)}
-                        />
-                      ))}
-                  </motion.div>
-                )}
+                          variants={navSubItemsAnimationVariants}
+                          transition={{duration:0.3}}
+                          >
+                            <NavigationDrawerSubItem
+                              
+                              label={view.name}
+                              to={`/objects/${objectMetadataItem.namePlural}?view=${view.id}`}
+                              active={
+                                currentPathWithSearch ===
+                                `/objects/${objectMetadataItem.namePlural}?view=${view.id}`
+                              }
+                              Icon={getIcon(view.icon)}
+                            />
+                          </motion.div>
+                        ))}
+                    </motion.div>
+                  )}
+                </AnimatePresence>
               </React.Fragment>
             );
           })}

From 2a97d779c1ac177199138b4f7097c459133f3a87 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Tue, 6 Aug 2024 11:01:35 +0200
Subject: [PATCH 3/3] few modifications to make the animation smoother

---
 .../components/ObjectMetadataNavItems.tsx     | 41 ++++++++++---------
 1 file changed, 21 insertions(+), 20 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
index 7887a463af1d..d42a1f43f74a 100644
--- 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 { AnimatePresence, motion } from 'framer-motion';
-import React from 'react';
 import { useLocation } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { useIcons } from 'twenty-ui';
@@ -16,16 +15,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 = {
-  hidden: { height: 0, opacity: 0, transition: { duration: 0.3, staggerChildren: 0.1, staggerDirection: -1 } },
-  visible: { height: 'auto', opacity: 1, transition: { duration: 0.3, staggerChildren: 0.1 } }
-};
-
-const navSubItemsAnimationVariants = {
-  hidden: { opacity: 0},
-  visible: { opacity: 1}
-};
+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 { toggleNavigationSection, isNavigationSectionOpenState } =
@@ -43,6 +46,8 @@ export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
   const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
   const loading = useIsPrefetchLoading();
 
+  const theme = useTheme();
+
   if (loading) {
     return <ObjectMetadataNavItemsSkeletonLoader />;
   }
@@ -103,7 +108,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}
@@ -119,7 +124,8 @@ export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
                       initial="hidden"
                       animate="visible"
                       exit="hidden"
-                      variants={navItemsAnimationVariants}
+                      variants={navItemsAnimationVariants(theme)}
+                      transition={{ duration: 0.3, ease: 'easeInOut' }}
                     >
                       {objectMetadataViews
                         .sort((viewA, viewB) =>
@@ -128,13 +134,8 @@ export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
                             : viewA.position - viewB.position,
                         )
                         .map((view) => (
-                          <motion.div
-                          key={view.id}
-                          variants={navSubItemsAnimationVariants}
-                          transition={{duration:0.3}}
-                          >
+                          <div>
                             <NavigationDrawerSubItem
-                              
                               label={view.name}
                               to={`/objects/${objectMetadataItem.namePlural}?view=${view.id}`}
                               active={
@@ -143,12 +144,12 @@ export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
                               }
                               Icon={getIcon(view.icon)}
                             />
-                          </motion.div>
+                          </div>
                         ))}
                     </motion.div>
                   )}
                 </AnimatePresence>
-              </React.Fragment>
+              </div>
             );
           })}
       </NavigationDrawerSection>