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/favorites/components/Favorites.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
 import { Avatar } from 'twenty-ui';
 
 import { FavoritesSkeletonLoader } from '@/favorites/components/FavoritesSkeletonLoader';
@@ -8,6 +9,7 @@ import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableLi
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
 import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
+import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
 import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
 
 import { useFavorites } from '../hooks/useFavorites';
@@ -36,6 +38,10 @@ export const Favorites = () => {
   const { favorites, handleReorderFavorite } = useFavorites();
   const loading = useIsPrefetchLoading();
 
+  const { toggleNavigationSection, isNavigationSectionOpenState } =
+    useNavigationSection('Favorites');
+  const isNavigationSectionOpen = useRecoilValue(isNavigationSectionOpenState);
+
   if (loading) {
     return <FavoritesSkeletonLoader />;
   }
@@ -44,48 +50,53 @@ export const Favorites = () => {
 
   return (
     <StyledContainer>
-      <NavigationDrawerSectionTitle label="Favorites" />
-      <DraggableList
-        onDragEnd={handleReorderFavorite}
-        draggableItems={
-          <>
-            {favorites.map((favorite, index) => {
-              const {
-                id,
-                labelIdentifier,
-                avatarUrl,
-                avatarType,
-                link,
-                recordId,
-              } = favorite;
-
-              return (
-                <DraggableItem
-                  key={id}
-                  draggableId={id}
-                  index={index}
-                  itemComponent={
-                    <StyledNavigationDrawerItem
-                      key={id}
-                      label={labelIdentifier}
-                      Icon={() => (
-                        <StyledAvatar
-                          entityId={recordId}
-                          avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
-                          type={avatarType}
-                          placeholder={labelIdentifier}
-                          className="fav-avatar"
-                        />
-                      )}
-                      to={link}
-                    />
-                  }
-                />
-              );
-            })}
-          </>
-        }
+      <NavigationDrawerSectionTitle
+        label="Favorites"
+        onClick={() => toggleNavigationSection()}
       />
+      {isNavigationSectionOpen && (
+        <DraggableList
+          onDragEnd={handleReorderFavorite}
+          draggableItems={
+            <>
+              {favorites.map((favorite, index) => {
+                const {
+                  id,
+                  labelIdentifier,
+                  avatarUrl,
+                  avatarType,
+                  link,
+                  recordId,
+                } = favorite;
+
+                return (
+                  <DraggableItem
+                    key={id}
+                    draggableId={id}
+                    index={index}
+                    itemComponent={
+                      <StyledNavigationDrawerItem
+                        key={id}
+                        label={labelIdentifier}
+                        Icon={() => (
+                          <StyledAvatar
+                            entityId={recordId}
+                            avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
+                            type={avatarType}
+                            placeholder={labelIdentifier}
+                            className="fav-avatar"
+                          />
+                        )}
+                        to={link}
+                      />
+                    }
+                  />
+                );
+              })}
+            </>
+          }
+        />
+      )}
     </StyledContainer>
   );
 };