admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 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
3 changed files with 3 additions and 8 deletions
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` const StyledMainContainer = styled.div`
display: flex; display: flex;
flex: 1;
flex-direction: row; flex-direction: row;
overflow: hidden; overflow: hidden;
width: ${() =>
useRecoilValue(isNavbarOpenedState)
? `calc(100% - ${NAVBAR_WIDTH})`
: '100%'};
@media (max-width: ${MOBILE_VIEWPORT}px) { @media (max-width: ${MOBILE_VIEWPORT}px) {
width: ${() => (useRecoilValue(isNavbarOpenedState) ? '0' : '100%')}; width: ${() => (useRecoilValue(isNavbarOpenedState) ? '0' : '100%')};
} }

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

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

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

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