In navigation drawer, cursor should not be drag on hover and some enhancements (#8975)

as per the title- on hover, the draggable items had a grab cursor.
Couldn't change it to a pointer, because then onClick would have a weird
behavior of grab which causes lag onClick.

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

@@ -37,17 +37,17 @@ export type NavigationDrawerItemProps = {
   count?: number;
   keyboard?: string[];
   rightOptions?: ReactNode;
-  isDraggable?: boolean;
+  isDragging?: boolean;
 };
 
 type StyledItemProps = Pick<
   NavigationDrawerItemProps,
-  'active' | 'danger' | 'indentationLevel' | 'soon' | 'to' | 'isDraggable'
+  'active' | 'danger' | 'indentationLevel' | 'soon' | 'to' | 'isDragging'
 > & { isNavigationDrawerExpanded: boolean };
 
 const StyledItem = styled('button', {
   shouldForwardProp: (prop) =>
-    !['active', 'danger', 'soon', 'isDraggable'].includes(prop) &&
+    !['active', 'danger', 'soon', 'isDragging'].includes(prop) &&
     isPropValid(prop),
 })<StyledItemProps>`
   box-sizing: content-box;
@@ -89,16 +89,11 @@ const StyledItem = styled('button', {
     !props.isNavigationDrawerExpanded
       ? `${NAV_DRAWER_WIDTHS.menu.desktop.collapsed - 24}px`
       : '100%'};
-  ${({ isDraggable }) =>
-    isDraggable &&
-    `
-    cursor: grab;
-    
-    &:active {
-      cursor: grabbing;
-    }
-  `}
-
+  ${({ isDragging }) =>
+    isDragging &&
+    ` 
+          cursor: grabbing;
+        `}
   :hover {
     background: ${({ theme }) => theme.background.transparent.light};
     color: ${(props) =>
@@ -198,7 +193,7 @@ export const NavigationDrawerItem = ({
   keyboard,
   subItemState,
   rightOptions,
-  isDraggable,
+  isDragging,
 }: NavigationDrawerItemProps) => {
   const theme = useTheme();
   const isMobile = useIsMobile();
@@ -231,7 +226,7 @@ export const NavigationDrawerItem = ({
         to={to ? to : undefined}
         indentationLevel={indentationLevel}
         isNavigationDrawerExpanded={isNavigationDrawerExpanded}
-        isDraggable={isDraggable}
+        isDragging={isDragging}
       >
         {showBreadcrumb && (
           <NavigationDrawerAnimatedCollapseWrapper>

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

@@ -18,7 +18,7 @@ export const NavigationDrawerSubItem = ({
   keyboard,
   subItemState,
   rightOptions,
-  isDraggable,
+  isDragging,
 }: NavigationDrawerSubItemProps) => {
   return (
     <NavigationDrawerItem
@@ -35,7 +35,7 @@ export const NavigationDrawerSubItem = ({
       count={count}
       keyboard={keyboard}
       rightOptions={rightOptions}
-      isDraggable={isDraggable}
+      isDragging={isDragging}
     />
   );
 };