WIP: fix stuff

twentyhq · Oct 14, 2024 · 90001ba · 90001ba
1 parent 2f24dd6
commit 90001ba
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 69 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>
+      <NavigationDrawerAnimatedCollapseWrapper animateHeight>
         <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>
+        <NavigationDrawerAnimatedCollapseWrapper animateHeight>
           <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
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { motion } from 'framer-motion';
+import { AnimationControls, motion, TargetAndTransition } from 'framer-motion';
 import { useRecoilValue } from 'recoil';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { useTheme } from '@emotion/react';
@@ -11,8 +11,10 @@ const StyledAnimatedContainer = styled(motion.div)`
 
 export const NavigationDrawerAnimatedCollapseWrapper = ({
   children,
+  animateHeight = false,
 }: {
   children: React.ReactNode;
+  animateHeight?: boolean;
 }) => {
   const theme = useTheme();
   const isSettingsPage = useIsSettingsPage();
@@ -24,13 +26,24 @@ 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 };
+    }
+  }
+
   return (
     <StyledAnimatedContainer
-      animate={
-        isNavigationDrawerExpanded
-          ? { opacity: 1, height: 'auto', width: 'auto', pointerEvents: 'auto' }
-          : { opacity: 0, height: 0, width: 0, pointerEvents: 'none' }
-      }
+      initial={false}
+      animate={animate}
       transition={{
         duration: theme.animation.duration.normal,
       }}

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
@@ -35,17 +35,11 @@ export type NavigationDrawerItemProps = {
   soon?: boolean;
   count?: number;
   keyboard?: string[];
-  isNavigationDrawerExpanded?: boolean;
 };
 
 type StyledItemProps = Pick<
   NavigationDrawerItemProps,
-  | 'active'
-  | 'danger'
-  | 'indentationLevel'
-  | 'soon'
-  | 'to'
-  | 'isNavigationDrawerExpanded'
+  'active' | 'danger' | 'indentationLevel' | 'soon' | 'to'
 >;
 
 const StyledItem = styled('div', {
@@ -75,8 +69,6 @@ const StyledItem = styled('div', {
   display: flex;
   font-family: ${({ theme }) => theme.font.family};
   font-size: ${({ theme }) => theme.font.size.md};
-  gap: ${({ theme, isNavigationDrawerExpanded }) =>
-    isNavigationDrawerExpanded ? theme.spacing(2) : 'none'};
 
   padding-bottom: ${({ theme }) => theme.spacing(1)};
   padding-left: ${({ theme }) => theme.spacing(1)};
@@ -106,6 +98,12 @@ const StyledItem = styled('div', {
   }
 `;
 
+const StyledItemElementsContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
 const StyledItemLabel = styled.div`
   font-weight: ${({ theme }) => theme.font.weight.medium};
   overflow: hidden;
@@ -193,50 +191,50 @@ export const NavigationDrawerItem = ({
         as={to ? Link : 'div'}
         to={to ? to : undefined}
         indentationLevel={indentationLevel}
-        isNavigationDrawerExpanded={isNavigationDrawerExpanded}
       >
         {showBreadcrumb && (
           <NavigationDrawerAnimatedCollapseWrapper>
             <NavigationDrawerItemBreadcrumb state={subItemState} />
           </NavigationDrawerAnimatedCollapseWrapper>
         )}
+        <StyledItemElementsContainer>
+          {Icon && (
+            <Icon
+              style={{ minWidth: theme.icon.size.md }}
+              size={theme.icon.size.md}
+              stroke={theme.icon.stroke.md}
+              color={
+                showBreadcrumb && !isSettingsPage && !isNavigationDrawerExpanded
+                  ? theme.font.color.light
+                  : 'currentColor'
+              }
+            />
+          )}
 
-        {Icon && (
-          <Icon
-            style={{ minWidth: theme.icon.size.md }}
-            size={theme.icon.size.md}
-            stroke={theme.icon.stroke.md}
-            color={
-              showBreadcrumb && !isSettingsPage && !isNavigationDrawerExpanded
-                ? theme.font.color.light
-                : 'currentColor'
-            }
-          />
-        )}
-
-        <NavigationDrawerAnimatedCollapseWrapper>
-          <StyledItemLabel>{label}</StyledItemLabel>
-        </NavigationDrawerAnimatedCollapseWrapper>
-
-        {soon && (
           <NavigationDrawerAnimatedCollapseWrapper>
-            <Pill label="Soon" />
+            <StyledItemLabel>{label}</StyledItemLabel>
           </NavigationDrawerAnimatedCollapseWrapper>
-        )}
 
-        {!!count && (
-          <NavigationDrawerAnimatedCollapseWrapper>
-            <StyledItemCount>{count}</StyledItemCount>
-          </NavigationDrawerAnimatedCollapseWrapper>
-        )}
-
-        {keyboard && (
-          <NavigationDrawerAnimatedCollapseWrapper>
-            <StyledKeyBoardShortcut className="keyboard-shortcuts">
-              {keyboard}
-            </StyledKeyBoardShortcut>
-          </NavigationDrawerAnimatedCollapseWrapper>
-        )}
+          {soon && (
+            <NavigationDrawerAnimatedCollapseWrapper>
+              <Pill label="Soon" />
+            </NavigationDrawerAnimatedCollapseWrapper>
+          )}
+
+          {!!count && (
+            <NavigationDrawerAnimatedCollapseWrapper>
+              <StyledItemCount>{count}</StyledItemCount>
+            </NavigationDrawerAnimatedCollapseWrapper>
+          )}
+
+          {keyboard && (
+            <NavigationDrawerAnimatedCollapseWrapper>
+              <StyledKeyBoardShortcut className="keyboard-shortcuts">
+                {keyboard}
+              </StyledKeyBoardShortcut>
+            </NavigationDrawerAnimatedCollapseWrapper>
+          )}
+        </StyledItemElementsContainer>
       </StyledItem>
     </StyledNavigationDrawerItemContainer>
   );

diff --git a/...src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemBreadcrumb.tsx b/...src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemBreadcrumb.tsx
@@ -6,9 +6,10 @@ export type NavigationDrawerItemBreadcrumbProps = {
 };
 
 const StyledNavigationDrawerItemBreadcrumbContainer = styled.div`
-  margin-left: 7.5px;
-
   height: 28px;
+
+  margin-left: 7.5px;
+  margin-right: ${({ theme }) => theme.spacing(2)};
   width: 9px;
 `;
 

diff --git a/...es/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsedContainer.tsx b/...es/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsedContainer.tsx
@@ -3,16 +3,10 @@ import { ReactNode } from 'react';
 import { useRecoilValue } from 'recoil';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
+import { AnimationControls, motion, TargetAndTransition } from 'framer-motion';
+import { useTheme } from '@emotion/react';
 
-const StyledBaseContainer = styled.div`
-  width: 24px;
-`;
-
-const StyledGroupContainer = styled(StyledBaseContainer)`
-  background-color: ${({ theme }) => theme.background.transparent.lighter};
-  border: 1px solid ${({ theme }) => theme.background.transparent.lighter};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-`;
+const StyledAnimationGroupContainer = styled(motion.div)``;
 
 type NavigationDrawerItemsCollapsedContainerProps = {
   isGroup?: boolean;
@@ -23,15 +17,32 @@ export const NavigationDrawerItemsCollapsedContainer = ({
   isGroup = false,
   children,
 }: NavigationDrawerItemsCollapsedContainerProps) => {
+  const theme = useTheme();
   const isSettingsPage = useIsSettingsPage();
   const isNavigationDrawerExpanded = useRecoilValue(
     isNavigationDrawerExpandedState,
   );
-  if (isNavigationDrawerExpanded || isSettingsPage) {
-    return children;
-  }
-  if (!isGroup) {
-    return <StyledBaseContainer>{children}</StyledBaseContainer>;
+  const isExpanded = isNavigationDrawerExpanded || isSettingsPage;
+  let animate: AnimationControls | TargetAndTransition = { border: 'none' };
+  if (!isExpanded) {
+    animate = { width: 24 };
+    if (isGroup) {
+      animate = {
+        width: 24,
+        backgroundColor: theme.background.transparent.lighter,
+        border: `1px solid ${theme.background.transparent.lighter}`,
+        borderRadius: theme.border.radius.sm,
+      };
+    }
   }
-  return <StyledGroupContainer>{children}</StyledGroupContainer>;
+
+  return (
+    <StyledAnimationGroupContainer
+      initial={false}
+      animate={animate}
+      transition={{ duration: theme.animation.duration.normal }}
+    >
+      {children}
+    </StyledAnimationGroupContainer>
+  );
 };
diff --git a/...t/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx b/...t/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx
@@ -54,7 +54,7 @@ export const NavigationDrawerSectionTitle = ({
         isNavigationDrawerExpanded || isSettingsPage ? onClick : undefined
       }
     >
-      {isNavigationDrawerExpanded || isSettingsPage ? label : ''}
+      {label}
     </StyledTitle>
   );
 };