Animate the sidebar when opening/closing an element in the "opened" section (#18867)

https://github.com/user-attachments/assets/38f64750-7bca-4b10-8489-11d386a10298

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/navigation-menu-item/display/sections/components/NavigationDrawerOpenedSection.tsx

@@ -4,13 +4,13 @@ import { useWorkspaceNavigationMenuItems } from '@/navigation-menu-item/display/
 import { NavigationDrawerSectionForObjectMetadataItems } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { useLingui } from '@lingui/react/macro';
+import { isDefined } from 'twenty-shared/utils';
+import { AnimatedExpandableContainer } from 'twenty-ui/layout';
 
 export const NavigationDrawerOpenedSection = () => {
   const { t } = useLingui();
 
   const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();
-  const filteredActiveNonSystemObjectMetadataItems =
-    activeObjectMetadataItems.filter((item) => !item.isRemote);
 
   const { objectMetadataIdsInWorkspaceNav } = useWorkspaceNavigationMenuItems();
 
@@ -19,31 +19,23 @@ export const NavigationDrawerOpenedSection = () => {
     objectNameSingular: currentObjectNameSingular,
   } = useParams();
 
-  if (!currentObjectNamePlural && !currentObjectNameSingular) {
-    return;
-  }
-
-  const objectMetadataItem = filteredActiveNonSystemObjectMetadataItems.find(
+  const objectMetadataItem = activeObjectMetadataItems.find(
     (item) =>
       item.namePlural === currentObjectNamePlural ||
       item.nameSingular === currentObjectNameSingular,
   );
-
-  if (!objectMetadataItem) {
-    return;
-  }
-
-  const isObjectAlreadyInNavbar = objectMetadataIdsInWorkspaceNav.has(
-    objectMetadataItem.id,
-  );
+  const shouldShowOpenedSection = isDefined(objectMetadataItem)
+    ? !objectMetadataIdsInWorkspaceNav.has(objectMetadataItem.id)
+    : false;
 
   return (
-    !isObjectAlreadyInNavbar && (
+    <AnimatedExpandableContainer isExpanded={shouldShowOpenedSection}>
       <NavigationDrawerSectionForObjectMetadataItems
         sectionTitle={t`Opened`}
-        objectMetadataItems={[objectMetadataItem]}
-        isRemote={false}
+        objectMetadataItems={
+          isDefined(objectMetadataItem) ? [objectMetadataItem] : []
+        }
       />
-    )
+    </AnimatedExpandableContainer>
   );
 };

packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx

@@ -1,6 +1,5 @@
 import { NavigationDrawerOpenedSection } from '@/navigation-menu-item/display/sections/components/NavigationDrawerOpenedSection';
 import { NavigationDrawerWorkspaceSectionSkeletonLoader } from '@/object-metadata/components/NavigationDrawerWorkspaceSectionSkeletonLoader';
-import { RemoteNavigationDrawerSection } from '@/object-metadata/components/RemoteNavigationDrawerSection';
 
 import { NavigationDrawerOtherSection } from '@/navigation/components/NavigationDrawerOtherSection';
 import { styled } from '@linaria/react';
@@ -38,7 +37,6 @@ export const MainNavigationDrawerScrollableItems = () => {
         <FavoritesSectionDispatcher />
         <WorkspaceSectionDispatcher />
       </Suspense>
-      <RemoteNavigationDrawerSection />
       <NavigationDrawerOtherSection />
     </StyledScrollableItemsContainer>
   );

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems.tsx

@@ -25,7 +25,6 @@ const ORDERED_LAST_STANDARD_OBJECTS: string[] = [
 
 type NavigationDrawerSectionForObjectMetadataItemsProps = {
   sectionTitle: string;
-  isRemote: boolean;
   objectMetadataItems: EnrichedObjectMetadataItem[];
   rightIcon?: React.ReactNode;
   selectedObjectMetadataItemId?: string | null;
@@ -39,14 +38,13 @@ type NavigationDrawerSectionForObjectMetadataItemsProps = {
 
 export const NavigationDrawerSectionForObjectMetadataItems = ({
   sectionTitle,
-  isRemote,
   objectMetadataItems,
   rightIcon,
   selectedObjectMetadataItemId = null,
   onObjectMetadataItemClick,
   onActiveObjectMetadataItemClick,
 }: NavigationDrawerSectionForObjectMetadataItemsProps) => {
-  const navigationSectionId = 'Objects' + (isRemote ? 'Remote' : 'Workspace');
+  const navigationSectionId = 'ObjectsWorkspace';
   const { toggleNavigationSection } = useNavigationSection(navigationSectionId);
   const isNavigationSectionOpen = useAtomFamilyStateValue(
     isNavigationSectionOpenFamilyState,

packages/twenty-front/src/modules/object-metadata/components/RemoteNavigationDrawerSection.tsx

@@ -1,20 +0,0 @@
-import { NavigationDrawerSectionForObjectMetadataItems } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems';
-import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
-import { useLingui } from '@lingui/react/macro';
-
-export const RemoteNavigationDrawerSection = () => {
-  const { t } = useLingui();
-
-  const { activeNonSystemObjectMetadataItems } =
-    useFilteredObjectMetadataItems();
-  const filteredActiveNonSystemObjectMetadataItems =
-    activeNonSystemObjectMetadataItems.filter((item) => item.isRemote);
-
-  return (
-    <NavigationDrawerSectionForObjectMetadataItems
-      sectionTitle={t`Remote`}
-      objectMetadataItems={filteredActiveNonSystemObjectMetadataItems}
-      isRemote={true}
-    />
-  );
-};

packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx

@@ -58,7 +58,6 @@ export const SignInAppNavigationDrawerMock = ({
       )}
       <NavigationDrawerSectionForObjectMetadataItems
         sectionTitle={t`Workspace`}
-        isRemote={false}
         objectMetadataItems={objectMetadataItems.filter((item) =>
           WORKSPACE_FAVORITES.includes(item.nameSingular),
         )}