Settings Advanced Mode (#7130)

### Description

- We implemented the Advanced Mode state and used this on a section of
the settings sidebar
- in DefaultLayout.tsx, was updated because of the 64 + 16(container
size of IconTool + the margins)

### <https://jam.dev/c/29bcec70-0b7f-4afa-98e6-9755657cf09d>

### Refs

#6147 

Fixes #6147

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>

packages/twenty-front/src/modules/settings/hooks/useExpandedHeightAnimation.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from 'react';
+import { isDefined } from 'twenty-ui';
+
+const transitionValues = {
+  transition: {
+    opactity: { duration: 0.2 },
+    height: { duration: 0.4 },
+  },
+  transitionEnd: {
+    overflow: 'visible',
+  },
+};
+
+const commonStyles = {
+  opacity: 0,
+  height: 0,
+  overflow: 'hidden',
+  ...transitionValues,
+};
+
+const advancedSectionAnimationConfig = (
+  isExpanded: boolean,
+  measuredHeight: number,
+) => ({
+  initial: {
+    ...commonStyles,
+  },
+  animate: {
+    opacity: 1,
+    height: isExpanded ? measuredHeight : 0,
+    ...transitionValues,
+    overflow: 'hidden',
+  },
+  exit: {
+    ...commonStyles,
+  },
+});
+
+export const useExpandedHeightAnimation = (isExpanded: boolean) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [measuredHeight, setMeasuredHeight] = useState(0);
+
+  useEffect(() => {
+    if (isDefined(contentRef.current)) {
+      setMeasuredHeight(contentRef.current.scrollHeight);
+    }
+  }, [isExpanded]);
+
+  return {
+    contentRef,
+    measuredHeight,
+    motionAnimationVariants: advancedSectionAnimationConfig(
+      isExpanded,
+      measuredHeight,
+    ),
+  };
+};