From 855cbcbe81e5a09f6aa664fa852534bd9d97c740 Mon Sep 17 00:00:00 2001
From: martmull <martmull@hotmail.fr>
Date: Mon, 14 Oct 2024 17:44:21 +0200
Subject: [PATCH] Fix breadcrumb

---
 .../CurrentWorkspaceMemberFavorites.tsx       |  2 +-
 ...ionDrawerSectionForObjectMetadataItems.tsx |  2 +-
 ...avigationDrawerAnimatedCollapseWrapper.tsx | 33 +++++++++----------
 .../components/NavigationDrawerItem.tsx       | 13 +++++---
 4 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
index f7d861c31197..8d536f282cbc 100644
--- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
+++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
@@ -107,7 +107,7 @@ export const CurrentWorkspaceMemberFavorites = () => {
 
   return (
     <StyledContainer>
-      <NavigationDrawerAnimatedCollapseWrapper animateHeight>
+      <NavigationDrawerAnimatedCollapseWrapper>
         <NavigationDrawerSectionTitle
           label="Favorites"
           onClick={() => toggleNavigationSection()}
diff --git a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems.tsx b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems.tsx
index b7f50e03fd68..5e666e0cf542 100644
--- a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems.tsx
+++ b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems.tsx
@@ -130,7 +130,7 @@ export const NavigationDrawerSectionForObjectMetadataItems = ({
   return (
     objectMetadataItems.length > 0 && (
       <NavigationDrawerSection>
-        <NavigationDrawerAnimatedCollapseWrapper animateHeight>
+        <NavigationDrawerAnimatedCollapseWrapper>
           <NavigationDrawerSectionTitle
             label={sectionTitle}
             onClick={() => toggleNavigationSection()}
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx
index 9fb42eff705b..19575ff0d483 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx
@@ -5,16 +5,12 @@ import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNaviga
 import { useTheme } from '@emotion/react';
 import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
 
-const StyledAnimatedContainer = styled(motion.div)`
-  overflow: hidden;
-`;
+const StyledAnimatedContainer = styled(motion.div)``;
 
 export const NavigationDrawerAnimatedCollapseWrapper = ({
   children,
-  animateHeight = false,
 }: {
   children: React.ReactNode;
-  animateHeight?: boolean;
 }) => {
   const theme = useTheme();
   const isSettingsPage = useIsSettingsPage();
@@ -26,19 +22,20 @@ export const NavigationDrawerAnimatedCollapseWrapper = ({
     return children;
   }
 
-  let animate: AnimationControls | TargetAndTransition = {};
-  if (isNavigationDrawerExpanded) {
-    animate = { opacity: 1, pointerEvents: 'auto' };
-  } else {
-    animate = {
-      width: 0,
-      opacity: 0,
-      pointerEvents: 'none',
-    };
-    if (animateHeight) {
-      animate = { ...animate, height: 0 };
-    }
-  }
+  const animate: AnimationControls | TargetAndTransition =
+    isNavigationDrawerExpanded
+      ? {
+          opacity: 1,
+          width: 'auto',
+          height: 'auto',
+          pointerEvents: 'auto',
+        }
+      : {
+          opacity: 0,
+          width: 0,
+          height: 0,
+          pointerEvents: 'none',
+        };
 
   return (
     <StyledAnimatedContainer
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
index a10f7f24cfe9..d98fc547091c 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
@@ -17,6 +17,7 @@ import {
 } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
+import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
 
 const DEFAULT_INDENTATION_LEVEL = 1;
 
@@ -40,7 +41,7 @@ export type NavigationDrawerItemProps = {
 type StyledItemProps = Pick<
   NavigationDrawerItemProps,
   'active' | 'danger' | 'indentationLevel' | 'soon' | 'to'
->;
+> & { isNavigationDrawerExpanded: boolean };
 
 const StyledItem = styled('div', {
   shouldForwardProp: (prop) =>
@@ -79,8 +80,12 @@ const StyledItem = styled('div', {
     indentationLevel === 2 ? '2px' : '0'};
 
   pointer-events: ${(props) => (props.soon ? 'none' : 'auto')};
-  width: 100%;
-  overflow: hidden;
+
+  width: ${(props) =>
+    !props.isNavigationDrawerExpanded
+      ? `${NAV_DRAWER_WIDTHS.menu.desktop.collapsed - 24}px`
+      : '100%'};
+
   :hover {
     background: ${({ theme }) => theme.background.transparent.light};
     color: ${(props) =>
@@ -106,7 +111,6 @@ const StyledItemElementsContainer = styled.div`
 
 const StyledItemLabel = styled.div`
   font-weight: ${({ theme }) => theme.font.weight.medium};
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
@@ -191,6 +195,7 @@ export const NavigationDrawerItem = ({
         as={to ? Link : 'div'}
         to={to ? to : undefined}
         indentationLevel={indentationLevel}
+        isNavigationDrawerExpanded={isNavigationDrawerExpanded}
       >
         {showBreadcrumb && (
           <NavigationDrawerAnimatedCollapseWrapper>