Fix breadcrumb

twentyhq · Oct 14, 2024 · 855cbcb · 855cbcb
1 parent 90001ba
commit 855cbcb
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 24 deletions.
diff --git 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/.../src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems.tsx b/.../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/...es/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx b/...es/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/...nty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/...nty-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>