From f9e826d37e9cd8a4f55ce466b12e8fa2157b6517 Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Sun, 23 Mar 2025 18:32:33 +0530
Subject: [PATCH] fix: Added ScrollWrapper on Settings Sidebar (#11106)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

- this PR fixes issue #11092
- Added ScrollWrapper and scroll in Settings sidebar while maintaining
the exit Settings fixed.

## Added Behaviour



https://github.com/user-attachments/assets/c8db0f6d-986e-46f3-85d6-bb3028c56e5f

---------

Co-authored-by: ehconitin <nitinkoche03@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
---
 .../SettingsNavigationDrawerItems.tsx         | 156 ++++++++++--------
 .../components/NavigationDrawer.tsx           |   3 +-
 2 files changed, 86 insertions(+), 73 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
index af2578f33..e139ea1ec 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
@@ -11,11 +11,17 @@ import { NavigationDrawerItemGroup } from '@/ui/navigation/navigation-drawer/com
 import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
 import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
 import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment';
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { matchPath, resolvePath, useLocation } from 'react-router-dom';
 import { IconDoorEnter } from 'twenty-ui';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
+const StyledInnerContainer = styled.div`
+  height: 100%;
+`;
+
 export const SettingsNavigationDrawerItems = () => {
   const { signOut } = useAuth();
   const { t } = useLingui();
@@ -41,88 +47,96 @@ export const SettingsNavigationDrawerItems = () => {
   };
 
   return (
-    <>
-      {settingsNavigationItems.map((section) => {
-        const allItemsHidden = section.items.every((item) => item.isHidden);
-        if (allItemsHidden) {
-          return null;
-        }
+    <ScrollWrapper
+      contextProviderName="navigationDrawer"
+      componentInstanceId={`scroll-wrapper-settings-navigation-drawer`}
+      scrollbarVariant="no-padding"
+      heightMode="fit-content"
+      defaultEnableXScroll={false}
+    >
+      <StyledInnerContainer>
+        {settingsNavigationItems.map((section) => {
+          const allItemsHidden = section.items.every((item) => item.isHidden);
+          if (allItemsHidden) {
+            return null;
+          }
 
-        return (
-          <NavigationDrawerSection key={section.label}>
-            {section.isAdvanced ? (
-              <AdvancedSettingsWrapper hideDot>
+          return (
+            <NavigationDrawerSection key={section.label}>
+              {section.isAdvanced ? (
+                <AdvancedSettingsWrapper hideDot>
+                  <NavigationDrawerSectionTitle label={section.label} />
+                </AdvancedSettingsWrapper>
+              ) : (
                 <NavigationDrawerSectionTitle label={section.label} />
-              </AdvancedSettingsWrapper>
-            ) : (
-              <NavigationDrawerSectionTitle label={section.label} />
-            )}
-            {section.items.map((item, index) => {
-              const subItems = item.subItems;
-              if (Array.isArray(subItems) && subItems.length > 0) {
-                const selectedSubItemIndex =
-                  getSelectedIndexForSubItems(subItems);
+              )}
+              {section.items.map((item, index) => {
+                const subItems = item.subItems;
+                if (Array.isArray(subItems) && subItems.length > 0) {
+                  const selectedSubItemIndex =
+                    getSelectedIndexForSubItems(subItems);
 
-                return (
-                  <NavigationDrawerItemGroup
-                    key={item.path || `group-${index}`}
-                  >
-                    <SettingsNavigationDrawerItem
-                      item={item}
-                      subItemState={
-                        item.indentationLevel
-                          ? getNavigationSubItemLeftAdornment({
-                              arrayLength: section.items.length,
-                              index,
-                              selectedIndex: selectedSubItemIndex,
-                            })
-                          : undefined
-                      }
-                    />
-                    {subItems.map((subItem, subIndex) => (
+                  return (
+                    <NavigationDrawerItemGroup
+                      key={item.path || `group-${index}`}
+                    >
                       <SettingsNavigationDrawerItem
-                        key={subItem.path || `subitem-${subIndex}`}
-                        item={subItem}
+                        item={item}
                         subItemState={
-                          subItem.indentationLevel
+                          item.indentationLevel
                             ? getNavigationSubItemLeftAdornment({
-                                arrayLength: subItems.length,
-                                index: subIndex,
+                                arrayLength: section.items.length,
+                                index,
                                 selectedIndex: selectedSubItemIndex,
                               })
                             : undefined
                         }
                       />
-                    ))}
-                  </NavigationDrawerItemGroup>
+                      {subItems.map((subItem, subIndex) => (
+                        <SettingsNavigationDrawerItem
+                          key={subItem.path || `subitem-${subIndex}`}
+                          item={subItem}
+                          subItemState={
+                            subItem.indentationLevel
+                              ? getNavigationSubItemLeftAdornment({
+                                  arrayLength: subItems.length,
+                                  index: subIndex,
+                                  selectedIndex: selectedSubItemIndex,
+                                })
+                              : undefined
+                          }
+                        />
+                      ))}
+                    </NavigationDrawerItemGroup>
+                  );
+                }
+                return (
+                  <SettingsNavigationDrawerItem
+                    key={item.path || `item-${index}`}
+                    item={item}
+                    subItemState={
+                      item.indentationLevel
+                        ? getNavigationSubItemLeftAdornment({
+                            arrayLength: section.items.length,
+                            index,
+                            selectedIndex: index,
+                          })
+                        : undefined
+                    }
+                  />
                 );
-              }
-              return (
-                <SettingsNavigationDrawerItem
-                  key={item.path || `item-${index}`}
-                  item={item}
-                  subItemState={
-                    item.indentationLevel
-                      ? getNavigationSubItemLeftAdornment({
-                          arrayLength: section.items.length,
-                          index,
-                          selectedIndex: index,
-                        })
-                      : undefined
-                  }
-                />
-              );
-            })}
-          </NavigationDrawerSection>
-        );
-      })}
-      <NavigationDrawerSection>
-        <NavigationDrawerItem
-          label={t`Logout`}
-          onClick={signOut}
-          Icon={IconDoorEnter}
-        />
-      </NavigationDrawerSection>
-    </>
+              })}
+            </NavigationDrawerSection>
+          );
+        })}
+        <NavigationDrawerSection>
+          <NavigationDrawerItem
+            label={t`Logout`}
+            onClick={signOut}
+            Icon={IconDoorEnter}
+          />
+        </NavigationDrawerSection>
+      </StyledInnerContainer>
+    </ScrollWrapper>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
index cf8b1bf7b..f8e7ca681 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
@@ -6,7 +6,6 @@ import { useRecoilValue } from 'recoil';
 import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-
 import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
 
 import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
@@ -55,7 +54,7 @@ const StyledItemsContainer = styled.div<{ isSettings?: boolean }>`
   display: flex;
   flex-direction: column;
   margin-bottom: auto;
-  overflow: ${({ isSettings }) => (isSettings ? 'visible' : 'hidden')};
+  overflow: hidden;
   flex: 1;
 `;