From 48aa89664a45e8048a726f161610812670b87596 Mon Sep 17 00:00:00 2001
From: brendanlaschke <brendan.laschke@googlemail.com>
Date: Tue, 31 Oct 2023 14:09:33 +0100
Subject: [PATCH] Prevent layout shift on page load (#2268)

- prevent layout shift on page load
---
 .../ui/navigation/navbar/components/NavCollapseButton.tsx        | 1 +
 .../ui/navigation/navbar/components/NavbarAnimatedContainer.tsx  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/front/src/modules/ui/navigation/navbar/components/NavCollapseButton.tsx b/front/src/modules/ui/navigation/navbar/components/NavCollapseButton.tsx
index 0c5c0fc77..004aac43c 100644
--- a/front/src/modules/ui/navigation/navbar/components/NavCollapseButton.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/NavCollapseButton.tsx
@@ -50,6 +50,7 @@ const NavCollapseButton = ({
   return (
     <>
       <StyledCollapseButton
+        initial={{ opacity: show ? 1 : 0 }}
         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 a2c56ece7..6d7f9cd7a 100644
--- a/front/src/modules/ui/navigation/navbar/components/NavbarAnimatedContainer.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/NavbarAnimatedContainer.tsx
@@ -48,6 +48,7 @@ export const NavbarAnimatedContainer = ({
       onAnimationComplete={() => {
         setIsNavbarSwitchingSize(false);
       }}
+      initial={{ width: isNavbarOpened ? leftBarWidth : '0' }}
       animate={{
         width: isNavbarOpened ? leftBarWidth : '0',
         opacity: isNavbarOpened ? 1 : 0,