Collapsible menu (#5846)

A mini PR to discuss with @Bonapara tomorrow

Separating remote objects from others and making the menu collapsible
(style to be changed)
<img width="225" alt="Screenshot 2024-06-12 at 23 25 59"
src="https://github.com/twentyhq/twenty/assets/6399865/b4b69d36-6770-43a2-a5e8-bfcdf0a629ea">

Biggest issue is we don't use local storage today so the collapsed state
gets lost.
I see we have localStorageEffect with recoil. Maybe store it there?
Seems easy but don't want to introduce a bad pattern.


Todo:
- style update
- collapsible favorites
- persistent storage

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/hooks/useNavigationSection.ts

@@ -0,0 +1,60 @@
+import { useRecoilCallback } from 'recoil';
+
+import { isNavigationSectionOpenComponentState } from '@/ui/navigation/navigation-drawer/states/isNavigationSectionOpenComponentState';
+import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
+
+export const useNavigationSection = (scopeId: string) => {
+  const closeNavigationSection = useRecoilCallback(
+    ({ set }) =>
+      () => {
+        set(
+          isNavigationSectionOpenComponentState({
+            scopeId,
+          }),
+          false,
+        );
+      },
+    [scopeId],
+  );
+
+  const openNavigationSection = useRecoilCallback(
+    ({ set }) =>
+      () => {
+        set(
+          isNavigationSectionOpenComponentState({
+            scopeId,
+          }),
+          true,
+        );
+      },
+    [scopeId],
+  );
+
+  const toggleNavigationSection = useRecoilCallback(
+    ({ snapshot }) =>
+      () => {
+        const isNavigationSectionOpen = snapshot
+          .getLoadable(isNavigationSectionOpenComponentState({ scopeId }))
+          .getValue();
+
+        if (isNavigationSectionOpen) {
+          closeNavigationSection();
+        } else {
+          openNavigationSection();
+        }
+      },
+    [closeNavigationSection, openNavigationSection, scopeId],
+  );
+
+  const isNavigationSectionOpenState = extractComponentState(
+    isNavigationSectionOpenComponentState,
+    scopeId,
+  );
+
+  return {
+    isNavigationSectionOpenState,
+    closeNavigationSection,
+    openNavigationSection,
+    toggleNavigationSection,
+  };
+};