From b642d1b114362cd42f59f611f27d0c173ffd3fee Mon Sep 17 00:00:00 2001 From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com> Date: Wed, 25 Mar 2026 05:14:01 +0530 Subject: [PATCH] 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 --- .../NavigationDrawerOpenedSection.tsx | 30 +++++++------------ .../MainNavigationDrawerScrollableItems.tsx | 2 -- ...ionDrawerSectionForObjectMetadataItems.tsx | 4 +-- .../RemoteNavigationDrawerSection.tsx | 20 ------------- .../SignInAppNavigationDrawerMock.tsx | 1 - 5 files changed, 12 insertions(+), 45 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-metadata/components/RemoteNavigationDrawerSection.tsx diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/sections/components/NavigationDrawerOpenedSection.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/sections/components/NavigationDrawerOpenedSection.tsx index 11659139ad..d01bc67b2e 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/display/sections/components/NavigationDrawerOpenedSection.tsx +++ b/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 && ( + - ) + ); }; diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx index 97cc19f279..cffe96eca2 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx +++ b/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 = () => { - ); diff --git a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems.tsx b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems.tsx index aa717df000..55047d3716 100644 --- a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems.tsx +++ b/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, diff --git a/packages/twenty-front/src/modules/object-metadata/components/RemoteNavigationDrawerSection.tsx b/packages/twenty-front/src/modules/object-metadata/components/RemoteNavigationDrawerSection.tsx deleted file mode 100644 index e65273b1f6..0000000000 --- a/packages/twenty-front/src/modules/object-metadata/components/RemoteNavigationDrawerSection.tsx +++ /dev/null @@ -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 ( - - ); -}; diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx index b1ca20b102..fce9b61590 100644 --- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx +++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx @@ -58,7 +58,6 @@ export const SignInAppNavigationDrawerMock = ({ )} WORKSPACE_FAVORITES.includes(item.nameSingular), )}