admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: Added ScrollWrapper on Settings Sidebar (#11106)

Browse Source 
## 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>
This commit is contained in:
Harshit Singh
2025-03-23 18:32:33 +05:30
committed by GitHub
parent 9ad8287dbc
commit f9e826d37e
2 changed files with 86 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
View File

@ -11,11 +11,17 @@ import { NavigationDrawerItemGroup } from '@/ui/navigation/navigation-drawer/com
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection'; import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle'; import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment'; 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 { useLingui } from '@lingui/react/macro';
import { matchPath, resolvePath, useLocation } from 'react-router-dom'; import { matchPath, resolvePath, useLocation } from 'react-router-dom';
import { IconDoorEnter } from 'twenty-ui'; import { IconDoorEnter } from 'twenty-ui';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath'; import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
const StyledInnerContainer = styled.div`
height: 100%;
`;
export const SettingsNavigationDrawerItems = () => { export const SettingsNavigationDrawerItems = () => {
const { signOut } = useAuth(); const { signOut } = useAuth();
const { t } = useLingui(); const { t } = useLingui();
@ -41,7 +47,14 @@ export const SettingsNavigationDrawerItems = () => {
}; };
return ( return (
<> <ScrollWrapper
contextProviderName="navigationDrawer"
componentInstanceId={`scroll-wrapper-settings-navigation-drawer`}
scrollbarVariant="no-padding"
heightMode="fit-content"
defaultEnableXScroll={false}
>
<StyledInnerContainer>
{settingsNavigationItems.map((section) => { {settingsNavigationItems.map((section) => {
const allItemsHidden = section.items.every((item) => item.isHidden); const allItemsHidden = section.items.every((item) => item.isHidden);
if (allItemsHidden) { if (allItemsHidden) {
@ -123,6 +136,7 @@ export const SettingsNavigationDrawerItems = () => {
Icon={IconDoorEnter} Icon={IconDoorEnter}
/> />
</NavigationDrawerSection> </NavigationDrawerSection>
</> </StyledInnerContainer>
</ScrollWrapper>
); );
}; };

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

@ -6,7 +6,6 @@ import { useRecoilValue } from 'recoil';
import { MOBILE_VIEWPORT } from 'twenty-ui'; import { MOBILE_VIEWPORT } from 'twenty-ui';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths'; import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer'; import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
@ -55,7 +54,7 @@ const StyledItemsContainer = styled.div<{ isSettings?: boolean }>`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: auto; margin-bottom: auto;
overflow: ${({ isSettings }) => (isSettings ? 'visible' : 'hidden')}; overflow: hidden;
flex: 1; flex: 1;
`; `;