admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix advanced mode settings navigation animations (#9096)

Browse Source 
Before:


https://github.com/user-attachments/assets/9aa8b8ec-2490-4fb2-8d1e-a01b09349eda

After: 


https://github.com/user-attachments/assets/eb76471d-2d11-4e85-94ce-24c25acf274a
This commit is contained in:
nitin
2024-12-17 14:43:41 +05:30
committed by GitHub
parent 08a9db2df6
commit 0692bba710
1 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
View File

@ -68,9 +68,14 @@ const StyledIconPoint = styled(IconPoint)`
export const SettingsNavigationDrawerItems = () => { export const SettingsNavigationDrawerItems = () => {
const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState); const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
const { contentRef, motionAnimationVariants } = useExpandedAnimation( const {
isAdvancedModeEnabled, contentRef: securityRef,
); motionAnimationVariants: securityAnimationVariants,
} = useExpandedAnimation(isAdvancedModeEnabled);
const {
contentRef: developersRef,
motionAnimationVariants: developersAnimationVariants,
} = useExpandedAnimation(isAdvancedModeEnabled);
const { signOut } = useAuth(); const { signOut } = useAuth();
const billing = useRecoilValue(billingState); const billing = useRecoilValue(billingState);
@ -188,32 +193,42 @@ export const SettingsNavigationDrawerItems = () => {
Icon={IconCode} Icon={IconCode}
/> />
)} )}
{isAdvancedModeEnabled && ( <AnimatePresence>
<StyledContainer> {isAdvancedModeEnabled && (
<StyledIconContainer> <motion.div
<StyledIconPoint ref={securityRef}
size={12} initial="initial"
color={MAIN_COLORS.yellow} animate="animate"
fill={MAIN_COLORS.yellow} exit="exit"
/> variants={securityAnimationVariants}
</StyledIconContainer> >
<SettingsNavigationDrawerItem <StyledContainer>
label="Security" <StyledIconContainer>
path={SettingsPath.Security} <StyledIconPoint
Icon={IconKey} size={12}
/> color={MAIN_COLORS.yellow}
</StyledContainer> fill={MAIN_COLORS.yellow}
)} />
</StyledIconContainer>
<SettingsNavigationDrawerItem
label="Security"
path={SettingsPath.Security}
Icon={IconKey}
/>
</StyledContainer>
</motion.div>
)}
</AnimatePresence>
</NavigationDrawerSection> </NavigationDrawerSection>
<AnimatePresence> <AnimatePresence>
{isAdvancedModeEnabled && ( {isAdvancedModeEnabled && (
<motion.div <motion.div
ref={contentRef} ref={developersRef}
initial="initial" initial="initial"
animate="animate" animate="animate"
exit="exit" exit="exit"
variants={motionAnimationVariants} variants={developersAnimationVariants}
> >
<NavigationDrawerSection> <NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Developers" /> <NavigationDrawerSectionTitle label="Developers" />