Navbar customization v2 (#18026)

Adds color support for navigation menu items.

---------

Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>
Co-authored-by: Devessier <baptiste@devessier.fr>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItems.tsx

@@ -1,7 +1,12 @@
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
-import { useNavigate } from 'react-router-dom';
-import { IconLink, IconPlus, IconTool, useIcons } from 'twenty-ui/display';
+import {
+  IconColumnInsertRight,
+  IconLink,
+  IconPlus,
+  IconTool,
+  useIcons,
+} from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
@@ -26,9 +31,8 @@ import { prefetchNavigationMenuItemsState } from '@/prefetch/states/prefetchNavi
 import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
-import { useStore } from 'jotai';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { isNonEmptyString } from '@sniptt/guards';
+import { useStore } from 'jotai';
 import { CommandMenuPages } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 
@@ -64,7 +68,6 @@ export const WorkspaceNavigationMenuItems = () => {
   const setOpenNavigationMenuItemFolderIds = useSetAtomState(
     openNavigationMenuItemFolderIdsState,
   );
-  const navigate = useNavigate();
   const { navigateCommandMenu } = useNavigateCommandMenu();
   const { openNavigationMenuItemInCommandMenu } =
     useOpenNavigationMenuItemInCommandMenu();
@@ -100,14 +103,14 @@ export const WorkspaceNavigationMenuItems = () => {
         pageIcon: IconLink,
       });
     } else if (isDefined(objectMetadataItem)) {
+      const pageTitle =
+        item.itemType === NavigationMenuItemType.VIEW
+          ? item.labelIdentifier
+          : objectMetadataItem.labelSingular;
       openNavigationMenuItemInCommandMenu({
-        pageTitle: objectMetadataItem.labelPlural,
+        pageTitle,
         pageIcon: getIcon(objectMetadataItem.icon),
       });
-
-      if (isNonEmptyString(item.link)) {
-        navigate(item.link);
-      }
     }
   };
 
@@ -118,7 +121,7 @@ export const WorkspaceNavigationMenuItems = () => {
     enterEditMode();
     setSelectedNavigationMenuItemInEditMode(navigationMenuItemId);
     openNavigationMenuItemInCommandMenu({
-      pageTitle: objectMetadataItem.labelPlural,
+      pageTitle: objectMetadataItem.labelSingular,
       pageIcon: getIcon(objectMetadataItem.icon),
     });
   };
@@ -128,7 +131,7 @@ export const WorkspaceNavigationMenuItems = () => {
     navigateCommandMenu({
       page: CommandMenuPages.NavigationMenuAddItem,
       pageTitle: t`New sidebar item`,
-      pageIcon: IconPlus,
+      pageIcon: IconColumnInsertRight,
       resetNavigationStack: true,
     });
   };