Update sidebar section toggle to match Figma chevron (#18631)

Summary
- thicken the sidebar toggle chevron to align with the Figma design
- add animation for the chevron when sections open or close



https://github.com/user-attachments/assets/67bff9e1-4df5-4ff2-a48d-b761030ada51

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>

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

@@ -3,10 +3,11 @@ import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNaviga
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { styled } from '@linaria/react';
-import React from 'react';
+import { motion } from 'framer-motion';
+import React, { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { IconChevronDown, IconChevronRight, Label } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconChevronRight, Label } from 'twenty-ui/display';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledTitle = styled.div`
   align-items: center;
@@ -40,11 +41,15 @@ const StyledChevron = styled.div`
   align-items: center;
   display: flex;
   opacity: 0;
+  transition: opacity calc(${themeCssVariables.animation.duration.fast} * 1s)
+    ease;
   .section-title-container:hover & {
     opacity: 1;
   }
 `;
 
+const MotionIconChevronRight = motion.create(IconChevronRight);
+
 type StyledRightIconProps = {
   isMobile: boolean;
   $alwaysVisible: boolean;
@@ -75,6 +80,7 @@ export const NavigationDrawerSectionTitle = ({
   alwaysShowRightIcon = false,
   isOpen,
 }: NavigationDrawerSectionTitleProps) => {
+  const { theme } = useContext(ThemeContext);
   const isMobile = useIsMobile();
   const isNavigationDrawerExpanded = useAtomStateValue(
     isNavigationDrawerExpandedState,
@@ -87,17 +93,18 @@ export const NavigationDrawerSectionTitle = ({
     }
   };
 
-  const ChevronIcon = isOpen === true ? IconChevronDown : IconChevronRight;
-
   return (
     <StyledTitle className="section-title-container">
       <StyledLabelContainer onClick={handleTitleClick}>
         <Label className="section-title-label">{label}</Label>
         {isOpen !== undefined && (
           <StyledChevron>
-            <ChevronIcon
+            <MotionIconChevronRight
+              initial={false}
+              animate={{ rotate: isOpen ? 90 : 0 }}
+              transition={{ duration: theme.animation.duration.normal }}
               size="12px"
-              stroke={themeCssVariables.icon.stroke.sm}
+              stroke={theme.icon.stroke.lg}
               color={themeCssVariables.font.color.tertiary}
             />
           </StyledChevron>