Migrate to a monorepo structure (#2909)

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

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+
+import { NavigationBarItem } from './NavigationBarItem';
+
+const StyledContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)};
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(3)};
+`;
+
+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

@@ -0,0 +1,42 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+
+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

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  IconCheckbox,
+  IconList,
+  IconSearch,
+  IconSettings,
+} from '@/ui/display/icon';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import { NavigationBar } from '../NavigationBar';
+
+const meta: Meta<typeof NavigationBar> = {
+  title: 'UI/Navigation/NavigationBar/NavigationBar',
+  component: NavigationBar,
+  args: {
+    activeItemName: 'main',
+    items: [
+      { name: 'main', Icon: IconList, onClick: () => undefined },
+      { name: 'search', Icon: IconSearch, onClick: () => undefined },
+      { name: 'tasks', Icon: IconCheckbox, onClick: () => undefined },
+      { name: 'settings', Icon: IconSettings, onClick: () => undefined },
+    ],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof NavigationBar>;
+
+export const Default: Story = {
+  decorators: [ComponentDecorator, ComponentWithRouterDecorator],
+};