twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2025-01-01 16:51:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix navbar animation layout shift (#2335)

Browse Source 
fix navbar animation
This commit is contained in:
brendanlaschke 2023-11-03 11:04:30 +01:00 committed by GitHub
parent f19ed5e2e4
commit e3691ad143
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 3 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
front/src/modules/ui/layout/page/DefaultLayout.tsx
View File

@ -39,16 +39,11 @@ const StyledLayout = styled.div`
}
`;
const NAVBAR_WIDTH = '236px';
const StyledMainContainer = styled.div`
display: flex;
flex: 1;
flex-direction: row;
overflow: hidden;
width: ${() =>
useRecoilValue(isNavbarOpenedState)
? `calc(100% - ${NAVBAR_WIDTH})`
: '100%'};
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: ${() => (useRecoilValue(isNavbarOpenedState) ? '0' : '100%')};
}

2
front/src/modules/ui/navigation/navbar/components/NavCollapseButton.tsx
View File

@ -50,7 +50,7 @@ const NavCollapseButton = ({
return (
<>
<StyledCollapseButton
initial={{ opacity: show ? 1 : 0 }}
initial={false}
animate={{
opacity: show ? 1 : 0,
}}

2
front/src/modules/ui/navigation/navbar/components/NavbarAnimatedContainer.tsx
View File

@ -48,7 +48,7 @@ export const NavbarAnimatedContainer = ({
onAnimationComplete={() => {
setIsNavbarSwitchingSize(false);
}}
initial={{ width: isNavbarOpened ? leftBarWidth : '0' }}
initial={false}
animate={{
width: isNavbarOpened ? leftBarWidth : '0',
opacity: isNavbarOpened ? 1 : 0,