twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-23 05:53:31 +03:00
Code Issues Packages Projects Releases Wiki Activity

Animate the Sidebar Objects Tree view opening (#6521)

Browse Source 
@Bonapara 

Issue https://github.com/twentyhq/twenty/issues/6485

Introduced the animation when opening the menu.

Please let me know if this is fine or I need to make further changes.
Thank you.

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
This commit is contained in:
Ali Elamir 2024-08-06 12:28:06 +03:00 committed by GitHub
parent 23a2821a28
commit cd33471159
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 50 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
View File

@ -1,5 +1,4 @@
import React from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { useLocation } from 'react-router-dom';
import { useRecoilValue } from 'recoil';
import { isDefined, useIcons } from 'twenty-ui';
@ -17,6 +16,20 @@ import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/compo
import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
import { View } from '@/views/types/View';
import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemViews';
import { Theme, useTheme } from '@emotion/react';
const navItemsAnimationVariants = (theme: Theme) => ({
hidden: {
height: 0,
opacity: 0,
marginTop: 0,
},
visible: {
height: 'auto',
opacity: 1,
marginTop: theme.spacing(1),
},
});
export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
const currentUser = useRecoilValue(currentUserState);
@ -36,6 +49,8 @@ export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
const loading = useIsPrefetchLoading();
const theme = useTheme();
if (loading && isDefined(currentUser)) {
return <ObjectMetadataNavItemsSkeletonLoader />;
}
@ -96,7 +111,7 @@ export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
objectMetadataViews.length > 1;
return (
<React.Fragment key={objectMetadataItem.id}>
<div key={objectMetadataItem.id}>
<NavigationDrawerItem
key={objectMetadataItem.id}
label={objectMetadataItem.labelPlural}
@ -106,26 +121,38 @@ export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
currentPath === `/objects/${objectMetadataItem.namePlural}`
}
/>
{shouldSubItemsBeDisplayed &&
objectMetadataViews
.sort((viewA, viewB) =>
viewA.key === 'INDEX'
? -1
: viewA.position - viewB.position,
)
.map((view) => (
<NavigationDrawerSubItem
key={view.id}
label={view.name}
to={`/objects/${objectMetadataItem.namePlural}?view=${view.id}`}
active={
currentPathWithSearch ===
`/objects/${objectMetadataItem.namePlural}?view=${view.id}`
}
Icon={getIcon(view.icon)}
/>
))}
</React.Fragment>
<AnimatePresence>
{shouldSubItemsBeDisplayed && (
<motion.div
initial="hidden"
animate="visible"
exit="hidden"
variants={navItemsAnimationVariants(theme)}
transition={{ duration: 0.3, ease: 'easeInOut' }}
>
{objectMetadataViews
.sort((viewA, viewB) =>
viewA.key === 'INDEX'
? -1
: viewA.position - viewB.position,
)
.map((view) => (
<div>
<NavigationDrawerSubItem
label={view.name}
to={`/objects/${objectMetadataItem.namePlural}?view=${view.id}`}
active={
currentPathWithSearch ===
`/objects/${objectMetadataItem.namePlural}?view=${view.id}`
}
Icon={getIcon(view.icon)}
/>
</div>
))}
</motion.div>
)}
</AnimatePresence>
</div>
);
})}
</NavigationDrawerSection>