Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx

@@ -0,0 +1,119 @@
+import { ReactNode, useState } from 'react';
+import { css, useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+import { useRecoilValue } from 'recoil';
+
+import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+import { desktopNavDrawerWidths } from '../constants';
+
+import { NavigationDrawerBackButton } from './NavigationDrawerBackButton';
+import { NavigationDrawerHeader } from './NavigationDrawerHeader';
+
+export type NavigationDrawerProps = {
+  children: ReactNode;
+  className?: string;
+  footer?: ReactNode;
+  isSubMenu?: boolean;
+  logo?: string;
+  title?: string;
+};
+
+const StyledAnimatedContainer = styled(motion.div)`
+  display: flex;
+  justify-content: end;
+`;
+
+const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(8)};
+  height: 100%;
+  min-width: ${desktopNavDrawerWidths.menu};
+  padding: ${({ theme }) => theme.spacing(3, 2, 4)};
+
+  ${({ isSubMenu, theme }) =>
+    isSubMenu
+      ? css`
+          padding-right: ${theme.spacing(8)};
+          padding-top: 41px;
+        `
+      : ''}
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    width: 100%;
+  }
+`;
+
+const StyledItemsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(8)};
+  margin-bottom: auto;
+`;
+
+export const NavigationDrawer = ({
+  children,
+  className,
+  footer,
+  isSubMenu,
+  logo,
+  title,
+}: NavigationDrawerProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const isMobile = useIsMobile();
+  const theme = useTheme();
+  const isNavigationDrawerOpen = useRecoilValue(isNavigationDrawerOpenState);
+
+  const handleHover = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  const desktopWidth = !isNavigationDrawerOpen
+    ? 12
+    : isSubMenu
+      ? desktopNavDrawerWidths.submenu
+      : desktopNavDrawerWidths.menu;
+
+  const mobileWidth = isNavigationDrawerOpen ? '100%' : 0;
+
+  return (
+    <StyledAnimatedContainer
+      className={className}
+      initial={false}
+      animate={{
+        width: isMobile ? mobileWidth : desktopWidth,
+        opacity: isNavigationDrawerOpen ? 1 : 0,
+      }}
+      transition={{
+        duration: theme.animation.duration.normal,
+      }}
+    >
+      <StyledContainer
+        isSubMenu={isSubMenu}
+        onMouseEnter={handleHover}
+        onMouseLeave={handleMouseLeave}
+      >
+        {isSubMenu && title ? (
+          !isMobile && <NavigationDrawerBackButton title={title} />
+        ) : (
+          <NavigationDrawerHeader
+            name={title}
+            logo={logo}
+            showCollapseButton={isHovered}
+          />
+        )}
+        <StyledItemsContainer>{children}</StyledItemsContainer>
+        {footer}
+      </StyledContainer>
+    </StyledAnimatedContainer>
+  );
+};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx

@@ -0,0 +1,57 @@
+import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+
+import { IconChevronLeft } from '@/ui/display/icon/index';
+import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
+
+type NavigationDrawerBackButtonProps = {
+  title: string;
+};
+
+const StyledIconAndButtonContainer = styled.button`
+  align-items: center;
+  background: inherit;
+  border: none;
+  color: ${({ theme }) => theme.font.color.secondary};
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  gap: ${({ theme }) => theme.spacing(2)};
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+  padding: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
+`;
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+export const NavigationDrawerBackButton = ({
+  title,
+}: NavigationDrawerBackButtonProps) => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState);
+
+  return (
+    <StyledContainer>
+      <StyledIconAndButtonContainer
+        onClick={() => {
+          navigate(navigationMemorizedUrl, { replace: true });
+        }}
+      >
+        <IconChevronLeft
+          size={theme.icon.size.md}
+          stroke={theme.icon.stroke.lg}
+        />
+        <span>{title}</span>
+      </StyledIconAndButtonContainer>
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx

@@ -0,0 +1,58 @@
+import styled from '@emotion/styled';
+import { useSetRecoilState } from 'recoil';
+
+import {
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarRightCollapse,
+} from '@/ui/display/icon';
+import { IconButton } from '@/ui/input/button/components/IconButton';
+import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
+
+const StyledCollapseButton = styled.div`
+  align-items: center;
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  color: ${({ theme }) => theme.font.color.light};
+  cursor: pointer;
+  display: flex;
+  height: ${({ theme }) => theme.spacing(6)};
+  justify-content: center;
+  user-select: none;
+  width: ${({ theme }) => theme.spacing(6)};
+
+  &:hover {
+    background: ${({ theme }) => theme.background.quaternary};
+  }
+`;
+
+type NavigationDrawerCollapseButtonProps = {
+  className?: string;
+  direction?: 'left' | 'right';
+};
+
+export const NavigationDrawerCollapseButton = ({
+  className,
+  direction = 'left',
+}: NavigationDrawerCollapseButtonProps) => {
+  const setIsNavigationDrawerOpen = useSetRecoilState(
+    isNavigationDrawerOpenState,
+  );
+
+  return (
+    <StyledCollapseButton
+      className={className}
+      onClick={() =>
+        setIsNavigationDrawerOpen((previousIsOpen) => !previousIsOpen)
+      }
+    >
+      <IconButton
+        Icon={
+          direction === 'left'
+            ? IconLayoutSidebarLeftCollapse
+            : IconLayoutSidebarRightCollapse
+        }
+        variant="tertiary"
+        size="small"
+      />
+    </StyledCollapseButton>
+  );
+};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx

@@ -0,0 +1,65 @@
+import styled from '@emotion/styled';
+
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: ${({ theme }) => theme.spacing(6)};
+  padding: ${({ theme }) => theme.spacing(1)};
+  user-select: none;
+`;
+
+const StyledLogo = styled.div<{ logo: string }>`
+  background: url(${({ logo }) => logo});
+  background-position: center;
+  background-size: cover;
+  border-radius: ${({ theme }) => theme.border.radius.xs};
+  height: 16px;
+  width: 16px;
+`;
+
+const StyledName = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-family: 'Inter';
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
+const StyledNavigationDrawerCollapseButton = styled(
+  NavigationDrawerCollapseButton,
+)<{ show?: boolean }>`
+  margin-left: auto;
+  opacity: ${({ show }) => (show ? 1 : 0)};
+  transition: opacity ${({ theme }) => theme.animation.duration.normal}s;
+`;
+
+type NavigationDrawerHeaderProps = {
+  name?: string;
+  logo?: string;
+  showCollapseButton: boolean;
+};
+
+export const NavigationDrawerHeader = ({
+  name = 'Twenty',
+  logo = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACb0lEQVR4nO2VO4taQRTHr3AblbjxEVlwCwVhg7BoqqCIjy/gAyyFWNlYBOxsfH0KuxgQGwXRUkGuL2S7i1barGAgiwbdW93SnGOc4BonPiKahf3DwXFmuP/fPM4ZlvmlTxAhCBdzHnEQWYiv7Mr4C3NeuVYhQYDPzOUUQgDLBQGcLHNhvQK8DACPx8PTxiqVyvISG43GbyaT6Qfpn06n0m63e/tPAPF4vJ1MJu8kEsnWTCkWi1yr1RKGw+GDRqPBOTfr44vFQvD7/Q/lcpmaaVQAr9fLp1IpO22c47hGOBz+MB6PH+Vy+VYDAL8qlUoGtVotzOfzq4MAgsHgE/6KojiQyWR/bKVSqbSszHFM8Pl8z1YK48JsNltCOBwOnrYLO+8AAIjb+nHbycoTiUQfDJ7tFq4YAHiVSmXBxcD41u8flQU8z7fhzO0r83atVns3Go3u9Xr9x0O/RQXo9/tsIBBg6vX606a52Wz+bZ7P5/WwG29gxSJzhKgA6XTaDoFNF+krFAocmC//4yWEcSf2wTm7mCO19xFgSsKOLI16vV7b7XY7mRNoLwA0JymJ5uQIzgIAuX5PzDElT2m+E8BqtQ4ymcx7Yq7T6a6ZE4sKgOadTucaCwkxp1UzlEKh0GDxIXOwDWHAdi6Xe3swQDQa/Q7mywoolUpvsaptymazDWKxmBHTlWXZm405BFZoNpuGgwEmk4mE2SGtVivii4f1AO7J3ZopkQCQj7Ar1FeRChCJRJzVapX6DKNIfSc1Ax+wtQWQ55h6bH8FWDfYV4fO3wlwDr0C/BcADYiTPCxHqIEA2QsCZAkAKnRGkMbKN/sTX5YHPQ1e7SkAAAAASUVORK5CYII=',
+  showCollapseButton,
+}: NavigationDrawerHeaderProps) => {
+  const isMobile = useIsMobile();
+
+  return (
+    <StyledContainer>
+      <StyledLogo logo={logo} />
+      <StyledName>{name}</StyledName>
+      {!isMobile && (
+        <StyledNavigationDrawerCollapseButton
+          direction="left"
+          show={showCollapseButton}
+        />
+      )}
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -0,0 +1,175 @@
+import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useSetRecoilState } from 'recoil';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+type NavigationDrawerItemProps = {
+  className?: string;
+  label: string;
+  level?: 1 | 2;
+  to?: string;
+  onClick?: () => void;
+  Icon: IconComponent;
+  active?: boolean;
+  danger?: boolean;
+  soon?: boolean;
+  count?: number;
+  keyboard?: string[];
+};
+
+type StyledItemProps = {
+  active?: boolean;
+  danger?: boolean;
+  level: 1 | 2;
+  soon?: boolean;
+};
+
+const StyledItem = styled.div<StyledItemProps>`
+  align-items: center;
+  background: ${(props) =>
+    props.active ? props.theme.background.transparent.light : 'inherit'};
+  border: none;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${(props) => {
+    if (props.active) {
+      return props.theme.font.color.primary;
+    }
+    if (props.danger) {
+      return props.theme.color.red;
+    }
+    if (props.soon) {
+      return props.theme.font.color.light;
+    }
+    return props.theme.font.color.secondary;
+  }};
+  cursor: ${(props) => (props.soon ? 'default' : 'pointer')};
+  display: flex;
+  font-family: 'Inter';
+  font-size: ${({ theme }) => theme.font.size.md};
+  gap: ${({ theme }) => theme.spacing(2)};
+  margin-left: ${({ level, theme }) => theme.spacing((level - 1) * 4)};
+  padding-bottom: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+  padding-top: ${({ theme }) => theme.spacing(1)};
+  pointer-events: ${(props) => (props.soon ? 'none' : 'auto')};
+
+  :hover {
+    background: ${({ theme }) => theme.background.transparent.light};
+    color: ${(props) =>
+      props.danger ? props.theme.color.red : props.theme.font.color.primary};
+  }
+
+  :hover .keyboard-shortcuts {
+    visibility: visible;
+  }
+
+  user-select: none;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    font-size: ${({ theme }) => theme.font.size.lg};
+  }
+`;
+
+const StyledItemLabel = styled.div`
+  display: flex;
+`;
+
+const StyledSoonPill = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.transparent.light};
+  border-radius: 50px;
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  height: 16px;
+  justify-content: center;
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledItemCount = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.color.blue};
+  border-radius: ${({ theme }) => theme.border.radius.rounded};
+  color: ${({ theme }) => theme.grayScale.gray0};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+
+  height: 16px;
+  justify-content: center;
+  margin-left: auto;
+  width: 16px;
+`;
+
+const StyledKeyBoardShortcut = styled.div`
+  align-items: center;
+  border-radius: 4px;
+  color: ${({ theme }) => theme.font.color.light};
+  display: flex;
+  justify-content: center;
+  letter-spacing: 1px;
+  margin-left: auto;
+  visibility: hidden;
+`;
+
+export const NavigationDrawerItem = ({
+  className,
+  label,
+  level = 1,
+  Icon,
+  to,
+  onClick,
+  active,
+  danger,
+  soon,
+  count,
+  keyboard,
+}: NavigationDrawerItemProps) => {
+  const theme = useTheme();
+  const isMobile = useIsMobile();
+  const navigate = useNavigate();
+  const setIsNavigationDrawerOpen = useSetRecoilState(
+    isNavigationDrawerOpenState,
+  );
+
+  const handleItemClick = () => {
+    if (isMobile) {
+      setIsNavigationDrawerOpen(false);
+    }
+
+    if (onClick) {
+      onClick();
+      return;
+    }
+
+    if (to) navigate(to);
+  };
+
+  return (
+    <StyledItem
+      className={className}
+      level={level}
+      onClick={handleItemClick}
+      active={active}
+      aria-selected={active}
+      danger={danger}
+      soon={soon}
+    >
+      {Icon && <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />}
+      <StyledItemLabel>{label}</StyledItemLabel>
+      {soon && <StyledSoonPill>Soon</StyledSoonPill>}
+      {!!count && <StyledItemCount>{count}</StyledItemCount>}
+      {keyboard && (
+        <StyledKeyBoardShortcut className="keyboard-shortcuts">
+          {keyboard}
+        </StyledKeyBoardShortcut>
+      )}
+    </StyledItem>
+  );
+};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemGroup.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+const StyledGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(0.5)};
+`;
+
+export { StyledGroup as NavigationDrawerItemGroup };

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+const StyledSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.betweenSiblingsGap};
+`;
+
+export { StyledSection as NavigationDrawerSection };

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+
+type NavigationDrawerSectionTitleProps = {
+  label: string;
+};
+
+const StyledTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.light};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  padding: ${({ theme }) => theme.spacing(1)};
+  padding-top: 0;
+  text-transform: uppercase;
+`;
+
+export const NavigationDrawerSectionTitle = ({
+  label,
+}: NavigationDrawerSectionTitleProps) => <StyledTitle>{label}</StyledTitle>;

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx

@@ -0,0 +1,146 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Favorites } from '@/favorites/components/Favorites';
+import {
+  IconAt,
+  IconBell,
+  IconBuildingSkyscraper,
+  IconCalendarEvent,
+  IconCheckbox,
+  IconColorSwatch,
+  IconLogout,
+  IconMail,
+  IconSearch,
+  IconSettings,
+  IconTargetArrow,
+  IconUser,
+  IconUserCircle,
+  IconUsers,
+} from '@/ui/display/icon';
+import { GithubVersionLink } from '@/ui/navigation/link/components/GithubVersionLink';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+
+import { NavigationDrawer } from '../NavigationDrawer';
+import { NavigationDrawerItem } from '../NavigationDrawerItem';
+import { NavigationDrawerItemGroup } from '../NavigationDrawerItemGroup';
+import { NavigationDrawerSection } from '../NavigationDrawerSection';
+import { NavigationDrawerSectionTitle } from '../NavigationDrawerSectionTitle';
+
+const meta: Meta<typeof NavigationDrawer> = {
+  title: 'UI/Navigation/NavigationDrawer/NavigationDrawer',
+  component: NavigationDrawer,
+  decorators: [ComponentWithRouterDecorator, SnackBarDecorator],
+  parameters: { layout: 'fullscreen' },
+  argTypes: { children: { control: false }, footer: { control: false } },
+};
+
+export default meta;
+type Story = StoryObj<typeof NavigationDrawer>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <NavigationDrawerSection>
+          <NavigationDrawerItem label="Search" Icon={IconSearch} active />
+          <NavigationDrawerItem
+            label="Notifications"
+            to="/inbox"
+            Icon={IconBell}
+            soon={true}
+          />
+          <NavigationDrawerItem
+            label="Settings"
+            to="/settings/profile"
+            Icon={IconSettings}
+          />
+          <NavigationDrawerItem
+            label="Tasks"
+            to="/tasks"
+            Icon={IconCheckbox}
+            count={2}
+          />
+        </NavigationDrawerSection>
+
+        <Favorites />
+
+        <NavigationDrawerSection>
+          <NavigationDrawerSectionTitle label="Workspace" />
+          <NavigationDrawerItem
+            label="Companies"
+            to="/companies"
+            Icon={IconBuildingSkyscraper}
+          />
+          <NavigationDrawerItem label="People" to="/people" Icon={IconUser} />
+          <NavigationDrawerItem label="Opportunities" Icon={IconTargetArrow} />
+        </NavigationDrawerSection>
+      </>
+    ),
+    footer: null,
+  },
+};
+
+export const Submenu: Story = {
+  args: {
+    isSubMenu: true,
+    title: 'Settings',
+    children: (
+      <>
+        <NavigationDrawerSection>
+          <NavigationDrawerSectionTitle label="User" />
+          <NavigationDrawerItem
+            label="Profile"
+            to="/settings/profile"
+            Icon={IconUserCircle}
+            active
+          />
+          <NavigationDrawerItem
+            label="Appearance"
+            to="/settings/profile/appearance"
+            Icon={IconColorSwatch}
+          />
+          <NavigationDrawerItemGroup>
+            <NavigationDrawerItem
+              label="Accounts"
+              to="/settings/accounts"
+              Icon={IconAt}
+            />
+            <NavigationDrawerItem
+              level={2}
+              label="Emails"
+              to="/settings/accounts/emails"
+              Icon={IconMail}
+            />
+            <NavigationDrawerItem
+              level={2}
+              label="Calendars"
+              Icon={IconCalendarEvent}
+              soon
+            />
+          </NavigationDrawerItemGroup>
+        </NavigationDrawerSection>
+
+        <NavigationDrawerSection>
+          <NavigationDrawerSectionTitle label="Workspace" />
+          <NavigationDrawerItem
+            label="General"
+            to="/settings/workspace"
+            Icon={IconSettings}
+          />
+          <NavigationDrawerItem
+            label="Members"
+            to="/settings/workspace-members"
+            Icon={IconUsers}
+          />
+        </NavigationDrawerSection>
+
+        <NavigationDrawerSection>
+          <NavigationDrawerSectionTitle label="Other" />
+          <NavigationDrawerItem label="Logout" Icon={IconLogout} />
+        </NavigationDrawerSection>
+      </>
+    ),
+    footer: <GithubVersionLink />,
+  },
+};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerCollapseButton.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { NavigationDrawerCollapseButton } from '../NavigationDrawerCollapseButton';
+
+const meta: Meta<typeof NavigationDrawerCollapseButton> = {
+  title: 'UI/Navigation/NavigationDrawer/NavigationDrawerCollapseButton',
+  decorators: [ComponentDecorator],
+  component: NavigationDrawerCollapseButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof NavigationDrawerCollapseButton>;
+
+export const Default: Story = {};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerItem.stories.tsx

@@ -0,0 +1,94 @@
+import { MemoryRouter } from 'react-router-dom';
+import styled from '@emotion/styled';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { IconSearch } from '@/ui/display/icon';
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { CatalogStory } from '~/testing/types';
+
+import { NavigationDrawerItem } from '../NavigationDrawerItem';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+`;
+
+const meta: Meta<typeof NavigationDrawerItem> = {
+  title: 'UI/Navigation/NavigationDrawer/NavigationDrawerItem',
+  component: NavigationDrawerItem,
+  args: {
+    label: 'Search',
+    Icon: IconSearch,
+  },
+  argTypes: { Icon: { control: false } },
+};
+
+export default meta;
+type Story = StoryObj<typeof NavigationDrawerItem>;
+
+export const Default: Story = {
+  decorators: [
+    (Story) => (
+      <StyledContainer>
+        <Story />
+      </StyledContainer>
+    ),
+    ComponentWithRouterDecorator,
+  ],
+};
+
+export const Catalog: CatalogStory<Story, typeof NavigationDrawerItem> = {
+  decorators: [
+    (Story) => (
+      <StyledContainer>
+        <Story />
+      </StyledContainer>
+    ),
+    CatalogDecorator,
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  parameters: {
+    pseudo: { hover: ['.hover'] },
+    catalog: {
+      dimensions: [
+        {
+          name: 'danger',
+          values: [true, false],
+          props: (danger: boolean) => ({ danger }),
+          labels: (danger: boolean) => (danger ? 'Danger' : 'No Danger'),
+        },
+        {
+          name: 'active',
+          values: [true, false],
+          props: (active: boolean) => ({ active }),
+          labels: (active: boolean) => (active ? 'Active' : 'Inactive'),
+        },
+        {
+          name: 'states',
+          values: ['Default', 'Hover'],
+          props: (state: string) => ({
+            className: state === 'Hover' ? 'hover' : undefined,
+          }),
+        },
+        {
+          name: 'adornments',
+          values: ['Without Adornments', 'Soon Pill', 'Count', 'Keyboard Keys'],
+          props: (adornmentName: string) =>
+            adornmentName === 'Soon Pill'
+              ? { soon: true }
+              : adornmentName === 'Count'
+                ? { count: 3 }
+                : adornmentName === 'Keyboard Keys'
+                  ? { keyboard: ['⌘', 'K'] }
+                  : {},
+        },
+      ],
+    },
+  },
+};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/index.ts

@@ -0,0 +1,4 @@
+export const desktopNavDrawerWidths = {
+  menu: '236px',
+  submenu: '536px',
+};