animation fix

ui/snippets/navigation/NavigationMobile.tsx

 import { Box, Flex, Text, Icon, VStack, useColorModeValue } from '@chakra-ui/react';
-import { AnimatePresence, animate, motion, useMotionValue } from 'framer-motion';
+import { animate, motion, useMotionValue } from 'framer-motion';
 import React, { useCallback } from 'react';
 
 import appConfig from 'configs/app/config';
@@ -16,17 +16,19 @@ const NavigationMobile = () => {
 
   const [ openedGroupIndex, setOpenedGroupIndex ] = React.useState(-1);
 
-  const x = useMotionValue(0);
+  const mainX = useMotionValue(0);
+  const subX = useMotionValue(250);
 
   const onGroupItemOpen = (index: number) => () => {
-    animate(x, -250);
     setOpenedGroupIndex(index);
+    animate(mainX, -250, { ease: 'easeInOut' });
+    animate(subX, 0, { ease: 'easeInOut' });
   };
 
   const onGroupItemClose = useCallback(() => {
-    animate(x, 0);
-    setOpenedGroupIndex(-1);
-  }, [ x ]);
+    animate(mainX, 0, { ease: 'easeInOut' });
+    animate(subX, 250, { ease: 'easeInOut', onComplete: () => setOpenedGroupIndex(-1) });
+  }, [ mainX, subX ]);
 
   const isAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN));
   const hasAccount = appConfig.isAccountSupported && isAuth;
@@ -39,8 +41,7 @@ const NavigationMobile = () => {
         <Box
           as={ motion.nav }
           mt={ 6 }
-          style={{ x }}
-          transitionDuration="100ms"
+          style={{ x: mainX }}
         >
           <VStack
             w="100%"
@@ -61,43 +62,36 @@ const NavigationMobile = () => {
           <Box
             as={ motion.nav }
             mt={ 6 }
-            style={{ x }}
-            transitionDuration="100ms"
+            style={{ x: mainX }}
           >
             <VStack as="ul" spacing="1" alignItems="flex-start">
               { accountNavItems.map((item) => <NavLink key={ item.text } { ...item }/>) }
             </VStack>
           </Box>
         ) }
-        <AnimatePresence>
-          { openedGroupIndex >= 0 && (
-            <Box
-              as={ motion.nav }
-              mt={ 6 }
-              position="absolute"
-              top={ 0 }
-              initial={{ x: 250 }}
-              animate={{ x: 0 }}
-              exit={{ x: 250 }}
-              transitionDuration="100ms"
-              transitionTimingFunction="linear"
-              key="sub"
+        { openedGroupIndex >= 0 && (
+          <Box
+            as={ motion.nav }
+            mt={ 6 }
+            position="absolute"
+            top={ 0 }
+            style={{ x: subX }}
+            key="sub"
+          >
+            <VStack
+              w="100%"
+              as="ul"
+              spacing="1"
+              alignItems="flex-start"
             >
-              <VStack
-                w="100%"
-                as="ul"
-                spacing="1"
-                alignItems="flex-start"
-              >
-                <Flex alignItems="center" px={ 3 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose }>
-                  <Icon as={ chevronIcon } boxSize={ 6 } mr={ 2 } color={ iconColor }/>
-                  <Text variant="secondary" fontSize="sm">{ mainNavItems[openedGroupIndex].text }</Text>
-                </Flex>
-                { mainNavItems[openedGroupIndex].subItems?.map((item) => <NavLink key={ item.text } { ...item }/>) }
-              </VStack>
-            </Box>
-          ) }
-        </AnimatePresence>
+              <Flex alignItems="center" px={ 3 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose }>
+                <Icon as={ chevronIcon } boxSize={ 6 } mr={ 2 } color={ iconColor }/>
+                <Text variant="secondary" fontSize="sm">{ mainNavItems[openedGroupIndex].text }</Text>
+              </Flex>
+              { mainNavItems[openedGroupIndex].subItems?.map((item) => <NavLink key={ item.text } { ...item }/>) }
+            </VStack>
+          </Box>
+        ) }
       </Box>
       <NavFooter hasAccount={ hasAccount }/>
     </>