Navbar drag drop using dnd kit (#18288)

packages/twenty-front/src/modules/command-menu/components/CommandMenuAddToNavDroppableDndKit.tsx

@@ -0,0 +1,27 @@
+import { useDroppable } from '@dnd-kit/react';
+import { type ReactNode } from 'react';
+
+import { ADD_TO_NAV_SOURCE_DROPPABLE_ID } from '@/navigation-menu-item/constants/AddToNavSourceDroppableId';
+
+import type { AddToNavDroppableProvided } from '@/command-menu/components/CommandMenuAddToNavDroppableTypes';
+
+type CommandMenuAddToNavDroppableDndKitProps = {
+  children: (provided: AddToNavDroppableProvided) => ReactNode;
+  isDropDisabled: boolean;
+};
+
+export const CommandMenuAddToNavDroppableDndKit = ({
+  children,
+  isDropDisabled,
+}: CommandMenuAddToNavDroppableDndKitProps) => {
+  const { ref } = useDroppable({
+    id: ADD_TO_NAV_SOURCE_DROPPABLE_ID,
+    disabled: isDropDisabled,
+  });
+  const provided: AddToNavDroppableProvided = {
+    innerRef: ref,
+    droppableProps: { 'data-dnd-group': ADD_TO_NAV_SOURCE_DROPPABLE_ID },
+    placeholder: null,
+  };
+  return <>{children(provided)}</>;
+};

packages/twenty-front/src/modules/command-menu/components/CommandMenuAddToNavDroppableTypes.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+
+export type AddToNavDroppableProvided = {
+  innerRef: (element: HTMLElement | null) => void;
+  droppableProps: object;
+  placeholder: ReactNode;
+};

packages/twenty-front/src/modules/command-menu/components/CommandMenuItemWithAddToNavigationDragDndKit.tsx

@@ -0,0 +1,27 @@
+import { useDraggable } from '@dnd-kit/react';
+import { type ReactNode } from 'react';
+
+import { ADD_TO_NAV_SOURCE_DROPPABLE_ID } from '@/navigation-menu-item/constants/AddToNavSourceDroppableId';
+
+type CommandMenuItemWithAddToNavigationDragDndKitProps = {
+  id: string;
+  dragIndex: number;
+  menuItemContent: ReactNode;
+};
+
+export const CommandMenuItemWithAddToNavigationDragDndKit = ({
+  id,
+  dragIndex,
+  menuItemContent,
+}: CommandMenuItemWithAddToNavigationDragDndKitProps) => {
+  const { ref } = useDraggable({
+    id,
+    data: {
+      sourceDroppableId: ADD_TO_NAV_SOURCE_DROPPABLE_ID,
+      sourceIndex: dragIndex,
+    },
+    disabled: false,
+    feedback: 'clone',
+  });
+  return <div ref={ref}>{menuItemContent}</div>;
+};