From 27c0ca975ff5f7b56ec2412776e48a6956b73176 Mon Sep 17 00:00:00 2001
From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com>
Date: Tue, 24 Mar 2026 21:19:07 +0530
Subject: [PATCH] =?UTF-8?q?Fix=20navigation=20=E2=80=9Cadd=20before/after?=
 =?UTF-8?q?=E2=80=9D=20insertion=20index=20(#18879)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before:
<video
src="https://github.com/user-attachments/assets/f0b0740d-414f-4c59-a712-cdf96d4f3eb1"
/>


After:
<video
src="https://github.com/user-attachments/assets/48ce878c-4a29-4666-89d4-4d60882dd5ab"
/>

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
Co-authored-by: Etienne <45695613+etiennejouan@users.noreply.github.com>
---
 .../components/SidePanelEditLinkItemView.tsx  |  5 ++--
 .../SidePanelEditOrganizeActions.tsx          |  4 +--
 ...seNavigationMenuItemEditOrganizeActions.ts | 25 +++++++++----------
 3 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditLinkItemView.tsx b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditLinkItemView.tsx
index ecace03c50..7d3cc3e5d4 100644
--- a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditLinkItemView.tsx
+++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditLinkItemView.tsx
@@ -5,14 +5,14 @@ import { ensureAbsoluteUrl } from 'twenty-shared/utils';
 import { type NavigationMenuItem } from '~/generated-metadata/graphql';
 
 import { extractDomainFromUrl } from '@/navigation-menu-item/display/link/utils/extractDomainFromUrl';
-import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
-import { SidePanelList } from '@/side-panel/components/SidePanelList';
 import {
   type OrganizeActionsProps,
   SidePanelEditOrganizeActions,
 } from '@/navigation-menu-item/edit/side-panel/components/SidePanelEditOrganizeActions';
 import { SidePanelEditOwnerSection } from '@/navigation-menu-item/edit/side-panel/components/SidePanelEditOwnerSection';
 import { getOrganizeActionsSelectableItemIds } from '@/navigation-menu-item/edit/side-panel/utils/getOrganizeActionsSelectableItemIds';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
+import { SidePanelList } from '@/side-panel/components/SidePanelList';
 import { TextInput } from '@/ui/input/components/TextInput';
 
 type SidePanelEditLinkItemViewProps = OrganizeActionsProps & {
@@ -93,7 +93,6 @@ export const SidePanelEditLinkItemView = ({
         onAddAfter={onAddAfter}
         showMoveToFolder
         onMoveToFolder={onOpenFolderPicker}
-        moveToFolderHasSubMenu
       />
       <SidePanelEditOwnerSection applicationId={selectedItem.applicationId} />
     </SidePanelList>
diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditOrganizeActions.tsx b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditOrganizeActions.tsx
index b2bc85f105..33e438159b 100644
--- a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditOrganizeActions.tsx
+++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditOrganizeActions.tsx
@@ -26,7 +26,6 @@ export type OrganizeActionsProps = {
 type SidePanelEditOrganizeActionsProps = OrganizeActionsProps & {
   showMoveToFolder?: boolean;
   onMoveToFolder?: () => void;
-  moveToFolderHasSubMenu?: boolean;
 };
 
 export const SidePanelEditOrganizeActions = ({
@@ -39,7 +38,6 @@ export const SidePanelEditOrganizeActions = ({
   onAddAfter,
   showMoveToFolder = false,
   onMoveToFolder,
-  moveToFolderHasSubMenu = false,
 }: SidePanelEditOrganizeActionsProps) => {
   const { t } = useLingui();
 
@@ -78,7 +76,7 @@ export const SidePanelEditOrganizeActions = ({
             Icon={IconFolderSymlink}
             label={t`Move to folder`}
             id={SidePanelNavigationItemActions.MOVE_TO_FOLDER}
-            hasSubMenu={moveToFolderHasSubMenu}
+            hasSubMenu
             onClick={onMoveToFolder}
           />
         </SelectableListItem>
diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useNavigationMenuItemEditOrganizeActions.ts b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useNavigationMenuItemEditOrganizeActions.ts
index e1394a84a0..b0730cdfd0 100644
--- a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useNavigationMenuItemEditOrganizeActions.ts
+++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useNavigationMenuItemEditOrganizeActions.ts
@@ -14,33 +14,32 @@ import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 import { SidePanelPages } from 'twenty-shared/types';
+import { type NavigationMenuItem } from '~/generated-metadata/graphql';
 
 const getAddMenuItemInsertionContext = (
   selectedItem: { id: string; folderId?: string | null },
-  workspaceNavigationMenuItems: Array<{
-    id: string;
-    folderId?: string | null;
-    userWorkspaceId?: string | null;
-  }>,
+  workspaceNavigationMenuItems: NavigationMenuItem[],
   offset: 0 | 1,
 ): AddMenuItemInsertionContext | null => {
   const targetFolderId = selectedItem.folderId ?? null;
-  const itemsInFolder = workspaceNavigationMenuItems.filter(
-    (item) =>
-      (item.folderId ?? null) === targetFolderId &&
-      !isDefined(item.userWorkspaceId),
-  );
-  const selectedIndexInFolder = itemsInFolder.findIndex(
+  const itemsInFolderSorted = workspaceNavigationMenuItems
+    .filter(
+      (item) =>
+        (item.folderId ?? null) === targetFolderId &&
+        !isDefined(item.userWorkspaceId),
+    )
+    .sort((a, b) => a.position - b.position);
+  const selectedIndexSorted = itemsInFolderSorted.findIndex(
     (item) => item.id === selectedItem.id,
   );
 
-  if (selectedIndexInFolder < 0) {
+  if (selectedIndexSorted < 0) {
     return null;
   }
 
   return {
     targetFolderId,
-    targetIndex: selectedIndexInFolder + offset,
+    targetIndex: selectedIndexSorted + offset,
     disableDrag: true,
   };
 };