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/command-menu/components/CommandMenuPageInfo.tsx

@@ -1,12 +1,16 @@
 import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared/utils';
-import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+import {
+  IconColumnInsertRight,
+  OverflowingTextWithTooltip,
+} from 'twenty-ui/display';
 
 import { CommandMenuAskAIInfo } from '@/command-menu/components/CommandMenuAskAIInfo';
 import { CommandMenuFolderInfo } from '@/command-menu/components/CommandMenuFolderInfo';
 import { CommandMenuLinkInfo } from '@/command-menu/components/CommandMenuLinkInfo';
 import { CommandMenuMultipleRecordsInfo } from '@/command-menu/components/CommandMenuMultipleRecordsInfo';
 import { CommandMenuObjectViewRecordInfo } from '@/command-menu/components/CommandMenuObjectViewRecordInfo';
+import { CommandMenuPageInfoLayout } from '@/command-menu/components/CommandMenuPageInfoLayout';
 import { CommandMenuPageLayoutInfo } from '@/command-menu/components/CommandMenuPageLayoutInfo';
 import { CommandMenuRecordInfo } from '@/command-menu/components/CommandMenuRecordInfo';
 import { CommandMenuWorkflowStepInfo } from '@/command-menu/components/CommandMenuWorkflowStepInfo';
@@ -16,6 +20,7 @@ import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-ite
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { CommandMenuPages } from 'twenty-shared/types';
 
+import { useTheme } from '@emotion/react';
 import { type CommandMenuContextChipProps } from './CommandMenuContextChip';
 
 const StyledPageTitle = styled.div`
@@ -29,6 +34,7 @@ type CommandMenuPageInfoProps = {
 };
 
 export const CommandMenuPageInfo = ({ pageChip }: CommandMenuPageInfoProps) => {
+  const theme = useTheme();
   const selectedNavigationMenuItemInEditMode = useAtomStateValue(
     selectedNavigationMenuItemInEditModeState,
   );
@@ -121,6 +127,20 @@ export const CommandMenuPageInfo = ({ pageChip }: CommandMenuPageInfoProps) => {
     return <CommandMenuAskAIInfo />;
   }
 
+  if (pageChip.page?.page === CommandMenuPages.NavigationMenuAddItem) {
+    return (
+      <CommandMenuPageInfoLayout
+        icon={
+          <IconColumnInsertRight
+            size={theme.icon.size.md}
+            color={theme.font.color.tertiary}
+          />
+        }
+        title={<OverflowingTextWithTooltip text={pageChip.text ?? ''} />}
+      />
+    );
+  }
+
   return (
     <StyledPageTitle>
       <OverflowingTextWithTooltip text={pageChip.text ?? ''} />