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

@@ -2,21 +2,34 @@ import styled from '@emotion/styled';
 
 import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
 import { NavigationDrawerSectionTitleSkeletonLoader } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitleSkeletonLoader';
+import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 type NavigationDrawerSectionTitleProps = {
+  onClick?: () => void;
   label: string;
 };
 
-const StyledTitle = styled.div`
+const StyledTitle = styled.div<{ onClick?: () => void }>`
+  align-items: center;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ theme }) => theme.font.color.light};
   display: flex;
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  height: ${({ theme }) => theme.spacing(4)};
   padding: ${({ theme }) => theme.spacing(1)};
-  padding-top: 0;
+
+  ${({ onClick, theme }) =>
+    !isUndefinedOrNull(onClick)
+      ? `&:hover {
+          cursor: pointer;
+          background-color:${theme.background.transparent.light};
+        }`
+      : ''}
 `;
 
 export const NavigationDrawerSectionTitle = ({
+  onClick,
   label,
 }: NavigationDrawerSectionTitleProps) => {
   const loading = useIsPrefetchLoading();
@@ -24,5 +37,5 @@ export const NavigationDrawerSectionTitle = ({
   if (loading) {
     return <NavigationDrawerSectionTitleSkeletonLoader />;
   }
-  return <StyledTitle>{label}</StyledTitle>;
+  return <StyledTitle onClick={onClick}>{label}</StyledTitle>;
 };