Navbar drag drop using dnd kit (#18288)

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -64,6 +64,7 @@ export type NavigationDrawerItemProps = {
   mouseUpNavigation?: boolean;
   preventCollapseOnMobile?: boolean;
   isSelectedInEditMode?: boolean;
+  variant?: 'default' | 'tertiary';
 };
 
 type StyledItemProps = Pick<
@@ -75,6 +76,7 @@ type StyledItemProps = Pick<
   | 'to'
   | 'isDragging'
   | 'isSelectedInEditMode'
+  | 'variant'
 > & {
   isNavigationDrawerExpanded: boolean;
   hasRightOptions: boolean;
@@ -93,7 +95,7 @@ const StyledItem = styled.button<StyledItemProps>`
       : '1px solid transparent'};
   border-radius: ${themeCssVariables.border.radius.sm};
   box-sizing: border-box;
-  color: ${({ active, danger, soon }) => {
+  color: ${({ active, danger, soon, variant }) => {
     if (active === true) {
       return themeCssVariables.font.color.primary;
     }
@@ -103,6 +105,9 @@ const StyledItem = styled.button<StyledItemProps>`
     if (soon === true) {
       return themeCssVariables.font.color.light;
     }
+    if (variant === 'tertiary') {
+      return themeCssVariables.font.color.tertiary;
+    }
     return themeCssVariables.font.color.secondary;
   }};
   cursor: ${({ soon, isDragging }) =>
@@ -113,7 +118,6 @@ const StyledItem = styled.button<StyledItemProps>`
   height: ${themeCssVariables.spacing[7]};
   margin-top: ${({ indentationLevel }) =>
     indentationLevel === 2 ? '2px' : '0'};
-
   padding-bottom: ${themeCssVariables.spacing[1]};
   padding-left: ${themeCssVariables.spacing[1]};
   padding-right: ${({ hasRightOptions }) =>
@@ -121,12 +125,13 @@ const StyledItem = styled.button<StyledItemProps>`
       ? themeCssVariables.spacing['0.5']
       : themeCssVariables.spacing[1]};
   padding-top: ${themeCssVariables.spacing[1]};
-
   pointer-events: ${({ soon }) => (soon ? 'none' : 'auto')};
-
   text-decoration: none;
-
   user-select: none;
+  width: ${({ isNavigationDrawerExpanded, hasRightOptions }) =>
+    !isNavigationDrawerExpanded
+      ? `calc(${NAVIGATION_DRAWER_COLLAPSED_WIDTH}px - ${themeCssVariables.spacing[6]} + ${themeCssVariables.spacing[1]} + ${hasRightOptions ? themeCssVariables.spacing['0.5'] : themeCssVariables.spacing[1]})`
+      : `calc(100% - ${themeCssVariables.spacing['1.5']} + ${themeCssVariables.spacing[1]} + ${hasRightOptions ? themeCssVariables.spacing['0.5'] : themeCssVariables.spacing[1]})`};
 
   &:hover {
     background: ${themeCssVariables.background.transparent.light};
@@ -140,11 +145,6 @@ const StyledItem = styled.button<StyledItemProps>`
     visibility: visible;
   }
 
-  width: ${({ isNavigationDrawerExpanded, hasRightOptions }) =>
-    !isNavigationDrawerExpanded
-      ? `calc(${NAVIGATION_DRAWER_COLLAPSED_WIDTH}px - ${themeCssVariables.spacing[6]} + ${themeCssVariables.spacing[1]} + ${hasRightOptions ? themeCssVariables.spacing['0.5'] : themeCssVariables.spacing[1]})`
-      : `calc(100% - ${themeCssVariables.spacing['1.5']} + ${themeCssVariables.spacing[1]} + ${hasRightOptions ? themeCssVariables.spacing['0.5'] : themeCssVariables.spacing[1]})`};
-
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     font-size: ${themeCssVariables.font.size.lg};
   }
@@ -294,6 +294,7 @@ export const NavigationDrawerItem = ({
   mouseUpNavigation = false,
   preventCollapseOnMobile = false,
   isSelectedInEditMode = false,
+  variant = 'default',
 }: NavigationDrawerItemProps) => {
   const { theme } = useContext(ThemeContext);
   const isMobile = useIsMobile();
@@ -350,6 +351,7 @@ export const NavigationDrawerItem = ({
         aria-selected={active}
         danger={danger}
         soon={soon}
+        variant={variant}
         as={
           to
             ? isExternalLink
@@ -452,12 +454,7 @@ export const NavigationDrawerItem = ({
 
           {isDefined(rightOptions) && (
             <NavigationDrawerAnimatedCollapseWrapper>
-              <StyledRightOptionsContainer
-                onClick={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                }}
-              >
+              <StyledRightOptionsContainer>
                 <StyledRightOptionsVisbility
                   data-visible={
                     isMobile ||

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx

@@ -8,7 +8,7 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { styled } from '@linaria/react';
 import React from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { Label } from 'twenty-ui/display';
+import { IconChevronDown, IconChevronRight, Label } from 'twenty-ui/display';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledTitle = styled.div`
@@ -25,11 +25,27 @@ const StyledTitle = styled.div`
   &:hover {
     background-color: ${themeCssVariables.background.transparent.light};
     cursor: pointer;
+
+    .section-title-label {
+      color: ${themeCssVariables.font.color.tertiary};
+    }
   }
 `;
 
 const StyledLabelContainer = styled.div`
+  align-items: center;
+  display: flex;
   flex-grow: 1;
+  gap: ${themeCssVariables.spacing[1]};
+`;
+
+const StyledChevron = styled.div`
+  align-items: center;
+  display: flex;
+  opacity: 0;
+  .section-title-container:hover & {
+    opacity: 1;
+  }
 `;
 
 type StyledRightIconProps = {
@@ -52,6 +68,7 @@ type NavigationDrawerSectionTitleProps = {
   label: string;
   rightIcon?: React.ReactNode;
   alwaysShowRightIcon?: boolean;
+  isOpen?: boolean;
 };
 
 export const NavigationDrawerSectionTitle = ({
@@ -59,6 +76,7 @@ export const NavigationDrawerSectionTitle = ({
   label,
   rightIcon,
   alwaysShowRightIcon = false,
+  isOpen,
 }: NavigationDrawerSectionTitleProps) => {
   const isMobile = useIsMobile();
   const isNavigationDrawerExpanded = useAtomStateValue(
@@ -78,10 +96,21 @@ export const NavigationDrawerSectionTitle = ({
     return <NavigationDrawerSectionTitleSkeletonLoader />;
   }
 
+  const ChevronIcon = isOpen === true ? IconChevronDown : IconChevronRight;
+
   return (
     <StyledTitle className="section-title-container">
       <StyledLabelContainer onClick={handleTitleClick}>
-        <Label>{label}</Label>
+        <Label className="section-title-label">{label}</Label>
+        {isOpen !== undefined && (
+          <StyledChevron>
+            <ChevronIcon
+              size="12px"
+              stroke={themeCssVariables.icon.stroke.sm}
+              color={themeCssVariables.font.color.tertiary}
+            />
+          </StyledChevron>
+        )}
       </StyledLabelContainer>
       {isDefined(rightIcon) && (
         <StyledRightIcon

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem.tsx

@@ -23,6 +23,7 @@ export const NavigationDrawerSubItem = ({
   isDragging,
   isSelectedInEditMode,
   triggerEvent,
+  variant,
 }: NavigationDrawerSubItemProps) => {
   return (
     <NavigationDrawerItem
@@ -44,6 +45,7 @@ export const NavigationDrawerSubItem = ({
       isDragging={isDragging}
       isSelectedInEditMode={isSelectedInEditMode}
       triggerEvent={triggerEvent}
+      variant={variant}
     />
   );
 };