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

Navigation drawer scroll padding fix (#9141)

Browse Source 
closes https://github.com/twentyhq/twenty/issues/9026
fixes #9312



https://github.com/user-attachments/assets/3d7df3ec-8a5e-4308-8993-82c715edc683

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
nitin
2025-01-08 19:33:47 +05:30
committed by GitHub
parent 428572ae99
commit bec7911d59
6 changed files with 100 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@ 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';
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { isNavigationDrawerExpandedState } from '../../states/isNavigationDrawerExpanded';
import { NavigationDrawerBackButton } from './NavigationDrawerBackButton';
import { NavigationDrawerHeader } from './NavigationDrawerHeader';
@ -43,7 +44,7 @@ const StyledContainer = styled.div<{
? theme.spacing(3, 8)
: theme.spacing(3, 8, 4, 0)
: theme.spacing(3, 2, 4)};
padding-right: 0px;
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: 100%;
padding-left: 20px;
@ -123,7 +124,7 @@ export const NavigationDrawer = ({
<StyledItemsContainer isSettings={isSettingsDrawer}>
{children}
</StyledItemsContainer>
{footer}
<NavigationDrawerSection>{footer}</NavigationDrawerSection>
</StyledContainer>
</StyledAnimatedContainer>
);

2
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
View File

@ -92,7 +92,7 @@ const StyledItem = styled('button', {
width: ${(props) =>
!props.isNavigationDrawerExpanded
? `calc(${NAV_DRAWER_WIDTHS.menu.desktop.collapsed}px - ${props.theme.spacing(5.5)})`
: `calc(100% - ${props.theme.spacing(2)})`};
: `calc(100% - ${props.theme.spacing(1.5)})`};
${({ isDragging }) =>
isDragging &&

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

@ -1,4 +1,5 @@
import styled from '@emotion/styled';
import { useIsMobile } from 'twenty-ui';
const StyledSection = styled.div`
display: flex;
@ -9,4 +10,25 @@ const StyledSection = styled.div`
flex-shrink: 1;
`;
export { StyledSection as NavigationDrawerSection };
const StyledSectionInnerContainerMinusScrollPadding = styled.div<{
isMobile: boolean;
}>`
width: calc(
100% - ${({ isMobile, theme }) => (isMobile ? 0 : theme.spacing(2))}
);
`;
export const NavigationDrawerSection = ({
children,
}: {
children: React.ReactNode;
}) => {
const isMobile = useIsMobile();
return (
<StyledSection>
<StyledSectionInnerContainerMinusScrollPadding isMobile={isMobile}>
{children}
</StyledSectionInnerContainerMinusScrollPadding>
</StyledSection>
);
};