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