From e3691ad1437987f4ee8951104784778157c68027 Mon Sep 17 00:00:00 2001
From: brendanlaschke <brendan.laschke@googlemail.com>
Date: Fri, 3 Nov 2023 11:04:30 +0100
Subject: [PATCH] Fix navbar animation layout shift (#2335)

fix navbar animation
---
 front/src/modules/ui/layout/page/DefaultLayout.tsx         | 7 +------
 .../ui/navigation/navbar/components/NavCollapseButton.tsx  | 2 +-
 .../navbar/components/NavbarAnimatedContainer.tsx          | 2 +-
 3 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/front/src/modules/ui/layout/page/DefaultLayout.tsx b/front/src/modules/ui/layout/page/DefaultLayout.tsx
index eb15111743..ba512eeaf1 100644
--- a/front/src/modules/ui/layout/page/DefaultLayout.tsx
+++ b/front/src/modules/ui/layout/page/DefaultLayout.tsx
@@ -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%')};
   }
diff --git a/front/src/modules/ui/navigation/navbar/components/NavCollapseButton.tsx b/front/src/modules/ui/navigation/navbar/components/NavCollapseButton.tsx
index 004aac43c6..e7f93407f8 100644
--- a/front/src/modules/ui/navigation/navbar/components/NavCollapseButton.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/NavCollapseButton.tsx
@@ -50,7 +50,7 @@ const NavCollapseButton = ({
   return (
     <>
       <StyledCollapseButton
-        initial={{ opacity: show ? 1 : 0 }}
+        initial={false}
         animate={{
           opacity: show ? 1 : 0,
         }}
diff --git a/front/src/modules/ui/navigation/navbar/components/NavbarAnimatedContainer.tsx b/front/src/modules/ui/navigation/navbar/components/NavbarAnimatedContainer.tsx
index 6d7f9cd7a1..72324aa200 100644
--- a/front/src/modules/ui/navigation/navbar/components/NavbarAnimatedContainer.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/NavbarAnimatedContainer.tsx
@@ -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,