Migrate to twenty-ui - navigation/navigation-bar (#7996)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7537](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7537).

 --- 

### Description

- Move navigation-bar components to `twenty-ui`  

Fixes  twentyhq/private-issues#81

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx

@@ -1,9 +1,14 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
-import { NavigationBar } from '@/ui/navigation/navigation-bar/components/NavigationBar';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { useRecoilState } from 'recoil';
-import { IconComponent, IconList, IconSearch, IconSettings } from 'twenty-ui';
+import {
+  IconComponent,
+  IconList,
+  IconSearch,
+  IconSettings,
+  NavigationBar,
+} from 'twenty-ui';
 import { useIsSettingsPage } from '../hooks/useIsSettingsPage';
 import { currentMobileNavigationDrawerState } from '../states/currentMobileNavigationDrawerState';
 

packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/__stories__/NavigationBar.stories.tsx

@@ -5,12 +5,11 @@ import {
   IconList,
   IconSearch,
   IconSettings,
+  NavigationBar,
 } from 'twenty-ui';
 
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 
-import { NavigationBar } from '../NavigationBar';
-
 const meta: Meta<typeof NavigationBar> = {
   title: 'UI/Navigation/NavigationBar/NavigationBar',
   component: NavigationBar,

packages/twenty-front/tsup.ui.index.tsx

@@ -25,7 +25,6 @@ export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelect';
 export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelectAvatar';
 export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelectColor';
 export * from './src/modules/ui/navigation/menu-item/components/MenuItemToggle';
-export * from './src/modules/ui/navigation/navigation-bar/components/NavigationBar';
 export * from './src/modules/ui/navigation/step-bar/components/StepBar';
 
 declare module '@emotion/react' {

packages/twenty-ui/src/navigation/index.ts

@@ -9,3 +9,5 @@ export * from './link/components/SocialLink';
 export * from './link/components/UndecoratedLink';
 export * from './link/constants/Cal';
 export * from './link/constants/GithubLink';
+export * from './navigation-bar/components/NavigationBar';
+export * from './navigation-bar/components/NavigationBarItem';

packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBar.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 
 import { NavigationBarItem } from './NavigationBarItem';
 

packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 
 const StyledIconButton = styled.div<{ isActive?: boolean }>`
   align-items: center;