Refactor navigation menu components to utilize isNavigationMenuInEditMode state for improved edit mode handling. This change enhances code clarity and consistency across various components by replacing direct isEditMode props with the new state management approach.

2026-03-02 07:15:03 +05:30
parent d6e9e0ca9d
commit cfec6c8e26
10 changed files with 75 additions and 56 deletions
@@ -6,7 +6,9 @@ import { type NavigationMenuItemClickParams } from '@/navigation-menu-item/hooks
 import { getNavigationMenuItemSecondaryLabel } from '@/navigation-menu-item/utils/getNavigationMenuItemSecondaryLabel';
 import { getObjectMetadataForNavigationMenuItem } from '@/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem';
 import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems';
+import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
 import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment';
 import { type View } from '@/views/types/View';
@@ -19,7 +21,6 @@ type WorkspaceNavigationMenuItemFolderSubItemProps = {
  selectedNavigationMenuItemIndex: number;
  objectMetadataItems: ObjectMetadataItem[];
  views: View[];
-  isEditMode: boolean;
  onNavigationMenuItemClick?: (params: NavigationMenuItemClickParams) => void;
  selectedNavigationMenuItemId: string | null;
  isContextDragging: boolean;
@@ -32,11 +33,13 @@ export const WorkspaceNavigationMenuItemFolderSubItem = ({
  selectedNavigationMenuItemIndex,
  objectMetadataItems,
  views,
-  isEditMode,
  onNavigationMenuItemClick,
  selectedNavigationMenuItemId,
  isContextDragging,
 }: WorkspaceNavigationMenuItemFolderSubItemProps) => {
+  const isNavigationMenuInEditMode = useAtomStateValue(
+    isNavigationMenuInEditModeState,
+  );
  const objectMetadataItem =
    navigationMenuItem.itemType === NavigationMenuItemType.VIEW ||
    navigationMenuItem.itemType === NavigationMenuItemType.RECORD
@@ -47,7 +50,7 @@ export const WorkspaceNavigationMenuItemFolderSubItem = ({
        )
      : null;
  const handleEditModeClick =
-    isEditMode &&
+    isNavigationMenuInEditMode &&
    isDefined(onNavigationMenuItemClick) &&
    (navigationMenuItem.itemType === NavigationMenuItemType.LINK ||
      isDefined(objectMetadataItem))
@@ -136,9 +136,6 @@ export const WorkspaceNavigationMenuItems = () => {
    });
  };

-  const isEditMode =
-    isNavigationMenuItemEditingEnabled && isNavigationMenuInEditMode;
-
  if (loading) {
    return <NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader />;
  }
@@ -150,7 +147,7 @@ export const WorkspaceNavigationMenuItems = () => {
      rightIcon={
        isNavigationMenuItemEditingEnabled ? (
          <StyledRightIconsContainer>
-            {isEditMode ? (
+            {isNavigationMenuInEditMode ? (
              <LightIconButton
                Icon={IconPlus}
                accent="tertiary"
@@ -169,14 +166,13 @@ export const WorkspaceNavigationMenuItems = () => {
        ) : undefined
      }
      onAddMenuItem={
-        isNavigationMenuItemEditingEnabled && isEditMode
+        isNavigationMenuItemEditingEnabled && isNavigationMenuInEditMode
          ? handleAddMenuItem
          : undefined
      }
-      isEditMode={isEditMode}
      selectedNavigationMenuItemId={selectedNavigationMenuItemInEditMode}
      onNavigationMenuItemClick={
-        isEditMode ? handleNavigationMenuItemClick : undefined
+        isNavigationMenuInEditMode ? handleNavigationMenuItemClick : undefined
      }
      onActiveObjectMetadataItemClick={
        isNavigationMenuItemEditingEnabled
@@ -22,18 +22,19 @@ import { NavigationMenuItemDroppable } from '@/navigation-menu-item/components/N
 import { WorkspaceDndKitDroppableSlot } from '@/navigation-menu-item/components/WorkspaceDndKitDroppableSlot';
 import { WorkspaceDndKitSortableItem } from '@/navigation-menu-item/components/WorkspaceDndKitSortableItem';
 import { WorkspaceNavigationMenuItemFolderDragClone } from '@/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderDragClone';
+import { WorkspaceNavigationMenuItemFolderSubItem } from '@/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderSubItem';
 import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/constants/FolderIconDefault';
 import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder';
 import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
-import { WorkspaceDndKitContext } from '@/navigation/contexts/WorkspaceDndKitContext';
 import { NavigationMenuItemDragContext } from '@/navigation-menu-item/contexts/NavigationMenuItemDragContext';
 import { SortableDropTargetRefContext } from '@/navigation-menu-item/contexts/SortableDropTargetRefContext';
 import { type NavigationMenuItemClickParams } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems';
+import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
 import { openNavigationMenuItemFolderIdsState } from '@/navigation-menu-item/states/openNavigationMenuItemFolderIdsState';
-import { WorkspaceNavigationMenuItemFolderSubItem } from '@/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderSubItem';
 import { isLocationMatchingNavigationMenuItem } from '@/navigation-menu-item/utils/isLocationMatchingNavigationMenuItem';
 import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems';
+import { WorkspaceDndKitContext } from '@/navigation/contexts/WorkspaceDndKitContext';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
@@ -76,7 +77,6 @@ type WorkspaceNavigationMenuItemsFolderProps = {
  folderColor?: string | null;
  navigationMenuItems: ProcessedNavigationMenuItem[];
  isGroup: boolean;
-  isEditMode?: boolean;
  isSelectedInEditMode?: boolean;
  onEditModeClick?: () => void;
  onNavigationMenuItemClick?: (params: NavigationMenuItemClickParams) => void;
@@ -91,7 +91,6 @@ export const WorkspaceNavigationMenuItemsFolder = ({
  folderColor,
  navigationMenuItems,
  isGroup,
-  isEditMode = false,
  isSelectedInEditMode = false,
  onEditModeClick,
  onNavigationMenuItemClick,
@@ -99,6 +98,9 @@ export const WorkspaceNavigationMenuItemsFolder = ({
  isDragging = false,
 }: WorkspaceNavigationMenuItemsFolderProps) => {
  const useDndKit = useContext(WorkspaceDndKitContext);
+  const isNavigationMenuInEditMode = useAtomStateValue(
+    isNavigationMenuInEditModeState,
+  );
  const theme = useTheme();
  const { getIcon } = useIcons();
  const FolderIcon = getIcon(folderIconKey ?? FOLDER_ICON_DEFAULT);
@@ -123,7 +125,7 @@ export const WorkspaceNavigationMenuItemsFolder = ({
  const isOpen = openNavigationMenuItemFolderIds.includes(folderId);

  const folderContentLengthForTree =
-    isEditMode && isSelectedInEditMode
+    isNavigationMenuInEditMode && isSelectedInEditMode
      ? navigationMenuItems.length + 1
      : navigationMenuItems.length;

@@ -160,7 +162,8 @@ export const WorkspaceNavigationMenuItemsFolder = ({
    }
  };

-  const shouldUseEditModeClick = isEditMode && isDefined(onEditModeClick);
+  const shouldUseEditModeClick =
+    isNavigationMenuInEditMode && isDefined(onEditModeClick);
  const handleClick = shouldUseEditModeClick
    ? (e?: React.MouseEvent) => {
        e?.stopPropagation();
@@ -236,7 +239,9 @@ export const WorkspaceNavigationMenuItemsFolder = ({
              containAnimation
            >
              <StyledFolderDroppableContent
-                $compact={isEditMode || navigationMenuItems.length === 0}
+                $compact={
+                  isNavigationMenuInEditMode || navigationMenuItems.length === 0
+                }
                data-dnd-group={folderContentDroppableId}
              >
                {navigationMenuItems.map((navigationMenuItem, index) => (
@@ -245,7 +250,9 @@ export const WorkspaceNavigationMenuItemsFolder = ({
                    id={navigationMenuItem.id}
                    index={index}
                    group={folderContentDroppableId}
-                    disabled={!isEditMode || folderContentDropDisabled}
+                    disabled={
+                      !isNavigationMenuInEditMode || folderContentDropDisabled
+                    }
                  >
                    <WorkspaceNavigationMenuItemFolderSubItem
                      navigationMenuItem={navigationMenuItem}
@@ -256,7 +263,6 @@ export const WorkspaceNavigationMenuItemsFolder = ({
                      }
                      objectMetadataItems={objectMetadataItems}
                      views={views}
-                      isEditMode={isEditMode}
                      onNavigationMenuItemClick={onNavigationMenuItemClick}
                      selectedNavigationMenuItemId={
                        selectedNavigationMenuItemId ?? null
@@ -318,7 +324,10 @@ export const WorkspaceNavigationMenuItemsFolder = ({
              {(provided) => (
                <StyledFolderDroppableContent
                  ref={provided.innerRef}
-                  $compact={isEditMode || navigationMenuItems.length === 0}
+                  $compact={
+                    isNavigationMenuInEditMode ||
+                    navigationMenuItems.length === 0
+                  }
                  // eslint-disable-next-line react/jsx-props-no-spreading
                  {...provided.droppableProps}
                >
@@ -328,8 +337,10 @@ export const WorkspaceNavigationMenuItemsFolder = ({
                      draggableId={navigationMenuItem.id}
                      index={index}
                      isInsideScrollableContainer
-                      isDragDisabled={!isEditMode}
-                      disableInteractiveElementBlocking={isEditMode}
+                      isDragDisabled={!isNavigationMenuInEditMode}
+                      disableInteractiveElementBlocking={
+                        isNavigationMenuInEditMode
+                      }
                      itemComponent={
                        <WorkspaceNavigationMenuItemFolderSubItem
                          navigationMenuItem={navigationMenuItem}
@@ -340,7 +351,6 @@ export const WorkspaceNavigationMenuItemsFolder = ({
                          }
                          objectMetadataItems={objectMetadataItems}
                          views={views}
-                          isEditMode={isEditMode}
                          onNavigationMenuItemClick={onNavigationMenuItemClick}
                          selectedNavigationMenuItemId={
                            selectedNavigationMenuItemId ?? null
@@ -354,7 +364,7 @@ export const WorkspaceNavigationMenuItemsFolder = ({
                </StyledFolderDroppableContent>
              )}
            </Droppable>
-            {isEditMode && isSelectedInEditMode && (
+            {isNavigationMenuInEditMode && isSelectedInEditMode && (
              <NavigationDrawerSubItem
                label={t`Add menu item`}
                Icon={IconPlus}
@@ -3,6 +3,7 @@ import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/
 import { ObjectIconWithViewOverlay } from '@/navigation-menu-item/components/ObjectIconWithViewOverlay';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import { useObjectNavItemColor } from '@/navigation-menu-item/hooks/useObjectNavItemColor';
+import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
 import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
 import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems';
 import { lastVisitedViewPerObjectMetadataItemState } from '@/navigation/states/lastVisitedViewPerObjectMetadataItemState';
@@ -29,7 +30,6 @@ import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 export type NavigationDrawerItemForObjectMetadataItemProps = {
  objectMetadataItem: ObjectMetadataItem;
  navigationMenuItem?: ProcessedNavigationMenuItem;
-  isEditMode?: boolean;
  isSelectedInEditMode?: boolean;
  onEditModeClick?: () => void;
  onActiveItemClickWhenNotInEditMode?: () => void;
@@ -39,12 +39,14 @@ export type NavigationDrawerItemForObjectMetadataItemProps = {
 export const NavigationDrawerItemForObjectMetadataItem = ({
  objectMetadataItem,
  navigationMenuItem,
-  isEditMode = false,
  isSelectedInEditMode = false,
  onEditModeClick,
  onActiveItemClickWhenNotInEditMode,
  isDragging = false,
 }: NavigationDrawerItemForObjectMetadataItemProps) => {
+  const isNavigationMenuInEditMode = useAtomStateValue(
+    isNavigationMenuInEditModeState,
+  );
  const isNavigationMenuItemEditingEnabled = useIsFeatureEnabled(
    FeatureFlagKey.IS_NAVIGATION_MENU_ITEM_EDITING_ENABLED,
  );
@@ -100,18 +102,19 @@ export const NavigationDrawerItemForObjectMetadataItem = ({
        }) + '/',
      );

-  const shouldUseClickHandler = isEditMode
+  const shouldUseClickHandler = isNavigationMenuInEditMode
    ? Boolean(onEditModeClick)
    : isActive && Boolean(onActiveItemClickWhenNotInEditMode);

  const handleClick = shouldUseClickHandler
-    ? isEditMode
+    ? isNavigationMenuInEditMode
      ? onEditModeClick
      : onActiveItemClickWhenNotInEditMode
    : undefined;

  const shouldNavigate =
-    !isEditMode && !(isActive && onActiveItemClickWhenNotInEditMode);
+    !isNavigationMenuInEditMode &&
+    !(isActive && onActiveItemClickWhenNotInEditMode);

  const isViewWithCustomName =
    isView &&
@@ -219,7 +222,7 @@ export const NavigationDrawerItemForObjectMetadataItem = ({
      label={label}
      secondaryLabel={secondaryLabel}
      to={
-        isEditMode || isDragging
+        isNavigationMenuInEditMode || isDragging
          ? undefined
          : shouldNavigate
            ? navigationPath
@@ -231,7 +234,7 @@ export const NavigationDrawerItemForObjectMetadataItem = ({
      active={isActive}
      isSelectedInEditMode={isSelectedInEditMode}
      isDragging={isDragging}
-      triggerEvent={isEditMode ? 'CLICK' : undefined}
+      triggerEvent={isNavigationMenuInEditMode ? 'CLICK' : undefined}
    />
  );
 };
@@ -28,7 +28,6 @@ type NavigationDrawerSectionForObjectMetadataItemsProps = {
  isRemote: boolean;
  objectMetadataItems: ObjectMetadataItem[];
  rightIcon?: React.ReactNode;
-  isEditMode?: boolean;
  selectedObjectMetadataItemId?: string | null;
  onObjectMetadataItemClick?: (objectMetadataItem: ObjectMetadataItem) => void;
  onActiveObjectMetadataItemClick?: (
@@ -41,7 +40,6 @@ export const NavigationDrawerSectionForObjectMetadataItems = ({
  isRemote,
  objectMetadataItems,
  rightIcon,
-  isEditMode = false,
  selectedObjectMetadataItemId = null,
  onObjectMetadataItemClick,
  onActiveObjectMetadataItemClick,
@@ -127,7 +125,6 @@ export const NavigationDrawerSectionForObjectMetadataItems = ({
              <NavigationDrawerItemForObjectMetadataItem
                key={`navigation-drawer-item-${objectMetadataItem.id}`}
                objectMetadataItem={objectMetadataItem}
-                isEditMode={isEditMode}
                isSelectedInEditMode={
                  selectedObjectMetadataItemId === objectMetadataItem.id
                }
@@ -1,18 +1,19 @@
 import { IconLink } from 'twenty-ui/display';

 import { WorkspaceNavigationMenuItemsFolder } from '@/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder';
+import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
 import { getEffectiveNavigationMenuItemColor } from '@/navigation-menu-item/utils/getEffectiveNavigationMenuItemColor';
 import { getObjectMetadataForNavigationMenuItem } from '@/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem';
 import type { ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems';
 import { NavigationDrawerItemForObjectMetadataItem } from '@/object-metadata/components/NavigationDrawerItemForObjectMetadataItem';
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';

 import type { WorkspaceSectionItemContentProps } from '@/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsTypes';

 export const WorkspaceSectionItemContent = ({
  item,
  editModeProps,
-  isEditMode,
  isDragging,
  folderChildrenById,
  folderCount,
@@ -22,6 +23,9 @@ export const WorkspaceSectionItemContent = ({
  objectMetadataItems,
  views,
 }: WorkspaceSectionItemContentProps) => {
+  const isNavigationMenuInEditMode = useAtomStateValue(
+    isNavigationMenuInEditModeState,
+  );
  const type = item.itemType;

  if (type === 'folder') {
@@ -33,7 +37,6 @@ export const WorkspaceSectionItemContent = ({
        folderColor={'color' in item ? (item.color ?? undefined) : undefined}
        navigationMenuItems={folderChildrenById.get(item.id) ?? []}
        isGroup={folderCount > 1}
-        isEditMode={isEditMode}
        isSelectedInEditMode={editModeProps.isSelectedInEditMode}
        onEditModeClick={editModeProps.onEditModeClick}
        onNavigationMenuItemClick={onNavigationMenuItemClick}
@@ -48,8 +51,12 @@ export const WorkspaceSectionItemContent = ({
    return (
      <NavigationDrawerItem
        label={linkItem.labelIdentifier}
-        to={isEditMode || isDragging ? undefined : linkItem.link}
-        onClick={isEditMode ? editModeProps.onEditModeClick : undefined}
+        to={
+          isNavigationMenuInEditMode || isDragging ? undefined : linkItem.link
+        }
+        onClick={
+          isNavigationMenuInEditMode ? editModeProps.onEditModeClick : undefined
+        }
        Icon={IconLink}
        iconColor={getEffectiveNavigationMenuItemColor(linkItem) ?? undefined}
        active={false}
@@ -73,7 +80,6 @@ export const WorkspaceSectionItemContent = ({
    <NavigationDrawerItemForObjectMetadataItem
      objectMetadataItem={objectMetadataItem}
      navigationMenuItem={item as ProcessedNavigationMenuItem}
-      isEditMode={isEditMode}
      isSelectedInEditMode={editModeProps.isSelectedInEditMode}
      onEditModeClick={editModeProps.onEditModeClick}
      isDragging={isDragging}
@@ -4,6 +4,7 @@ import { useLingui } from '@lingui/react/macro';
 import React, { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';

+import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import { NavigationMenuItemDragContext } from '@/navigation-menu-item/contexts/NavigationMenuItemDragContext';
 import { useIsDropDisabledForSection } from '@/navigation-menu-item/hooks/useIsDropDisabledForSection';
@@ -11,11 +12,11 @@ import {
  type FlatWorkspaceItem,
  type NavigationMenuItemClickParams,
 } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems';
+import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
 import { getObjectMetadataForNavigationMenuItem } from '@/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem';
 import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems';
 import { WorkspaceSectionListDndKit } from '@/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListDndKit';
 import { WorkspaceSectionListHelloPangea } from '@/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListHelloPangea';
-import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
 import type { EditModeProps } from '@/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsTypes';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
@@ -34,7 +35,6 @@ type NavigationDrawerSectionForWorkspaceItemsProps = {
  items: FlatWorkspaceItem[];
  rightIcon?: React.ReactNode;
  onAddMenuItem?: () => void;
-  isEditMode?: boolean;
  selectedNavigationMenuItemId?: string | null;
  onNavigationMenuItemClick?: (params: NavigationMenuItemClickParams) => void;
  onActiveObjectMetadataItemClick?: (
@@ -48,12 +48,14 @@ export const NavigationDrawerSectionForWorkspaceItems = ({
  items,
  rightIcon,
  onAddMenuItem,
-  isEditMode = false,
  selectedNavigationMenuItemId = null,
  onNavigationMenuItemClick,
  onActiveObjectMetadataItemClick,
 }: NavigationDrawerSectionForWorkspaceItemsProps) => {
  const { t } = useLingui();
+  const isNavigationMenuInEditMode = useAtomStateValue(
+    isNavigationMenuInEditModeState,
+  );
  const workspaceDropDisabled = useIsDropDisabledForSection(true);
  const { toggleNavigationSection, isNavigationSectionOpen } =
    useNavigationSection('Workspace');
@@ -141,7 +143,7 @@ export const NavigationDrawerSectionForWorkspaceItems = ({
  };

  const isAddMenuItemButtonVisible =
-    isEditMode && isDefined(onAddMenuItem) && !isDragging;
+    isNavigationMenuInEditMode && isDefined(onAddMenuItem) && !isDragging;

  if (flatItems.length === 0 && !isAddToNavigationDropTargetVisible) {
    return null;
@@ -156,7 +158,7 @@ export const NavigationDrawerSectionForWorkspaceItems = ({
          label={sectionTitle}
          onClick={() => toggleNavigationSection()}
          rightIcon={rightIcon}
-          alwaysShowRightIcon={isEditMode}
+          alwaysShowRightIcon={isNavigationMenuInEditMode}
        />
      </NavigationDrawerAnimatedCollapseWrapper>
      {(isNavigationSectionOpen || isAddToNavigationDropTargetVisible) &&
@@ -167,7 +169,6 @@ export const NavigationDrawerSectionForWorkspaceItems = ({
            folderChildrenById={folderChildrenById}
            folderCount={folderCount}
            workspaceDropDisabled={workspaceDropDisabled}
-            isEditMode={isEditMode}
            isDragging={isDragging}
            selectedNavigationMenuItemId={selectedNavigationMenuItemId}
            onNavigationMenuItemClick={onNavigationMenuItemClick}
@@ -188,7 +189,6 @@ export const NavigationDrawerSectionForWorkspaceItems = ({
            folderChildrenById={folderChildrenById}
            folderCount={folderCount}
            workspaceDropDisabled={workspaceDropDisabled}
-            isEditMode={isEditMode}
            isDragging={isDragging}
            selectedNavigationMenuItemId={selectedNavigationMenuItemId}
            onNavigationMenuItemClick={onNavigationMenuItemClick}
@@ -2,10 +2,12 @@ import styled from '@emotion/styled';
 import React from 'react';
 import { IconPlus } from 'twenty-ui/display';

-import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
 import { WorkspaceDndKitDroppableSlot } from '@/navigation-menu-item/components/WorkspaceDndKitDroppableSlot';
 import { WorkspaceDndKitSortableItem } from '@/navigation-menu-item/components/WorkspaceDndKitSortableItem';
+import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
+import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';

 import { WorkspaceSectionItemContent } from '@/object-metadata/components/NavigationDrawerSectionForWorkspaceItemContent';
 import type { WorkspaceSectionListDndKitProps } from '@/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsTypes';
@@ -23,7 +25,6 @@ export const WorkspaceSectionListDndKit = ({
  folderChildrenById,
  folderCount,
  workspaceDropDisabled,
-  isEditMode,
  isDragging,
  selectedNavigationMenuItemId,
  onNavigationMenuItemClick,
@@ -35,6 +36,9 @@ export const WorkspaceSectionListDndKit = ({
  onAddMenuItem,
  addMenuItemLabel,
 }: WorkspaceSectionListDndKitProps) => {
+  const isNavigationMenuInEditMode = useAtomStateValue(
+    isNavigationMenuInEditModeState,
+  );
  return (
    <StyledList
      data-dnd-group={
@@ -50,12 +54,11 @@ export const WorkspaceSectionListDndKit = ({
            group={
              NavigationMenuItemDroppableIds.WORKSPACE_ORPHAN_NAVIGATION_MENU_ITEMS
            }
-            disabled={!isEditMode || workspaceDropDisabled}
+            disabled={!isNavigationMenuInEditMode || workspaceDropDisabled}
          >
            <WorkspaceSectionItemContent
              item={item}
              editModeProps={getEditModeProps(item)}
-              isEditMode={isEditMode}
              isDragging={isDragging}
              folderChildrenById={folderChildrenById}
              folderCount={folderCount}
@@ -5,8 +5,10 @@ import { IconPlus } from 'twenty-ui/display';
 import { NavigationItemDropTarget } from '@/navigation-menu-item/components/NavigationItemDropTarget';
 import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
 import { NavigationSections } from '@/navigation-menu-item/constants/NavigationSections.constants';
+import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';

 import { WorkspaceSectionItemContent } from '@/object-metadata/components/NavigationDrawerSectionForWorkspaceItemContent';
 import type { WorkspaceSectionListHelloPangeaProps } from '@/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsTypes';
@@ -23,7 +25,6 @@ export const WorkspaceSectionListHelloPangea = ({
  folderChildrenById,
  folderCount,
  workspaceDropDisabled,
-  isEditMode,
  isDragging,
  selectedNavigationMenuItemId,
  onNavigationMenuItemClick,
@@ -35,6 +36,9 @@ export const WorkspaceSectionListHelloPangea = ({
  onAddMenuItem,
  addMenuItemLabel,
 }: WorkspaceSectionListHelloPangeaProps) => {
+  const isNavigationMenuInEditMode = useAtomStateValue(
+    isNavigationMenuInEditModeState,
+  );
  return (
    <Droppable
      droppableId={
@@ -59,13 +63,12 @@ export const WorkspaceSectionListHelloPangea = ({
                draggableId={item.id}
                index={index}
                isInsideScrollableContainer
-                isDragDisabled={!isEditMode}
-                disableInteractiveElementBlocking={isEditMode}
+                isDragDisabled={!isNavigationMenuInEditMode}
+                disableInteractiveElementBlocking={isNavigationMenuInEditMode}
                itemComponent={
                  <WorkspaceSectionItemContent
                    item={item}
                    editModeProps={getEditModeProps(item)}
-                    isEditMode={isEditMode}
                    isDragging={isDragging}
                    folderChildrenById={folderChildrenById}
                    folderCount={folderCount}
@@ -14,7 +14,6 @@ export type EditModeProps = {
 export type WorkspaceSectionItemContentProps = {
  item: FlatWorkspaceItem;
  editModeProps: EditModeProps;
-  isEditMode: boolean;
  isDragging: boolean;
  folderChildrenById: Map<string, ProcessedNavigationMenuItem[]>;
  folderCount: number;
@@ -34,7 +33,6 @@ export type WorkspaceSectionListCommonProps = {
  folderChildrenById: Map<string, ProcessedNavigationMenuItem[]>;
  folderCount: number;
  workspaceDropDisabled: boolean;
-  isEditMode: boolean;
  isDragging: boolean;
  selectedNavigationMenuItemId: string | null;
  onNavigationMenuItemClick?: (params: NavigationMenuItemClickParams) => void;