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

156
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,88 +47,96 @@ export const SettingsNavigationDrawerItems = () => {
}; };
return ( return (
<> <ScrollWrapper
{settingsNavigationItems.map((section) => { contextProviderName="navigationDrawer"
const allItemsHidden = section.items.every((item) => item.isHidden); componentInstanceId={`scroll-wrapper-settings-navigation-drawer`}
if (allItemsHidden) { scrollbarVariant="no-padding"
return null; heightMode="fit-content"
} defaultEnableXScroll={false}
>
<StyledInnerContainer>
{settingsNavigationItems.map((section) => {
const allItemsHidden = section.items.every((item) => item.isHidden);
if (allItemsHidden) {
return null;
}
return ( return (
<NavigationDrawerSection key={section.label}> <NavigationDrawerSection key={section.label}>
{section.isAdvanced ? ( {section.isAdvanced ? (
<AdvancedSettingsWrapper hideDot> <AdvancedSettingsWrapper hideDot>
<NavigationDrawerSectionTitle label={section.label} />
</AdvancedSettingsWrapper>
) : (
<NavigationDrawerSectionTitle label={section.label} /> <NavigationDrawerSectionTitle label={section.label} />
</AdvancedSettingsWrapper> )}
) : ( {section.items.map((item, index) => {
<NavigationDrawerSectionTitle label={section.label} /> const subItems = item.subItems;
)} if (Array.isArray(subItems) && subItems.length > 0) {
{section.items.map((item, index) => { const selectedSubItemIndex =
const subItems = item.subItems; getSelectedIndexForSubItems(subItems);
if (Array.isArray(subItems) && subItems.length > 0) {
const selectedSubItemIndex =
getSelectedIndexForSubItems(subItems);
return ( return (
<NavigationDrawerItemGroup <NavigationDrawerItemGroup
key={item.path || `group-${index}`} key={item.path || `group-${index}`}
> >
<SettingsNavigationDrawerItem
item={item}
subItemState={
item.indentationLevel
? getNavigationSubItemLeftAdornment({
arrayLength: section.items.length,
index,
selectedIndex: selectedSubItemIndex,
})
: undefined
}
/>
{subItems.map((subItem, subIndex) => (
<SettingsNavigationDrawerItem <SettingsNavigationDrawerItem
key={subItem.path || `subitem-${subIndex}`} item={item}
item={subItem}
subItemState={ subItemState={
subItem.indentationLevel item.indentationLevel
? getNavigationSubItemLeftAdornment({ ? getNavigationSubItemLeftAdornment({
arrayLength: subItems.length, arrayLength: section.items.length,
index: subIndex, index,
selectedIndex: selectedSubItemIndex, selectedIndex: selectedSubItemIndex,
}) })
: undefined : undefined
} }
/> />
))} {subItems.map((subItem, subIndex) => (
</NavigationDrawerItemGroup> <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 ( </NavigationDrawerSection>
<SettingsNavigationDrawerItem );
key={item.path || `item-${index}`} })}
item={item} <NavigationDrawerSection>
subItemState={ <NavigationDrawerItem
item.indentationLevel label={t`Logout`}
? getNavigationSubItemLeftAdornment({ onClick={signOut}
arrayLength: section.items.length, Icon={IconDoorEnter}
index, />
selectedIndex: index, </NavigationDrawerSection>
}) </StyledInnerContainer>
: undefined </ScrollWrapper>
}
/>
);
})}
</NavigationDrawerSection>
);
})}
<NavigationDrawerSection>
<NavigationDrawerItem
label={t`Logout`}
onClick={signOut}
Icon={IconDoorEnter}
/>
</NavigationDrawerSection>
</>
); );
}; };

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;
`; `;