Navigation drawer refactor (#11251)

closes #11195
closes #11199

### Context

The yellow dots in the Settings Navigation Drawer (used to indicate
advanced settings) were being hidden due to ScrollWrapper's overflow
handling. This required both a fix for the visibility issue and an
improvement to the component structure.

### Changes
1. Keep scrolling logic of the MainNavigationDrawer and
SettingsNavigationDrawer in one place, and conditionally apply
`<StyledScrollableInnerContainer>` when isSettingsDrawer is true.

2. Fixed Yellow Dots Visibility
Added specific padding in NavigationDrawerScrollableContent to
accommodate yellow dots:
```
  padding-left: ${theme.spacing(5)}; // Space for yellow dots
  padding-right: ${theme.spacing(8)}; // Space for no-padding scroll
  ```
  
  This ensures the yellow dots are visible while maintaining proper scroll behavior

3. Improved Component Composition
Using proper component composition instead of passing components as props
Components are now composed in a more React-idiomatic way:
```
  <NavigationDrawer>
    <NavigationDrawerScrollableContent>
      <SettingsNavigationDrawerItems />
    </NavigationDrawerScrollableContent>
    <NavigationDrawerFixedContent>
      <AdvancedSettingsToggle />
    </NavigationDrawerFixedContent>
  </NavigationDrawer>
  ```

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx

@@ -84,7 +84,7 @@ export const DefaultLayout = () => {
                   ? (windowsWidth -
                       (OBJECT_SETTINGS_WIDTH +
                         NAV_DRAWER_WIDTHS.menu.desktop.expanded +
-                        64)) /
+                        76)) /
                     2
                   : 0,
             }}

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

@@ -4,26 +4,24 @@ import { motion } from 'framer-motion';
 import { ReactNode, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
-import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
 import { isNavigationDrawerExpandedState } from '../../states/isNavigationDrawerExpanded';
 import { NavigationDrawerBackButton } from './NavigationDrawerBackButton';
 import { NavigationDrawerHeader } from './NavigationDrawerHeader';
 import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 export type NavigationDrawerProps = {
-  children: ReactNode;
+  children?: ReactNode;
   className?: string;
-  footer?: ReactNode;
   title: string;
 };
 
-const StyledAnimatedContainer = styled(motion.div)<{ isSettings?: boolean }>`
+const StyledAnimatedContainer = styled(motion.div)`
   max-height: 100vh;
-  overflow: ${({ isSettings }) => (isSettings ? 'visible' : 'hidden')};
+  overflow: hidden;
 `;
 
 const StyledContainer = styled.div<{
@@ -33,35 +31,26 @@ const StyledContainer = styled.div<{
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  width: ${NAV_DRAWER_WIDTHS.menu.desktop.expanded}px;
+  width: ${({ isSettings }) =>
+    isSettings ? '100%' : NAV_DRAWER_WIDTHS.menu.desktop.expanded + 'px'};
   gap: ${({ theme }) => theme.spacing(3)};
   height: 100%;
   padding: ${({ theme, isSettings, isMobile }) =>
     isSettings
       ? isMobile
-        ? theme.spacing(3, 8)
-        : theme.spacing(3, 8, 4, 0)
-      : theme.spacing(3, 2, 4)};
-  padding-right: 0px;
+        ? theme.spacing(3, 0, 0, 8)
+        : theme.spacing(3, 0, 4, 0)
+      : theme.spacing(3, 0, 4, 2)};
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: 100%;
-    padding-left: 20px;
-    padding-right: 20px;
+    padding-left: ${({ theme }) => theme.spacing(5)};
+    padding-right: ${({ theme }) => theme.spacing(5)};
   }
 `;
 
-const StyledItemsContainer = styled.div<{ isSettings?: boolean }>`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: auto;
-  overflow: hidden;
-  flex: 1;
-`;
-
 export const NavigationDrawer = ({
   children,
   className,
-  footer,
   title,
 }: NavigationDrawerProps) => {
   const [isHovered, setIsHovered] = useState(false);
@@ -99,7 +88,6 @@ export const NavigationDrawer = ({
       initial={false}
       animate={navigationDrawerAnimate}
       transition={{ duration: theme.animation.duration.normal }}
-      isSettings={isSettingsDrawer}
     >
       <StyledContainer
         isSettings={isSettingsDrawer}
@@ -112,10 +100,8 @@ export const NavigationDrawer = ({
         ) : (
           <NavigationDrawerHeader showCollapseButton={isHovered} />
         )}
-        <StyledItemsContainer isSettings={isSettingsDrawer}>
-          {children}
-        </StyledItemsContainer>
-        <NavigationDrawerSection>{footer}</NavigationDrawerSection>
+
+        {children}
       </StyledContainer>
     </StyledAnimatedContainer>
   );

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

@@ -39,6 +39,7 @@ const StyledContainer = styled.div`
   flex-direction: row;
   height: ${({ theme }) => theme.spacing(8)};
   justify-content: space-between;
+  padding-left: ${({ theme }) => theme.spacing(5)};
 `;
 
 export const NavigationDrawerBackButton = ({

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

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+
+import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
+import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
+import styled from '@emotion/styled';
+import { useIsMobile } from 'twenty-ui/utilities';
+
+const StyledFixedContainer = styled.div<{
+  isSettings?: boolean;
+  isMobile?: boolean;
+}>`
+  ${({ isSettings, theme, isMobile }) =>
+    isSettings
+      ? `
+  padding-left: ${theme.spacing(5)};
+  padding-right: ${isMobile ? theme.spacing(5) : theme.spacing(8)};
+`
+      : ''}
+`;
+export const NavigationDrawerFixedContent = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const isSettingsDrawer = useIsSettingsDrawer();
+  const isMobile = useIsMobile();
+
+  return (
+    <StyledFixedContainer isSettings={isSettingsDrawer} isMobile={isMobile}>
+      <NavigationDrawerSection>{children}</NavigationDrawerSection>
+    </StyledFixedContainer>
+  );
+};

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

@@ -0,0 +1,48 @@
+import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import styled from '@emotion/styled';
+import { ReactNode } from 'react';
+import { useIsMobile } from 'twenty-ui/utilities';
+
+const StyledItemsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: auto;
+  overflow: hidden;
+  flex: 1;
+`;
+
+const StyledScrollableInnerContainer = styled.div<{ isMobile?: boolean }>`
+  height: 100%;
+  padding-left: ${({ theme }) => theme.spacing(5)};
+  padding-right: ${({ theme, isMobile }) =>
+    isMobile ? theme.spacing(5) : theme.spacing(8)};
+`;
+
+export const NavigationDrawerScrollableContent = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const isSettingsDrawer = useIsSettingsDrawer();
+  const isMobile = useIsMobile();
+
+  return (
+    <ScrollWrapper
+      componentInstanceId={`scroll-wrapper-${
+        isSettingsDrawer ? 'settings-' : ''
+      }navigation-drawer`}
+      defaultEnableXScroll={false}
+    >
+      <StyledItemsContainer>
+        {isSettingsDrawer ? (
+          <StyledScrollableInnerContainer isMobile={isMobile}>
+            {children}
+          </StyledScrollableInnerContainer>
+        ) : (
+          <>{children}</>
+        )}
+      </StyledItemsContainer>
+    </ScrollWrapper>
+  );
+};

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

@@ -1,21 +1,22 @@
+import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
 import styled from '@emotion/styled';
 import { useIsMobile } from 'twenty-ui/utilities';
 
-const StyledSection = styled.div`
+const StyledSection = styled.div<{ isSettingsDrawer?: boolean }>`
+  margin-bottom: ${({ theme, isSettingsDrawer }) =>
+    isSettingsDrawer ? theme.spacing(3) : 0};
   width: 100%;
-  margin-bottom: ${({ theme }) => theme.spacing(3)};
-  flex-shrink: 1;
 `;
 
 const StyledSectionInnerContainerMinusScrollPadding = styled.div<{
   isMobile: boolean;
+  isSettingsDrawer: boolean;
 }>`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.betweenSiblingsGap};
-  width: calc(
-    100% - ${({ isMobile, theme }) => (isMobile ? 0 : theme.spacing(2))}
-  );
+  width: ${({ isMobile, theme, isSettingsDrawer }) =>
+    `calc(100% - ${isMobile || isSettingsDrawer ? 0 : theme.spacing(2)})`};
 `;
 
 export const NavigationDrawerSection = ({
@@ -24,9 +25,13 @@ export const NavigationDrawerSection = ({
   children: React.ReactNode;
 }) => {
   const isMobile = useIsMobile();
+  const isSettingsDrawer = useIsSettingsDrawer();
   return (
-    <StyledSection>
-      <StyledSectionInnerContainerMinusScrollPadding isMobile={isMobile}>
+    <StyledSection isSettingsDrawer={isSettingsDrawer}>
+      <StyledSectionInnerContainerMinusScrollPadding
+        isMobile={isMobile}
+        isSettingsDrawer={isSettingsDrawer}
+      >
         {children}
       </StyledSectionInnerContainerMinusScrollPadding>
     </StyledSection>

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

@@ -16,16 +16,8 @@ import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedM
 import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
 
 import { CurrentWorkspaceMemberFavoritesFolders } from '@/favorites/components/CurrentWorkspaceMemberFavoritesFolders';
+import { NavigationDrawerFixedContent } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerFixedContent';
 import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
-import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
-import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
-import jsonPage from '../../../../../../../package.json';
-import { NavigationDrawer } from '../NavigationDrawer';
-import { NavigationDrawerItem } from '../NavigationDrawerItem';
-import { NavigationDrawerItemGroup } from '../NavigationDrawerItemGroup';
-import { NavigationDrawerSection } from '../NavigationDrawerSection';
-import { NavigationDrawerSectionTitle } from '../NavigationDrawerSectionTitle';
-import { GithubVersionLink } from 'twenty-ui/navigation';
 import {
   IconAt,
   IconBell,
@@ -42,7 +34,16 @@ import {
   IconUserCircle,
   IconUsers,
 } from 'twenty-ui/display';
+import { GithubVersionLink } from 'twenty-ui/navigation';
 import { getOsControlSymbol } from 'twenty-ui/utilities';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+import jsonPage from '../../../../../../../package.json';
+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',
@@ -71,7 +72,7 @@ const meta: Meta<typeof NavigationDrawer> = {
     layout: 'fullscreen',
     msw: graphqlMocks,
   },
-  argTypes: { children: { control: false }, footer: { control: false } },
+  argTypes: { children: { control: false } },
 };
 
 export default meta;
@@ -79,6 +80,7 @@ type Story = StoryObj<typeof NavigationDrawer>;
 
 export const Default: Story = {
   args: {
+    title: 'Default',
     children: (
       <>
         <NavigationDrawerSection>
@@ -121,7 +123,6 @@ export const Default: Story = {
         </NavigationDrawerSection>
       </>
     ),
-    footer: null,
   },
   play: async () => {
     const canvas = within(document.body);
@@ -191,9 +192,12 @@ export const Settings: Story = {
             Icon={IconServer}
           />
         </NavigationDrawerSection>
+
+        <NavigationDrawerFixedContent>
+          <GithubVersionLink version={jsonPage.version} />
+        </NavigationDrawerFixedContent>
       </>
     ),
-    footer: <GithubVersionLink version={jsonPage.version} />,
   },
   play: async () => {
     const canvas = within(document.body);