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/NavigationBar.tsx

@@ -1,33 +0,0 @@
-import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
-
-import { NavigationBarItem } from './NavigationBarItem';
-
-const StyledContainer = styled.div`
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(4)};
-  justify-content: center;
-  padding: ${({ theme }) => theme.spacing(3)};
-  z-index: 1001;
-`;
-
-type NavigationBarProps = {
-  activeItemName: string;
-  items: { name: string; Icon: IconComponent; onClick: () => void }[];
-};
-
-export const NavigationBar = ({
-  activeItemName,
-  items,
-}: NavigationBarProps) => (
-  <StyledContainer>
-    {items.map(({ Icon, name, onClick }) => (
-      <NavigationBarItem
-        key={name}
-        Icon={Icon}
-        isActive={activeItemName === name}
-        onClick={onClick}
-      />
-    ))}
-  </StyledContainer>
-);

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

@@ -1,41 +0,0 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
-
-const StyledIconButton = styled.div<{ isActive?: boolean }>`
-  align-items: center;
-  background-color: ${({ isActive, theme }) =>
-    isActive ? theme.background.transparent.light : 'none'};
-  border-radius: ${({ theme }) => theme.spacing(1)};
-  cursor: pointer;
-  display: flex;
-  height: ${({ theme }) => theme.spacing(10)};
-  justify-content: center;
-  transition: background-color ${({ theme }) => theme.animation.duration.fast}s
-    ease;
-  width: ${({ theme }) => theme.spacing(10)};
-
-  &:hover {
-    background-color: ${({ theme }) => theme.background.transparent.light};
-  }
-`;
-
-type NavigationBarItemProps = {
-  Icon: IconComponent;
-  isActive: boolean;
-  onClick: () => void;
-};
-
-export const NavigationBarItem = ({
-  Icon,
-  isActive,
-  onClick,
-}: NavigationBarItemProps) => {
-  const theme = useTheme();
-
-  return (
-    <StyledIconButton isActive={isActive} onClick={onClick}>
-      <Icon color={theme.color.gray50} size={theme.icon.size.lg} />
-    </StyledIconButton>
-  );
-};

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,