From f8ddf7f32cfec8d276bdc157ec35157cd369998e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs?= <guigon.thais@gmail.com>
Date: Wed, 6 Dec 2023 10:36:10 +0100
Subject: [PATCH] fix: several Navigation Bar and Drawer fixes (#2845)

* fix: several Navigation Bar and Drawer fixes

Fixes #2821

- Fix navigation drawer animations
- Fix navigation bar positioning
- Do not display navigation drawer collapse button on mobile
- Refactor code and rename componentst

* Fix storybook test

* fix: fix NavigationDrawerHeader elements space-between

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../favorites/components/Favorites.tsx        |   8 +-
 .../components/AppNavigationDrawer.tsx        |  74 +++++++++++
 .../components/DesktopNavigationDrawer.tsx    |  64 ----------
 .../components/MainNavigationDrawerItems.tsx  |  79 ++++++++++++
 .../components/MobileNavigationBar.tsx        |  34 ++---
 .../components/MobileNavigationDrawer.tsx     |  21 ----
 .../components/WorkspaceNavItems.tsx          |  23 ----
 .../AppNavigationDrawer.stories.tsx           |  77 ++++++++++++
 .../DesktopNavigationDrawer.stories.tsx       |  23 ----
 .../MobileNavigationDrawer.stories.tsx        |  23 ----
 .../currentMobileNavigationDrawerState.ts     |   6 +
 .../components/ObjectMetadataNavItems.tsx     |  13 +-
 ....tsx => SettingsNavigationDrawerItems.tsx} |  39 +++---
 .../components/SupportChat.tsx                |   8 +-
 .../modules/ui/layout/page/DefaultLayout.tsx  |  18 +--
 .../src/modules/ui/layout/page/PageHeader.tsx |  10 +-
 .../ui/layout/page/RightDrawerContainer.tsx   |   8 +-
 .../link/components/GithubVersionLink.tsx     |  33 +++++
 .../__stories__/GithubVersionLink.stories.tsx |  16 +++
 .../ui/navigation/link/constants/index.ts     |   1 +
 .../components/MainNavbar.tsx                 |  45 -------
 .../components/NavCollapseButton.tsx          |  79 ------------
 .../components/NavItemsContainer.tsx          |  17 ---
 .../components/NavWorkspaceButton.tsx         |  80 ------------
 .../components/NavbarAnimatedContainer.tsx    |  55 --------
 .../components/NavigationDrawer.tsx           | 118 ++++++++++++++++++
 ...ton.tsx => NavigationDrawerBackButton.tsx} |   8 +-
 .../NavigationDrawerCollapseButton.tsx        |  58 +++++++++
 .../components/NavigationDrawerHeader.tsx     |  66 ++++++++++
 .../{NavItem.tsx => NavigationDrawerItem.tsx} |  21 ++--
 ...e.tsx => NavigationDrawerSectionTitle.tsx} |  10 +-
 .../components/SubMenuNavbar.tsx              |  91 --------------
 .../__stories__/MainNavbar.stories.tsx        |  47 -------
 .../__stories__/NavCollapseButton.stories.tsx |  22 ----
 .../__stories__/NavItem.stories.tsx           | 100 ---------------
 .../__stories__/NavigationDrawer.stories.tsx  | 109 ++++++++++++++++
 ...NavigationDrawerCollapseButton.stories.tsx |  16 +++
 .../NavigationDrawerItem.stories.tsx          |  94 ++++++++++++++
 .../__stories__/SubMenuNavbar.stories.tsx     |  55 --------
 .../navigation-drawer/constants/index.ts      |   2 -
 .../states/isNavigationDrawerOpenState.ts     |  10 ++
 .../states/navigationDrawerState.ts           |   6 -
 42 files changed, 847 insertions(+), 840 deletions(-)
 create mode 100644 front/src/modules/navigation/components/AppNavigationDrawer.tsx
 delete mode 100644 front/src/modules/navigation/components/DesktopNavigationDrawer.tsx
 create mode 100644 front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
 delete mode 100644 front/src/modules/navigation/components/MobileNavigationDrawer.tsx
 delete mode 100644 front/src/modules/navigation/components/WorkspaceNavItems.tsx
 create mode 100644 front/src/modules/navigation/components/__stories__/AppNavigationDrawer.stories.tsx
 delete mode 100644 front/src/modules/navigation/components/__stories__/DesktopNavigationDrawer.stories.tsx
 delete mode 100644 front/src/modules/navigation/components/__stories__/MobileNavigationDrawer.stories.tsx
 create mode 100644 front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts
 rename front/src/modules/settings/components/{SettingsNavbar.tsx => SettingsNavigationDrawerItems.tsx} (76%)
 rename front/src/modules/{ui/navigation/navigation-drawer => support}/components/SupportChat.tsx (96%)
 create mode 100644 front/src/modules/ui/navigation/link/components/GithubVersionLink.tsx
 create mode 100644 front/src/modules/ui/navigation/link/components/__stories__/GithubVersionLink.stories.tsx
 create mode 100644 front/src/modules/ui/navigation/link/constants/index.ts
 delete mode 100644 front/src/modules/ui/navigation/navigation-drawer/components/MainNavbar.tsx
 delete mode 100644 front/src/modules/ui/navigation/navigation-drawer/components/NavCollapseButton.tsx
 delete mode 100644 front/src/modules/ui/navigation/navigation-drawer/components/NavItemsContainer.tsx
 delete mode 100644 front/src/modules/ui/navigation/navigation-drawer/components/NavWorkspaceButton.tsx
 delete mode 100644 front/src/modules/ui/navigation/navigation-drawer/components/NavbarAnimatedContainer.tsx
 create mode 100644 front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
 rename front/src/modules/ui/navigation/navigation-drawer/components/{NavBackButton.tsx => NavigationDrawerBackButton.tsx} (90%)
 create mode 100644 front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx
 create mode 100644 front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
 rename front/src/modules/ui/navigation/navigation-drawer/components/{NavItem.tsx => NavigationDrawerItem.tsx} (91%)
 rename front/src/modules/ui/navigation/navigation-drawer/components/{NavTitle.tsx => NavigationDrawerSectionTitle.tsx} (72%)
 delete mode 100644 front/src/modules/ui/navigation/navigation-drawer/components/SubMenuNavbar.tsx
 delete mode 100644 front/src/modules/ui/navigation/navigation-drawer/components/__stories__/MainNavbar.stories.tsx
 delete mode 100644 front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavCollapseButton.stories.tsx
 delete mode 100644 front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavItem.stories.tsx
 create mode 100644 front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx
 create mode 100644 front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerCollapseButton.stories.tsx
 create mode 100644 front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerItem.stories.tsx
 delete mode 100644 front/src/modules/ui/navigation/navigation-drawer/components/__stories__/SubMenuNavbar.stories.tsx
 create mode 100644 front/src/modules/ui/navigation/states/isNavigationDrawerOpenState.ts
 delete mode 100644 front/src/modules/ui/navigation/states/navigationDrawerState.ts

diff --git a/front/src/modules/favorites/components/Favorites.tsx b/front/src/modules/favorites/components/Favorites.tsx
index 1b5c1b32d..ad16361ef 100644
--- a/front/src/modules/favorites/components/Favorites.tsx
+++ b/front/src/modules/favorites/components/Favorites.tsx
@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
 
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
-import NavItem from '@/ui/navigation/navigation-drawer/components/NavItem';
-import NavTitle from '@/ui/navigation/navigation-drawer/components/NavTitle';
+import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
+import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
 import { Avatar } from '@/users/components/Avatar';
 
 import { useFavorites } from '../hooks/useFavorites';
@@ -24,7 +24,7 @@ export const Favorites = () => {
 
   return (
     <StyledContainer>
-      <NavTitle label="Favorites" />
+      <NavigationDrawerSectionTitle label="Favorites" />
       <DraggableList
         onDragEnd={handleReorderFavorite}
         draggableItems={
@@ -45,7 +45,7 @@ export const Favorites = () => {
                   draggableId={id}
                   index={index}
                   itemComponent={
-                    <NavItem
+                    <NavigationDrawerItem
                       key={id}
                       label={labelIdentifier}
                       Icon={() => (
diff --git a/front/src/modules/navigation/components/AppNavigationDrawer.tsx b/front/src/modules/navigation/components/AppNavigationDrawer.tsx
new file mode 100644
index 000000000..0a8a50cdd
--- /dev/null
+++ b/front/src/modules/navigation/components/AppNavigationDrawer.tsx
@@ -0,0 +1,74 @@
+import { useEffect } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { SettingsNavigationDrawerItems } from '@/settings/components/SettingsNavigationDrawerItems';
+import { SupportChat } from '@/support/components/SupportChat';
+import { GithubVersionLink } from '@/ui/navigation/link/components/GithubVersionLink';
+import {
+  NavigationDrawer,
+  NavigationDrawerProps,
+} from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
+import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
+
+import { useIsSettingsPage } from '../hooks/useIsSettingsPage';
+import { currentMobileNavigationDrawerState } from '../states/currentMobileNavigationDrawerState';
+
+import { MainNavigationDrawerItems } from './MainNavigationDrawerItems';
+
+export type AppNavigationDrawerProps = {
+  className?: string;
+};
+
+export const AppNavigationDrawer = ({
+  className,
+}: AppNavigationDrawerProps) => {
+  const isMobile = useIsMobile();
+  const isSettingsPage = useIsSettingsPage();
+  const currentMobileNavigationDrawer = useRecoilValue(
+    currentMobileNavigationDrawerState,
+  );
+  const setIsNavigationDrawerOpen = useSetRecoilState(
+    isNavigationDrawerOpenState,
+  );
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+
+  const isSettingsDrawer = isMobile
+    ? currentMobileNavigationDrawer === 'settings'
+    : isSettingsPage;
+
+  const drawerProps: NavigationDrawerProps = isSettingsDrawer
+    ? {
+        isSubMenu: true,
+        title: 'Settings',
+        children: <SettingsNavigationDrawerItems />,
+        footer: <GithubVersionLink />,
+      }
+    : {
+        logo:
+          (currentWorkspace?.logo &&
+            getImageAbsoluteURIOrBase64(currentWorkspace.logo)) ??
+          undefined,
+        title: currentWorkspace?.displayName ?? undefined,
+        children: <MainNavigationDrawerItems />,
+        footer: <SupportChat />,
+      };
+
+  useEffect(() => {
+    setIsNavigationDrawerOpen(!isMobile);
+  }, [isMobile, setIsNavigationDrawerOpen]);
+
+  return (
+    <NavigationDrawer
+      className={className}
+      isSubMenu={drawerProps.isSubMenu}
+      logo={drawerProps.logo}
+      title={drawerProps.title}
+      footer={drawerProps.footer}
+    >
+      {drawerProps.children}
+    </NavigationDrawer>
+  );
+};
diff --git a/front/src/modules/navigation/components/DesktopNavigationDrawer.tsx b/front/src/modules/navigation/components/DesktopNavigationDrawer.tsx
deleted file mode 100644
index 1d4339d56..000000000
--- a/front/src/modules/navigation/components/DesktopNavigationDrawer.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useLocation, useNavigate } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
-
-import { useCurrentUserTaskCount } from '@/activities/tasks/hooks/useCurrentUserDueTaskCount';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { Favorites } from '@/favorites/components/Favorites';
-import { useIsTasksPage } from '@/navigation/hooks/useIsTasksPage';
-import { SettingsNavbar } from '@/settings/components/SettingsNavbar';
-import {
-  IconBell,
-  IconCheckbox,
-  IconSearch,
-  IconSettings,
-} from '@/ui/display/icon/index';
-import MainNavbar from '@/ui/navigation/navigation-drawer/components/MainNavbar';
-import NavItem from '@/ui/navigation/navigation-drawer/components/NavItem';
-import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
-
-import { useIsSettingsPage } from '../hooks/useIsSettingsPage';
-
-import { WorkspaceNavItems } from './WorkspaceNavItems';
-
-export const DesktopNavigationDrawer = () => {
-  const { toggleCommandMenu } = useCommandMenu();
-  const isSettingsPage = useIsSettingsPage();
-  const isTasksPage = useIsTasksPage();
-  const { currentUserDueTaskCount } = useCurrentUserTaskCount();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const setNavigationMemorizedUrl = useSetRecoilState(
-    navigationMemorizedUrlState,
-  );
-
-  return isSettingsPage ? (
-    <SettingsNavbar />
-  ) : (
-    <MainNavbar>
-      <NavItem
-        label="Search"
-        Icon={IconSearch}
-        onClick={toggleCommandMenu}
-        keyboard={['⌘', 'K']}
-      />
-      <NavItem label="Notifications" to="/inbox" Icon={IconBell} soon />
-      <NavItem
-        label="Settings"
-        onClick={() => {
-          setNavigationMemorizedUrl(location.pathname + location.search);
-          navigate('/settings/profile');
-        }}
-        Icon={IconSettings}
-      />
-      <NavItem
-        label="Tasks"
-        to="/tasks"
-        active={isTasksPage}
-        Icon={IconCheckbox}
-        count={currentUserDueTaskCount}
-      />
-      <Favorites />
-      <WorkspaceNavItems />
-    </MainNavbar>
-  );
-};
diff --git a/front/src/modules/navigation/components/MainNavigationDrawerItems.tsx b/front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
new file mode 100644
index 000000000..df3688048
--- /dev/null
+++ b/front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
@@ -0,0 +1,79 @@
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useSetRecoilState } from 'recoil';
+
+import { useCurrentUserTaskCount } from '@/activities/tasks/hooks/useCurrentUserDueTaskCount';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { Favorites } from '@/favorites/components/Favorites';
+import { ObjectMetadataNavItems } from '@/object-metadata/components/ObjectMetadataNavItems';
+import {
+  IconBell,
+  IconCheckbox,
+  IconSearch,
+  IconSettings,
+  IconTargetArrow,
+} from '@/ui/display/icon';
+import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
+import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
+import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+import { useIsTasksPage } from '../hooks/useIsTasksPage';
+
+export const MainNavigationDrawerItems = () => {
+  const isMobile = useIsMobile();
+  const { toggleCommandMenu } = useCommandMenu();
+  const isTasksPage = useIsTasksPage();
+  const { currentUserDueTaskCount } = useCurrentUserTaskCount();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const setNavigationMemorizedUrl = useSetRecoilState(
+    navigationMemorizedUrlState,
+  );
+
+  return (
+    <>
+      {!isMobile && (
+        <>
+          <NavigationDrawerItem
+            label="Search"
+            Icon={IconSearch}
+            onClick={toggleCommandMenu}
+            keyboard={['⌘', 'K']}
+          />
+          <NavigationDrawerItem
+            label="Notifications"
+            to="/inbox"
+            Icon={IconBell}
+            soon
+          />
+          <NavigationDrawerItem
+            label="Settings"
+            onClick={() => {
+              setNavigationMemorizedUrl(location.pathname + location.search);
+              navigate('/settings/profile');
+            }}
+            Icon={IconSettings}
+          />
+          <NavigationDrawerItem
+            label="Tasks"
+            to="/tasks"
+            active={isTasksPage}
+            Icon={IconCheckbox}
+            count={currentUserDueTaskCount}
+          />
+        </>
+      )}
+
+      <Favorites />
+
+      <NavigationDrawerSectionTitle label="Workspace" />
+      <ObjectMetadataNavItems />
+      <NavigationDrawerItem
+        label="Opportunities"
+        to="/objects/opportunities"
+        active={location.pathname === '/objects/opportunities'}
+        Icon={IconTargetArrow}
+      />
+    </>
+  );
+};
diff --git a/front/src/modules/navigation/components/MobileNavigationBar.tsx b/front/src/modules/navigation/components/MobileNavigationBar.tsx
index 0a34f66e4..f256a35fc 100644
--- a/front/src/modules/navigation/components/MobileNavigationBar.tsx
+++ b/front/src/modules/navigation/components/MobileNavigationBar.tsx
@@ -11,10 +11,11 @@ import {
 } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { NavigationBar } from '@/ui/navigation/navigation-bar/components/NavigationBar';
-import { navigationDrawerState } from '@/ui/navigation/states/navigationDrawerState';
+import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
 
 import { useIsSettingsPage } from '../hooks/useIsSettingsPage';
 import { useIsTasksPage } from '../hooks/useIsTasksPage';
+import { currentMobileNavigationDrawerState } from '../states/currentMobileNavigationDrawerState';
 
 type NavigationBarItemName = 'main' | 'search' | 'tasks' | 'settings';
 
@@ -24,11 +25,15 @@ export const MobileNavigationBar = () => {
   const isTasksPage = useIsTasksPage();
   const isSettingsPage = useIsSettingsPage();
   const navigate = useNavigate();
-  const [navigationDrawer, setNavigationDrawer] = useRecoilState(
-    navigationDrawerState,
+  const [isNavigationDrawerOpen, setIsNavigationDrawerOpen] = useRecoilState(
+    isNavigationDrawerOpenState,
   );
+  const [currentMobileNavigationDrawer, setCurrentMobileNavigationDrawer] =
+    useRecoilState(currentMobileNavigationDrawerState);
 
-  const initialActiveItemName: NavigationBarItemName = isCommandMenuOpened
+  const activeItemName = isNavigationDrawerOpen
+    ? currentMobileNavigationDrawer
+    : isCommandMenuOpened
     ? 'search'
     : isTasksPage
     ? 'tasks'
@@ -46,14 +51,17 @@ export const MobileNavigationBar = () => {
       Icon: IconList,
       onClick: () => {
         closeCommandMenu();
-        setNavigationDrawer(navigationDrawer === 'main' ? '' : 'main');
+        setIsNavigationDrawerOpen(
+          (previousIsOpen) => activeItemName !== 'main' || !previousIsOpen,
+        );
+        setCurrentMobileNavigationDrawer('main');
       },
     },
     {
       name: 'search',
       Icon: IconSearch,
       onClick: () => {
-        setNavigationDrawer('');
+        setIsNavigationDrawerOpen(false);
         toggleCommandMenu();
       },
     },
@@ -62,7 +70,7 @@ export const MobileNavigationBar = () => {
       Icon: IconCheckbox,
       onClick: () => {
         closeCommandMenu();
-        setNavigationDrawer('');
+        setIsNavigationDrawerOpen(false);
         navigate('/tasks');
       },
     },
@@ -71,15 +79,13 @@ export const MobileNavigationBar = () => {
       Icon: IconSettings,
       onClick: () => {
         closeCommandMenu();
-        setNavigationDrawer(navigationDrawer === 'settings' ? '' : 'settings');
+        setIsNavigationDrawerOpen(
+          (previousIsOpen) => activeItemName !== 'settings' || !previousIsOpen,
+        );
+        setCurrentMobileNavigationDrawer('settings');
       },
     },
   ];
 
-  return (
-    <NavigationBar
-      activeItemName={navigationDrawer || initialActiveItemName}
-      items={items}
-    />
-  );
+  return <NavigationBar activeItemName={activeItemName} items={items} />;
 };
diff --git a/front/src/modules/navigation/components/MobileNavigationDrawer.tsx b/front/src/modules/navigation/components/MobileNavigationDrawer.tsx
deleted file mode 100644
index eb3264237..000000000
--- a/front/src/modules/navigation/components/MobileNavigationDrawer.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useRecoilState } from 'recoil';
-
-import { Favorites } from '@/favorites/components/Favorites';
-import { SettingsNavbar } from '@/settings/components/SettingsNavbar';
-import MainNavbar from '@/ui/navigation/navigation-drawer/components/MainNavbar';
-import { navigationDrawerState } from '@/ui/navigation/states/navigationDrawerState';
-
-import { WorkspaceNavItems } from './WorkspaceNavItems';
-
-export const MobileNavigationDrawer = () => {
-  const [navigationDrawer] = useRecoilState(navigationDrawerState);
-
-  return navigationDrawer === 'settings' ? (
-    <SettingsNavbar />
-  ) : (
-    <MainNavbar>
-      <Favorites />
-      <WorkspaceNavItems />
-    </MainNavbar>
-  );
-};
diff --git a/front/src/modules/navigation/components/WorkspaceNavItems.tsx b/front/src/modules/navigation/components/WorkspaceNavItems.tsx
deleted file mode 100644
index 4e8913588..000000000
--- a/front/src/modules/navigation/components/WorkspaceNavItems.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useLocation } from 'react-router-dom';
-
-import { ObjectMetadataNavItems } from '@/object-metadata/components/ObjectMetadataNavItems';
-import { IconTargetArrow } from '@/ui/display/icon/index';
-import NavItem from '@/ui/navigation/navigation-drawer/components/NavItem';
-import NavTitle from '@/ui/navigation/navigation-drawer/components/NavTitle';
-
-export const WorkspaceNavItems = () => {
-  const { pathname } = useLocation();
-
-  return (
-    <>
-      <NavTitle label="Workspace" />
-      <ObjectMetadataNavItems />
-      <NavItem
-        label="Opportunities"
-        to="/objects/opportunities"
-        active={pathname === '/objects/opportunities'}
-        Icon={IconTargetArrow}
-      />
-    </>
-  );
-};
diff --git a/front/src/modules/navigation/components/__stories__/AppNavigationDrawer.stories.tsx b/front/src/modules/navigation/components/__stories__/AppNavigationDrawer.stories.tsx
new file mode 100644
index 000000000..e267c7e24
--- /dev/null
+++ b/front/src/modules/navigation/components/__stories__/AppNavigationDrawer.stories.tsx
@@ -0,0 +1,77 @@
+import { useEffect } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { Meta, StoryObj } from '@storybook/react';
+import { useSetRecoilState } from 'recoil';
+
+import { currentMobileNavigationDrawerState } from '@/navigation/states/currentMobileNavigationDrawerState';
+import { AppPath } from '@/types/AppPath';
+import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+
+import {
+  AppNavigationDrawer,
+  AppNavigationDrawerProps,
+} from '../AppNavigationDrawer';
+
+const MobileNavigationDrawerStateSetterEffect = ({
+  mobileNavigationDrawer = 'main',
+}: {
+  mobileNavigationDrawer?: 'main' | 'settings';
+}) => {
+  const isMobile = useIsMobile();
+  const setIsNavigationDrawerOpen = useSetRecoilState(
+    isNavigationDrawerOpenState,
+  );
+  const setCurrentMobileNavigationDrawer = useSetRecoilState(
+    currentMobileNavigationDrawerState,
+  );
+
+  useEffect(() => {
+    if (!isMobile) return;
+
+    setIsNavigationDrawerOpen(true);
+    setCurrentMobileNavigationDrawer(mobileNavigationDrawer);
+  }, [
+    isMobile,
+    mobileNavigationDrawer,
+    setCurrentMobileNavigationDrawer,
+    setIsNavigationDrawerOpen,
+  ]);
+
+  return null;
+};
+
+type StoryArgs = AppNavigationDrawerProps & {
+  mobileNavigationDrawer?: 'main' | 'settings';
+  routePath: string;
+};
+
+const meta: Meta<StoryArgs> = {
+  title: 'Modules/Navigation/AppNavigationDrawer',
+  decorators: [
+    (Story, { args }) => (
+      <MemoryRouter initialEntries={[args.routePath]}>
+        <Story />
+        <MobileNavigationDrawerStateSetterEffect
+          mobileNavigationDrawer={args.mobileNavigationDrawer}
+        />
+      </MemoryRouter>
+    ),
+    SnackBarDecorator,
+  ],
+  component: AppNavigationDrawer,
+  args: { routePath: AppPath.Index },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+export const Main: Story = {};
+
+export const Settings: Story = {
+  args: {
+    mobileNavigationDrawer: 'settings',
+    routePath: '/settings/appearance',
+  },
+};
diff --git a/front/src/modules/navigation/components/__stories__/DesktopNavigationDrawer.stories.tsx b/front/src/modules/navigation/components/__stories__/DesktopNavigationDrawer.stories.tsx
deleted file mode 100644
index f56cea7a6..000000000
--- a/front/src/modules/navigation/components/__stories__/DesktopNavigationDrawer.stories.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
-
-import { DesktopNavigationDrawer } from '../DesktopNavigationDrawer';
-import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
-import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
-
-const meta: Meta<typeof DesktopNavigationDrawer> = {
-  title: 'Modules/Navigation/DesktopNavigationDrawer',
-  component: DesktopNavigationDrawer,
-};
-
-export default meta;
-type Story = StoryObj<typeof DesktopNavigationDrawer>;
-
-export const Default: Story = {
-  decorators: [
-    ComponentDecorator,
-    ComponentWithRouterDecorator,
-    SnackBarDecorator,
-  ],
-};
diff --git a/front/src/modules/navigation/components/__stories__/MobileNavigationDrawer.stories.tsx b/front/src/modules/navigation/components/__stories__/MobileNavigationDrawer.stories.tsx
deleted file mode 100644
index dea61479b..000000000
--- a/front/src/modules/navigation/components/__stories__/MobileNavigationDrawer.stories.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
-
-import { MobileNavigationDrawer } from '../MobileNavigationDrawer';
-import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
-import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
-
-const meta: Meta<typeof MobileNavigationDrawer> = {
-  title: 'Modules/Navigation/MobileNavigationDrawer',
-  component: MobileNavigationDrawer,
-};
-
-export default meta;
-type Story = StoryObj<typeof MobileNavigationDrawer>;
-
-export const Default: Story = {
-  decorators: [
-    ComponentDecorator,
-    ComponentWithRouterDecorator,
-    SnackBarDecorator,
-  ],
-};
diff --git a/front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts b/front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts
new file mode 100644
index 000000000..acd302d44
--- /dev/null
+++ b/front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const currentMobileNavigationDrawerState = atom<'main' | 'settings'>({
+  key: 'currentMobileNavigationDrawerState',
+  default: 'main',
+});
diff --git a/front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx b/front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
index 99d3382e1..b6663117a 100644
--- a/front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
+++ b/front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
@@ -3,7 +3,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
 import { Icon123 } from '@/ui/input/constants/icons';
 import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
-import NavItem from '@/ui/navigation/navigation-drawer/components/NavItem';
+import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 
 export const ObjectMetadataNavItems = () => {
   const { activeObjectMetadataItems } = useObjectMetadataItemForSettings();
@@ -13,10 +13,9 @@ export const ObjectMetadataNavItems = () => {
 
   return (
     <>
-      {activeObjectMetadataItems.map((objectMetadataItem) => {
-        if (objectMetadataItem.nameSingular === 'opportunity') return null;
-        return (
-          <NavItem
+      {activeObjectMetadataItems.map((objectMetadataItem) =>
+        objectMetadataItem.nameSingular === 'opportunity' ? null : (
+          <NavigationDrawerItem
             key={objectMetadataItem.id}
             label={objectMetadataItem.labelPlural}
             to={`/objects/${objectMetadataItem.namePlural}`}
@@ -28,8 +27,8 @@ export const ObjectMetadataNavItems = () => {
               navigate(`/objects/${objectMetadataItem.namePlural}`);
             }}
           />
-        );
-      })}
+        ),
+      )}
     </>
   );
 };
diff --git a/front/src/modules/settings/components/SettingsNavbar.tsx b/front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
similarity index 76%
rename from front/src/modules/settings/components/SettingsNavbar.tsx
rename to front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
index afb2aa1af..cc8d8c433 100644
--- a/front/src/modules/settings/components/SettingsNavbar.tsx
+++ b/front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
@@ -13,14 +13,12 @@ import {
   IconUserCircle,
   IconUsers,
 } from '@/ui/display/icon';
-import NavItem from '@/ui/navigation/navigation-drawer/components/NavItem';
-import NavTitle from '@/ui/navigation/navigation-drawer/components/NavTitle';
-import SubMenuNavbar from '@/ui/navigation/navigation-drawer/components/SubMenuNavbar';
+import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
+import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 
-export const SettingsNavbar = () => {
+export const SettingsNavigationDrawerItems = () => {
   const navigate = useNavigate();
-
   const { signOut } = useAuth();
 
   const handleLogout = useCallback(() => {
@@ -35,9 +33,9 @@ export const SettingsNavbar = () => {
   });
 
   return (
-    <SubMenuNavbar backButtonTitle="Settings" displayVersion={true}>
-      <NavTitle label="User" />
-      <NavItem
+    <>
+      <NavigationDrawerSectionTitle label="User" />
+      <NavigationDrawerItem
         label="Profile"
         to="/settings/profile"
         Icon={IconUserCircle}
@@ -48,7 +46,7 @@ export const SettingsNavbar = () => {
           })
         }
       />
-      <NavItem
+      <NavigationDrawerItem
         label="Appearance"
         to="/settings/profile/appearance"
         Icon={IconColorSwatch}
@@ -59,9 +57,8 @@ export const SettingsNavbar = () => {
           })
         }
       />
-
       {isMessagingEnabled && (
-        <NavItem
+        <NavigationDrawerItem
           label="Accounts"
           to="/settings/accounts"
           Icon={IconAt}
@@ -69,8 +66,8 @@ export const SettingsNavbar = () => {
         />
       )}
 
-      <NavTitle label="Workspace" />
-      <NavItem
+      <NavigationDrawerSectionTitle label="Workspace" />
+      <NavigationDrawerItem
         label="General"
         to="/settings/workspace"
         Icon={IconSettings}
@@ -81,7 +78,7 @@ export const SettingsNavbar = () => {
           })
         }
       />
-      <NavItem
+      <NavigationDrawerItem
         label="Members"
         to="/settings/workspace-members"
         Icon={IconUsers}
@@ -92,7 +89,7 @@ export const SettingsNavbar = () => {
           })
         }
       />
-      <NavItem
+      <NavigationDrawerItem
         label="Data model"
         to="/settings/objects"
         Icon={IconHierarchy2}
@@ -103,7 +100,7 @@ export const SettingsNavbar = () => {
           })
         }
       />
-      <NavItem
+      <NavigationDrawerItem
         label="Developers"
         to="/settings/developers/api-keys"
         Icon={IconRobot}
@@ -115,8 +112,12 @@ export const SettingsNavbar = () => {
         }
       />
 
-      <NavTitle label="Other" />
-      <NavItem label="Logout" onClick={handleLogout} Icon={IconLogout} />
-    </SubMenuNavbar>
+      <NavigationDrawerSectionTitle label="Other" />
+      <NavigationDrawerItem
+        label="Logout"
+        onClick={handleLogout}
+        Icon={IconLogout}
+      />
+    </>
   );
 };
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/SupportChat.tsx b/front/src/modules/support/components/SupportChat.tsx
similarity index 96%
rename from front/src/modules/ui/navigation/navigation-drawer/components/SupportChat.tsx
rename to front/src/modules/support/components/SupportChat.tsx
index eaf966ffa..a9993ab11 100644
--- a/front/src/modules/ui/navigation/navigation-drawer/components/SupportChat.tsx
+++ b/front/src/modules/support/components/SupportChat.tsx
@@ -30,7 +30,7 @@ const insertScript = ({
   document.body.appendChild(script);
 };
 
-const SupportChat = () => {
+export const SupportChat = () => {
   const currentUser = useRecoilValue(currentUserState);
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const supportChat = useRecoilValue(supportChatState);
@@ -93,8 +93,8 @@ const SupportChat = () => {
   return isFrontChatLoaded ? (
     <StyledButtonContainer>
       <Button
-        variant={'tertiary'}
-        size={'small'}
+        variant="tertiary"
+        size="small"
         title="Support"
         Icon={IconHelpCircle}
         onClick={() => window.FrontChat?.('show')}
@@ -102,5 +102,3 @@ const SupportChat = () => {
     </StyledButtonContainer>
   ) : null;
 };
-
-export default SupportChat;
diff --git a/front/src/modules/ui/layout/page/DefaultLayout.tsx b/front/src/modules/ui/layout/page/DefaultLayout.tsx
index b2c4302b2..9c5c51a8a 100644
--- a/front/src/modules/ui/layout/page/DefaultLayout.tsx
+++ b/front/src/modules/ui/layout/page/DefaultLayout.tsx
@@ -8,11 +8,9 @@ import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { CommandMenu } from '@/command-menu/components/CommandMenu';
 import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
 import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/KeyboardShortcutMenu';
-import { DesktopNavigationDrawer } from '@/navigation/components/DesktopNavigationDrawer';
+import { AppNavigationDrawer } from '@/navigation/components/AppNavigationDrawer';
 import { MobileNavigationBar } from '@/navigation/components/MobileNavigationBar';
-import { MobileNavigationDrawer } from '@/navigation/components/MobileNavigationDrawer';
 import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
-import { NavbarAnimatedContainer } from '@/ui/navigation/navigation-drawer/components/NavbarAnimatedContainer';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 const StyledLayout = styled.div`
@@ -42,15 +40,18 @@ const StyledLayout = styled.div`
 
 const StyledPageContainer = styled.div`
   display: flex;
-  flex: 1;
+  flex: 1 1 auto;
   flex-direction: row;
-  height: 100vh;
+  min-height: 0;
+`;
+
+const StyledAppNavigationDrawer = styled(AppNavigationDrawer)`
+  flex-shrink: 0;
 `;
 
 const StyledMainContainer = styled.div`
   display: flex;
   flex: 0 1 100%;
-  flex-direction: row;
   overflow: hidden;
 `;
 
@@ -61,14 +62,13 @@ type DefaultLayoutProps = {
 export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
   const onboardingStatus = useOnboardingStatus();
   const isMobile = useIsMobile();
+
   return (
     <StyledLayout>
       <CommandMenu />
       <KeyboardShortcutMenu />
       <StyledPageContainer>
-        <NavbarAnimatedContainer>
-          {isMobile ? <MobileNavigationDrawer /> : <DesktopNavigationDrawer />}
-        </NavbarAnimatedContainer>
+        <StyledAppNavigationDrawer />
         <StyledMainContainer>
           {onboardingStatus &&
           onboardingStatus !== OnboardingStatus.Completed ? (
diff --git a/front/src/modules/ui/layout/page/PageHeader.tsx b/front/src/modules/ui/layout/page/PageHeader.tsx
index 489ef07a4..54b5042fc 100644
--- a/front/src/modules/ui/layout/page/PageHeader.tsx
+++ b/front/src/modules/ui/layout/page/PageHeader.tsx
@@ -8,8 +8,8 @@ import { IconChevronLeft } from '@/ui/display/icon/index';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
 import { IconButton } from '@/ui/input/button/components/IconButton';
-import NavCollapseButton from '@/ui/navigation/navigation-drawer/components/NavCollapseButton';
-import { navigationDrawerState } from '@/ui/navigation/states/navigationDrawerState';
+import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
+import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
 import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
@@ -91,14 +91,14 @@ export const PageHeader = ({
   const isMobile = useIsMobile();
   const navigate = useNavigate();
   const theme = useTheme();
-  const navigationDrawer = useRecoilValue(navigationDrawerState);
+  const isNavigationDrawerOpen = useRecoilValue(isNavigationDrawerOpenState);
 
   return (
     <StyledTopBarContainer>
       <StyledLeftContainer>
-        {navigationDrawer === '' && (
+        {!isMobile && !isNavigationDrawerOpen && (
           <StyledTopBarButtonContainer>
-            <NavCollapseButton direction="right" />
+            <NavigationDrawerCollapseButton direction="right" />
           </StyledTopBarButtonContainer>
         )}
         {hasBackButton && (
diff --git a/front/src/modules/ui/layout/page/RightDrawerContainer.tsx b/front/src/modules/ui/layout/page/RightDrawerContainer.tsx
index 51cf2fa7c..a30a5414c 100644
--- a/front/src/modules/ui/layout/page/RightDrawerContainer.tsx
+++ b/front/src/modules/ui/layout/page/RightDrawerContainer.tsx
@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 
-import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/PageHeader';
 import { RightDrawer } from '@/ui/layout/right-drawer/components/RightDrawer';
 import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 
@@ -15,12 +14,11 @@ const StyledMainContainer = styled.div`
   background: ${({ theme }) => theme.background.noisy};
   box-sizing: border-box;
   display: flex;
+  flex: 1 1 auto;
   flex-direction: row;
   gap: ${({ theme }) => theme.spacing(2)};
-  height: calc(
-    100% - ${({ theme }) => theme.spacing(5)} - ${PAGE_BAR_MIN_HEIGHT}px
-  );
-  padding-bottom: ${({ theme }) => theme.spacing(3)};
+  min-height: 0;
+  padding-bottom: ${({ theme }) => theme.spacing(4)};
   padding-right: ${({ theme }) => theme.spacing(3)};
   width: 100%;
 
diff --git a/front/src/modules/ui/navigation/link/components/GithubVersionLink.tsx b/front/src/modules/ui/navigation/link/components/GithubVersionLink.tsx
new file mode 100644
index 000000000..d7f6e96a5
--- /dev/null
+++ b/front/src/modules/ui/navigation/link/components/GithubVersionLink.tsx
@@ -0,0 +1,33 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconBrandGithub } from '@/ui/display/icon';
+
+import packageJson from '../../../../../../package.json';
+import { githubLink } from '../constants';
+
+const StyledVersionLink = styled.a`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.light};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  gap: ${({ theme }) => theme.spacing(1)};
+  padding: 0 ${({ theme }) => theme.spacing(1)};
+  text-decoration: none;
+
+  :hover {
+    color: ${({ theme }) => theme.font.color.tertiary};
+  }
+`;
+
+export const GithubVersionLink = () => {
+  const theme = useTheme();
+
+  return (
+    <StyledVersionLink href={githubLink} target="_blank" rel="noreferrer">
+      <IconBrandGithub size={theme.icon.size.md} />
+      {packageJson.version}
+    </StyledVersionLink>
+  );
+};
diff --git a/front/src/modules/ui/navigation/link/components/__stories__/GithubVersionLink.stories.tsx b/front/src/modules/ui/navigation/link/components/__stories__/GithubVersionLink.stories.tsx
new file mode 100644
index 000000000..e21fe6324
--- /dev/null
+++ b/front/src/modules/ui/navigation/link/components/__stories__/GithubVersionLink.stories.tsx
@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import { GithubVersionLink } from '../GithubVersionLink';
+
+const meta: Meta<typeof GithubVersionLink> = {
+  title: 'UI/Navigation/Link/GithubVersionLink',
+  component: GithubVersionLink,
+  decorators: [ComponentWithRouterDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof GithubVersionLink>;
+
+export const Default: Story = {};
diff --git a/front/src/modules/ui/navigation/link/constants/index.ts b/front/src/modules/ui/navigation/link/constants/index.ts
new file mode 100644
index 000000000..48feee776
--- /dev/null
+++ b/front/src/modules/ui/navigation/link/constants/index.ts
@@ -0,0 +1 @@
+export const githubLink = 'https://github.com/twentyhq/twenty';
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/MainNavbar.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/MainNavbar.tsx
deleted file mode 100644
index 0a55b22db..000000000
--- a/front/src/modules/ui/navigation/navigation-drawer/components/MainNavbar.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useState } from 'react';
-import styled from '@emotion/styled';
-
-import NavItemsContainer from './NavItemsContainer';
-import NavWorkspaceButton from './NavWorkspaceButton';
-import SupportChat from './SupportChat';
-
-type MainNavbarProps = {
-  children: React.ReactNode;
-};
-
-const StyledContainer = styled.div`
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: space-between;
-  margin-bottom: ${({ theme }) => theme.spacing(2.5)};
-  padding: ${({ theme }) => theme.spacing(2)};
-  width: 100%;
-`;
-
-const MainNavbar = ({ children }: MainNavbarProps) => {
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handleHover = () => {
-    setIsHovered(true);
-  };
-
-  const handleMouseLeave = () => {
-    setIsHovered(false);
-  };
-
-  return (
-    <StyledContainer>
-      <div onMouseEnter={handleHover} onMouseLeave={handleMouseLeave}>
-        <NavWorkspaceButton showCollapseButton={isHovered} />
-        <NavItemsContainer>{children}</NavItemsContainer>
-      </div>
-      <SupportChat />
-    </StyledContainer>
-  );
-};
-
-export default MainNavbar;
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/NavCollapseButton.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/NavCollapseButton.tsx
deleted file mode 100644
index 94e2bead5..000000000
--- a/front/src/modules/ui/navigation/navigation-drawer/components/NavCollapseButton.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { motion } from 'framer-motion';
-import { useSetRecoilState } from 'recoil';
-
-import {
-  IconLayoutSidebarLeftCollapse,
-  IconLayoutSidebarRightCollapse,
-} from '@/ui/display/icon';
-import { IconButton } from '@/ui/input/button/components/IconButton';
-import { navigationDrawerState } from '@/ui/navigation/states/navigationDrawerState';
-
-const StyledCollapseButton = styled(motion.div)`
-  align-items: center;
-  background: inherit;
-  border: 0;
-  &:hover {
-    background: ${({ theme }) => theme.background.quaternary};
-  }
-  border-radius: ${({ theme }) => theme.border.radius.md};
-
-  color: ${({ theme }) => theme.font.color.light};
-  cursor: pointer;
-
-  display: flex;
-  height: 24px;
-  justify-content: center;
-
-  padding: 0;
-
-  user-select: none;
-  width: 24px;
-`;
-
-type NavCollapseButtonProps = {
-  direction?: 'left' | 'right';
-  show?: boolean;
-};
-
-const NavCollapseButton = ({
-  direction = 'left',
-  show = true,
-}: NavCollapseButtonProps) => {
-  const setNavigationDrawer = useSetRecoilState(navigationDrawerState);
-
-  const iconSize = 'small';
-  const theme = useTheme();
-
-  return (
-    <>
-      <StyledCollapseButton
-        initial={false}
-        animate={{
-          opacity: show ? 1 : 0,
-        }}
-        transition={{
-          duration: theme.animation.duration.normal,
-        }}
-        onClick={() =>
-          setNavigationDrawer((navigationDrawer) =>
-            navigationDrawer === '' ? 'main' : '',
-          )
-        }
-      >
-        <IconButton
-          Icon={
-            direction === 'left'
-              ? IconLayoutSidebarLeftCollapse
-              : IconLayoutSidebarRightCollapse
-          }
-          variant="tertiary"
-          size={iconSize}
-        />
-      </StyledCollapseButton>
-    </>
-  );
-};
-
-export default NavCollapseButton;
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/NavItemsContainer.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/NavItemsContainer.tsx
deleted file mode 100644
index 7df27c250..000000000
--- a/front/src/modules/ui/navigation/navigation-drawer/components/NavItemsContainer.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled from '@emotion/styled';
-
-type NavItemsContainerProps = {
-  children: React.ReactNode;
-};
-
-const StyledNavItemsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: 40px;
-`;
-
-const NavItemsContainer = ({ children }: NavItemsContainerProps) => (
-  <StyledNavItemsContainer>{children}</StyledNavItemsContainer>
-);
-
-export default NavItemsContainer;
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/NavWorkspaceButton.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/NavWorkspaceButton.tsx
deleted file mode 100644
index 3c3f9cc5c..000000000
--- a/front/src/modules/ui/navigation/navigation-drawer/components/NavWorkspaceButton.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
-
-import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
-
-import NavCollapseButton from './NavCollapseButton';
-
-const StyledContainer = styled.div`
-  align-items: center;
-  align-self: flex-start;
-  background: inherit;
-  border: 0;
-  display: flex;
-  height: 34px;
-  justify-content: space-between;
-  padding: ${({ theme }) => theme.spacing(1)};
-  padding-bottom: ${({ theme }) => theme.spacing(2)};
-  user-select: none;
-`;
-
-const StyledLogoAndNameContainer = styled.div`
-  align-items: center;
-  display: flex;
-`;
-
-type StyledLogoProps = {
-  logo?: string | null;
-};
-
-const StyledLogo = styled.div<StyledLogoProps>`
-  background: url(${(props) => props.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};
-  margin-left: ${({ theme }) => theme.spacing(2)};
-`;
-
-type NavWorkspaceButtonProps = {
-  showCollapseButton: boolean;
-};
-
-const NavWorkspaceButton = ({
-  showCollapseButton,
-}: NavWorkspaceButtonProps) => {
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
-  const isMobile = useIsMobile();
-  const DEFAULT_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=';
-
-  return (
-    <StyledContainer>
-      <StyledLogoAndNameContainer>
-        <StyledLogo
-          logo={
-            currentWorkspace?.logo
-              ? getImageAbsoluteURIOrBase64(currentWorkspace.logo)
-              : DEFAULT_LOGO
-          }
-        ></StyledLogo>
-        <StyledName>{currentWorkspace?.displayName ?? 'Twenty'}</StyledName>
-      </StyledLogoAndNameContainer>
-      {!isMobile && (
-        <NavCollapseButton direction="left" show={showCollapseButton} />
-      )}
-    </StyledContainer>
-  );
-};
-
-export default NavWorkspaceButton;
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/NavbarAnimatedContainer.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/NavbarAnimatedContainer.tsx
deleted file mode 100644
index 52ebb3a54..000000000
--- a/front/src/modules/ui/navigation/navigation-drawer/components/NavbarAnimatedContainer.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { ReactNode } from 'react';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { motion } from 'framer-motion';
-import { useRecoilValue } from 'recoil';
-
-import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
-import { navigationDrawerState } from '@/ui/navigation/states/navigationDrawerState';
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-
-import { desktopNavDrawerWidths } from '../constants';
-
-const StyledNavbarContainer = styled(motion.div)`
-  align-items: end;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  overflow: hidden;
-`;
-
-type NavbarAnimatedContainerProps = {
-  children: ReactNode;
-};
-
-export const NavbarAnimatedContainer = ({
-  children,
-}: NavbarAnimatedContainerProps) => {
-  const navigationDrawer = useRecoilValue(navigationDrawerState);
-
-  const isInSubMenu = useIsSettingsPage();
-  const theme = useTheme();
-  const isMobile = useIsMobile();
-
-  const desktopWidth =
-    navigationDrawer === ''
-      ? 12
-      : isInSubMenu
-      ? desktopNavDrawerWidths.submenu
-      : desktopNavDrawerWidths.menu;
-
-  return (
-    <StyledNavbarContainer
-      initial={false}
-      animate={{
-        width: !isMobile ? desktopWidth : navigationDrawer ? '100%' : 0,
-        opacity: navigationDrawer === '' ? 0 : 1,
-      }}
-      transition={{
-        duration: theme.animation.duration.normal,
-      }}
-    >
-      {children}
-    </StyledNavbarContainer>
-  );
-};
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
new file mode 100644
index 000000000..4a6fc6667
--- /dev/null
+++ b/front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
@@ -0,0 +1,118 @@
+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(10)};
+  height: 100%;
+  min-width: ${desktopNavDrawerWidths.menu};
+  padding: ${({ theme }) => theme.spacing(2)};
+  padding-bottom: ${({ theme }) => theme.spacing(4)};
+
+  ${({ isSubMenu, theme }) =>
+    isSubMenu
+      ? css`
+          padding-top: ${theme.spacing(11)};
+        `
+      : ''}
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    width: 100%;
+  }
+`;
+
+const StyledItemsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  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>
+  );
+};
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/NavBackButton.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
similarity index 90%
rename from front/src/modules/ui/navigation/navigation-drawer/components/NavBackButton.tsx
rename to front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
index 6609b80ca..dd2db01f1 100644
--- a/front/src/modules/ui/navigation/navigation-drawer/components/NavBackButton.tsx
+++ b/front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
@@ -5,7 +5,7 @@ import { useRecoilValue } from 'recoil';
 import { IconChevronLeft } from '@/ui/display/icon/index';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 
-type NavBackButtonProps = {
+type NavigationDrawerBackButtonProps = {
   title: string;
 };
 
@@ -30,7 +30,9 @@ const StyledContainer = styled.div`
   justify-content: space-between;
 `;
 
-const NavBackButton = ({ title }: NavBackButtonProps) => {
+export const NavigationDrawerBackButton = ({
+  title,
+}: NavigationDrawerBackButtonProps) => {
   const navigate = useNavigate();
   const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState);
 
@@ -47,5 +49,3 @@ const NavBackButton = ({ title }: NavBackButtonProps) => {
     </StyledContainer>
   );
 };
-
-export default NavBackButton;
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx
new file mode 100644
index 000000000..2f82eb4c8
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
new file mode 100644
index 000000000..61cd25cec
--- /dev/null
+++ b/front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
@@ -0,0 +1,66 @@
+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: 34px;
+  padding: ${({ theme }) => theme.spacing(1)};
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+  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>
+  );
+};
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/NavItem.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
similarity index 91%
rename from front/src/modules/ui/navigation/navigation-drawer/components/NavItem.tsx
rename to front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
index cb120e1aa..7c2981e43 100644
--- a/front/src/modules/ui/navigation/navigation-drawer/components/NavItem.tsx
+++ b/front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
@@ -4,11 +4,11 @@ import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-import { navigationDrawerState } from '@/ui/navigation/states/navigationDrawerState';
+import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
 import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
-type NavItemProps = {
+type NavigationDrawerItemProps = {
   className?: string;
   label: string;
   to?: string;
@@ -49,20 +49,24 @@ const StyledItem = styled.div<StyledItemProps>`
   display: flex;
   font-family: 'Inter';
   font-size: ${({ theme }) => theme.font.size.md};
+  gap: ${({ theme }) => theme.spacing(2)};
   margin-bottom: calc(${({ theme }) => theme.spacing(1)} / 2);
   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) {
@@ -72,7 +76,6 @@ const StyledItem = styled.div<StyledItemProps>`
 
 const StyledItemLabel = styled.div`
   display: flex;
-  margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledSoonPill = styled.div`
@@ -114,7 +117,7 @@ const StyledKeyBoardShortcut = styled.div`
   visibility: hidden;
 `;
 
-const NavItem = ({
+export const NavigationDrawerItem = ({
   className,
   label,
   Icon,
@@ -125,15 +128,17 @@ const NavItem = ({
   soon,
   count,
   keyboard,
-}: NavItemProps) => {
+}: NavigationDrawerItemProps) => {
   const theme = useTheme();
   const isMobile = useIsMobile();
   const navigate = useNavigate();
-  const setNavigationDrawer = useSetRecoilState(navigationDrawerState);
+  const setIsNavigationDrawerOpen = useSetRecoilState(
+    isNavigationDrawerOpenState,
+  );
 
   const handleItemClick = () => {
     if (isMobile) {
-      setNavigationDrawer('');
+      setIsNavigationDrawerOpen(false);
     }
 
     if (onClick) {
@@ -165,5 +170,3 @@ const NavItem = ({
     </StyledItem>
   );
 };
-
-export default NavItem;
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/NavTitle.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx
similarity index 72%
rename from front/src/modules/ui/navigation/navigation-drawer/components/NavTitle.tsx
rename to front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx
index 723204efb..c80b8eacb 100644
--- a/front/src/modules/ui/navigation/navigation-drawer/components/NavTitle.tsx
+++ b/front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-type NavTitleProps = {
+type NavigationDrawerSectionTitleProps = {
   label: string;
 };
 
@@ -15,8 +15,6 @@ const StyledTitle = styled.div`
   text-transform: uppercase;
 `;
 
-const NavTitle = ({ label }: NavTitleProps) => (
-  <StyledTitle>{label}</StyledTitle>
-);
-
-export default NavTitle;
+export const NavigationDrawerSectionTitle = ({
+  label,
+}: NavigationDrawerSectionTitleProps) => <StyledTitle>{label}</StyledTitle>;
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/SubMenuNavbar.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/SubMenuNavbar.tsx
deleted file mode 100644
index 0868fa9a6..000000000
--- a/front/src/modules/ui/navigation/navigation-drawer/components/SubMenuNavbar.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { ReactNode } from 'react';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-
-import { IconBrandGithub } from '@/ui/display/icon';
-import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-
-import packageJson from '../../../../../../package.json';
-import { desktopNavDrawerWidths, githubLink } from '../constants';
-
-import NavBackButton from './NavBackButton';
-import NavItemsContainer from './NavItemsContainer';
-
-type SubMenuNavbarProps = {
-  children: ReactNode;
-  backButtonTitle: string;
-  displayVersion?: boolean;
-};
-
-const StyledVersionContainer = styled.div`
-  font-size: ${({ theme }) => theme.font.size.sm};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
-  padding-left: ${({ theme }) => theme.spacing(1)};
-`;
-
-const StyledVersion = styled.span`
-  color: ${({ theme }) => theme.font.color.light};
-  padding-left: ${({ theme }) => theme.spacing(1)};
-
-  :hover {
-    color: ${({ theme }) => theme.font.color.tertiary};
-  }
-`;
-
-const StyledVersionLink = styled.a`
-  align-items: center;
-  color: ${({ theme }) => theme.font.color.light};
-  display: flex;
-  text-decoration: none;
-
-  :hover {
-    color: ${({ theme }) => theme.font.color.tertiary};
-  }
-`;
-
-const StyledContainer = styled.div`
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: space-between;
-  padding: ${({ theme }) => theme.spacing(2)};
-  padding-top: ${({ theme }) => theme.spacing(11)};
-  width: ${desktopNavDrawerWidths.menu};
-
-  @media (max-width: ${MOBILE_VIEWPORT}px) {
-    width: 100%;
-  }
-`;
-
-const SubMenuNavbar = ({
-  children,
-  backButtonTitle,
-  displayVersion,
-}: SubMenuNavbarProps) => {
-  const version = packageJson.version;
-  const isMobile = useIsMobile();
-
-  const theme = useTheme();
-
-  return (
-    <StyledContainer>
-      <div>
-        {!isMobile && <NavBackButton title={backButtonTitle} />}
-        <NavItemsContainer>{children}</NavItemsContainer>
-      </div>
-      {displayVersion && (
-        <StyledVersionContainer>
-          <StyledVersionLink href={githubLink} target="_blank" rel="noreferrer">
-            <IconBrandGithub size={theme.icon.size.md} />
-            <StyledVersion>{version}</StyledVersion>
-          </StyledVersionLink>
-        </StyledVersionContainer>
-      )}
-    </StyledContainer>
-  );
-};
-
-export default SubMenuNavbar;
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/MainNavbar.stories.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/MainNavbar.stories.tsx
deleted file mode 100644
index 07390c9fe..000000000
--- a/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/MainNavbar.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Favorites } from '@/favorites/components/Favorites';
-import {
-  IconBell,
-  IconBuildingSkyscraper,
-  IconCheckbox,
-  IconSearch,
-  IconSettings,
-  IconTargetArrow,
-  IconUser,
-} from '@/ui/display/icon';
-import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
-import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
-
-import MainNavbar from '../MainNavbar';
-import NavItem from '../NavItem';
-import NavTitle from '../NavTitle';
-
-const meta: Meta<typeof MainNavbar> = {
-  title: 'UI/Navigation/NavigationDrawer/MainNavbar',
-  component: MainNavbar,
-  decorators: [SnackBarDecorator],
-};
-
-export default meta;
-type Story = StoryObj<typeof MainNavbar>;
-
-const navItems = (
-  <>
-    <NavItem label="Search" Icon={IconSearch} />
-    <NavItem label="Notifications" to="/inbox" Icon={IconBell} soon={true} />
-    <NavItem label="Settings" to="/settings/profile" Icon={IconSettings} />
-    <NavItem label="Tasks" to="/tasks" Icon={IconCheckbox} count={2} />
-    <Favorites />
-    <NavTitle label="Workspace" />
-    <NavItem label="Companies" to="/companies" Icon={IconBuildingSkyscraper} />
-    <NavItem label="People" to="/people" Icon={IconUser} />
-    <NavItem label="Opportunities" Icon={IconTargetArrow} />
-  </>
-);
-
-export const Default: Story = {
-  args: { children: navItems },
-  argTypes: { children: { control: false } },
-  decorators: [ComponentWithRouterDecorator],
-};
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavCollapseButton.stories.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavCollapseButton.stories.tsx
deleted file mode 100644
index cab355aca..000000000
--- a/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavCollapseButton.stories.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
-
-import NavCollapseButton from '../NavCollapseButton';
-
-const meta: Meta<typeof NavCollapseButton> = {
-  title: 'UI/Navigation/NavigationDrawer/NavCollapseButton',
-  component: NavCollapseButton,
-};
-
-export default meta;
-type Story = StoryObj<typeof NavCollapseButton>;
-
-export const Default: Story = {
-  decorators: [ComponentDecorator],
-};
-
-export const Hidden: Story = {
-  args: { show: false },
-  decorators: [ComponentDecorator],
-};
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavItem.stories.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavItem.stories.tsx
deleted file mode 100644
index 597e68289..000000000
--- a/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavItem.stories.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import styled from '@emotion/styled';
-import { Decorator, Meta, StoryObj } from '@storybook/react';
-
-import { IconSearch, IconSettings } from '@/ui/display/icon';
-import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
-import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
-import { CatalogStory } from '~/testing/types';
-
-import NavItem from '../NavItem';
-
-const meta: Meta<typeof NavItem> = {
-  title: 'UI/Navigation/NavigationDrawer/NavItem',
-  component: NavItem,
-  args: {
-    label: 'Search',
-    Icon: IconSearch,
-    active: true,
-  },
-  argTypes: { Icon: { control: false } },
-};
-
-const StyledNavItemContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 200px;
-`;
-
-const ComponentDecorator: Decorator = (Story) => (
-  <StyledNavItemContainer>
-    <Story />
-  </StyledNavItemContainer>
-);
-
-export default meta;
-type Story = StoryObj<typeof NavItem>;
-
-export const Default: Story = { 
-  decorators: [ComponentDecorator, ComponentWithRouterDecorator],
-};
-
-export const Catalog: CatalogStory<Story, typeof NavItem> = {
-  decorators: [
-    ComponentDecorator,
-    CatalogDecorator,
-    ComponentWithRouterDecorator,
-  ],
-  parameters: {
-    pseudo: { hover: ['button:has(svg.tabler-icon-settings)'] },
-    catalog: {
-      dimensions: [
-        {
-          name: 'active',
-          values: [true, false],
-          props: (active: boolean) => ({ active }),
-          labels: (active: boolean) => (active ? 'Active' : 'Inactive'),
-        },
-        {
-          name: 'danger',
-          values: [true, false],
-          props: (danger: boolean) => ({ danger }),
-          labels: (danger: boolean) => (danger ? 'Danger' : 'No Danger'),
-        },
-        {
-          name: 'states',
-          values: ['Default', 'Hover'],
-          props: (state: string) =>
-            state === 'Default'
-              ? {}
-              : { label: 'Settings', Icon: IconSettings },
-        },
-      ],
-    },
-  },
-};
-
-export const WithSoonPill: Story = {
-  ...Default,
-  args: {
-    active: false,
-    soon: true,
-  },
-};
-
-export const WithCount: Story = {
-  ...Default,
-  args: {
-    count: 3,
-  },
-};
-
-export const WithKeyboardKeys: Story = {
-  ...Default,
-  args: {
-    className: "hover",
-    keyboard: ['⌘', 'K'],
-  },
-  parameters: {
-    pseudo: { hover: [".hover"] },
-  }
-};
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx
new file mode 100644
index 000000000..2615a7936
--- /dev/null
+++ b/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx
@@ -0,0 +1,109 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Favorites } from '@/favorites/components/Favorites';
+import {
+  IconBell,
+  IconBuildingSkyscraper,
+  IconCheckbox,
+  IconColorSwatch,
+  IconLogout,
+  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 { 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: (
+      <>
+        <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}
+        />
+        <Favorites />
+        <NavigationDrawerSectionTitle label="Workspace" />
+        <NavigationDrawerItem
+          label="Companies"
+          to="/companies"
+          Icon={IconBuildingSkyscraper}
+        />
+        <NavigationDrawerItem label="People" to="/people" Icon={IconUser} />
+        <NavigationDrawerItem label="Opportunities" Icon={IconTargetArrow} />
+      </>
+    ),
+    footer: null,
+  },
+};
+
+export const Submenu: Story = {
+  args: {
+    isSubMenu: true,
+    title: 'Settings',
+    children: (
+      <>
+        <NavigationDrawerSectionTitle label="User" />
+        <NavigationDrawerItem
+          label="Profile"
+          to="/settings/profile"
+          Icon={IconUserCircle}
+          active
+        />
+        <NavigationDrawerItem
+          label="Appearance"
+          to="/settings/profile/appearance"
+          Icon={IconColorSwatch}
+        />
+        <NavigationDrawerSectionTitle label="Workspace" />
+        <NavigationDrawerItem
+          label="General"
+          to="/settings/workspace"
+          Icon={IconSettings}
+        />
+        <NavigationDrawerItem
+          label="Members"
+          to="/settings/workspace-members"
+          Icon={IconUsers}
+        />
+
+        <NavigationDrawerSectionTitle label="Other" />
+        <NavigationDrawerItem label="Logout" Icon={IconLogout} />
+      </>
+    ),
+    footer: <GithubVersionLink />,
+  },
+};
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerCollapseButton.stories.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerCollapseButton.stories.tsx
new file mode 100644
index 000000000..72c0b5ec0
--- /dev/null
+++ b/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 = {};
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerItem.stories.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerItem.stories.tsx
new file mode 100644
index 000000000..4d7ff72cc
--- /dev/null
+++ b/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'] }
+              : {},
+        },
+      ],
+    },
+  },
+};
diff --git a/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/SubMenuNavbar.stories.tsx b/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/SubMenuNavbar.stories.tsx
deleted file mode 100644
index 6da4375ab..000000000
--- a/front/src/modules/ui/navigation/navigation-drawer/components/__stories__/SubMenuNavbar.stories.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import {
-  IconColorSwatch,
-  IconLogout,
-  IconSettings,
-  IconUserCircle,
-  IconUsers,
-} from '@/ui/display/icon';
-import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
-
-import NavItem from '../NavItem';
-import NavTitle from '../NavTitle';
-import SubMenuNavbar from '../SubMenuNavbar';
-
-const meta: Meta<typeof SubMenuNavbar> = {
-  title: 'UI/Navigation/NavigationDrawer/SubMenuNavbar',
-  component: SubMenuNavbar,
-};
-
-export default meta;
-type Story = StoryObj<typeof SubMenuNavbar>;
-
-const navItems = (
-  <>
-    <NavTitle label="User" />
-    <NavItem
-      label="Profile"
-      to="/settings/profile"
-      Icon={IconUserCircle}
-      active
-    />
-    <NavItem
-      label="Appearance"
-      to="/settings/profile/appearance"
-      Icon={IconColorSwatch}
-    />
-    <NavTitle label="Workspace" />
-    <NavItem label="General" to="/settings/workspace" Icon={IconSettings} />
-    <NavItem
-      label="Members"
-      to="/settings/workspace-members"
-      Icon={IconUsers}
-    />
-    <NavTitle label="Other" />
-
-    <NavItem label="Logout" Icon={IconLogout} />
-  </>
-);
-
-export const Default: Story = {
-  args: { children: navItems, backButtonTitle: 'Back' },
-  argTypes: { children: { control: false } },
-  decorators: [ComponentWithRouterDecorator],
-};
diff --git a/front/src/modules/ui/navigation/navigation-drawer/constants/index.ts b/front/src/modules/ui/navigation/navigation-drawer/constants/index.ts
index 7c31a35ac..0bbef5f37 100644
--- a/front/src/modules/ui/navigation/navigation-drawer/constants/index.ts
+++ b/front/src/modules/ui/navigation/navigation-drawer/constants/index.ts
@@ -2,5 +2,3 @@ export const desktopNavDrawerWidths = {
   menu: '236px',
   submenu: '536px',
 };
-
-export const githubLink = 'https://github.com/twentyhq/twenty';
diff --git a/front/src/modules/ui/navigation/states/isNavigationDrawerOpenState.ts b/front/src/modules/ui/navigation/states/isNavigationDrawerOpenState.ts
new file mode 100644
index 000000000..89c23890f
--- /dev/null
+++ b/front/src/modules/ui/navigation/states/isNavigationDrawerOpenState.ts
@@ -0,0 +1,10 @@
+import { atom } from 'recoil';
+
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
+
+const isMobile = window.innerWidth <= MOBILE_VIEWPORT;
+
+export const isNavigationDrawerOpenState = atom({
+  key: 'isNavigationDrawerOpen',
+  default: !isMobile,
+});
diff --git a/front/src/modules/ui/navigation/states/navigationDrawerState.ts b/front/src/modules/ui/navigation/states/navigationDrawerState.ts
deleted file mode 100644
index bb3890f1a..000000000
--- a/front/src/modules/ui/navigation/states/navigationDrawerState.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { atom } from 'recoil';
-
-export const navigationDrawerState = atom<'main' | 'settings' | ''>({
-  key: 'ui/navigationDrawerState',
-  default: 'main',
-});