From 0692bba71045c0fe4d7a82db40531f0d44b2cd21 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Tue, 17 Dec 2024 14:43:41 +0530
Subject: [PATCH] fix advanced mode settings navigation animations (#9096)

Before:


https://github.com/user-attachments/assets/9aa8b8ec-2490-4fb2-8d1e-a01b09349eda

After:


https://github.com/user-attachments/assets/eb76471d-2d11-4e85-94ce-24c25acf274a
---
 .../SettingsNavigationDrawerItems.tsx         | 57 ++++++++++++-------
 1 file changed, 36 insertions(+), 21 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
index 7a5bd5bce..0f7089195 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
@@ -68,9 +68,14 @@ const StyledIconPoint = styled(IconPoint)`
 
 export const SettingsNavigationDrawerItems = () => {
   const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
-  const { contentRef, motionAnimationVariants } = useExpandedAnimation(
-    isAdvancedModeEnabled,
-  );
+  const {
+    contentRef: securityRef,
+    motionAnimationVariants: securityAnimationVariants,
+  } = useExpandedAnimation(isAdvancedModeEnabled);
+  const {
+    contentRef: developersRef,
+    motionAnimationVariants: developersAnimationVariants,
+  } = useExpandedAnimation(isAdvancedModeEnabled);
   const { signOut } = useAuth();
 
   const billing = useRecoilValue(billingState);
@@ -188,32 +193,42 @@ export const SettingsNavigationDrawerItems = () => {
             Icon={IconCode}
           />
         )}
-        {isAdvancedModeEnabled && (
-          <StyledContainer>
-            <StyledIconContainer>
-              <StyledIconPoint
-                size={12}
-                color={MAIN_COLORS.yellow}
-                fill={MAIN_COLORS.yellow}
-              />
-            </StyledIconContainer>
-            <SettingsNavigationDrawerItem
-              label="Security"
-              path={SettingsPath.Security}
-              Icon={IconKey}
-            />
-          </StyledContainer>
-        )}
+        <AnimatePresence>
+          {isAdvancedModeEnabled && (
+            <motion.div
+              ref={securityRef}
+              initial="initial"
+              animate="animate"
+              exit="exit"
+              variants={securityAnimationVariants}
+            >
+              <StyledContainer>
+                <StyledIconContainer>
+                  <StyledIconPoint
+                    size={12}
+                    color={MAIN_COLORS.yellow}
+                    fill={MAIN_COLORS.yellow}
+                  />
+                </StyledIconContainer>
+                <SettingsNavigationDrawerItem
+                  label="Security"
+                  path={SettingsPath.Security}
+                  Icon={IconKey}
+                />
+              </StyledContainer>
+            </motion.div>
+          )}
+        </AnimatePresence>
       </NavigationDrawerSection>
 
       <AnimatePresence>
         {isAdvancedModeEnabled && (
           <motion.div
-            ref={contentRef}
+            ref={developersRef}
             initial="initial"
             animate="animate"
             exit="exit"
-            variants={motionAnimationVariants}
+            variants={developersAnimationVariants}
           >
             <NavigationDrawerSection>
               <NavigationDrawerSectionTitle label="Developers" />