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

[FIX] fix navigation overflow (#7795)

Browse Source 
FIX #7733

Fixes the overflow and responsive problem on large and small devices. 


![image](https://github.com/user-attachments/assets/6cd8b33f-a52f-4452-b161-9c84ebbb4cce)

![image](https://github.com/user-attachments/assets/c8c0386f-e2a2-4f96-a06e-7e37f54c0564)

The 'Workspace' title is fixed and only links under it are scrolled when
overflown.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Hitarth Sheth
2024-10-17 18:49:42 -04:00
committed by GitHub
parent 8f7ca6a0e3
commit f6c094a56f
10 changed files with 159 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,10 +9,10 @@ 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 { isNavigationDrawerExpandedState } from '../../states/isNavigationDrawerExpanded';
import { NavigationDrawerBackButton } from './NavigationDrawerBackButton';
import { NavigationDrawerHeader } from './NavigationDrawerHeader';
import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
export type NavigationDrawerProps = {
children: ReactNode;
@ -22,7 +22,10 @@ export type NavigationDrawerProps = {
title?: string;
};
const StyledAnimatedContainer = styled(motion.div)``;
const StyledAnimatedContainer = styled(motion.div)`
max-height: 100vh;
overflow: hidden;
`;
const StyledContainer = styled.div<{
isSettings?: boolean;
@ -51,6 +54,8 @@ const StyledItemsContainer = styled.div`
display: flex;
flex-direction: column;
margin-bottom: auto;
overflow: hidden;
flex: 1;
`;
export const NavigationDrawer = ({

6
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx
View File

@ -1,9 +1,9 @@
import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { AnimationControls, motion, TargetAndTransition } from 'framer-motion';
import { useRecoilValue } from 'recoil';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { useTheme } from '@emotion/react';
import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
const StyledAnimatedContainer = styled(motion.div)``;

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

@ -142,7 +142,6 @@ const StyledKeyBoardShortcut = styled.div`
const StyledNavigationDrawerItemContainer = styled.div`
display: flex;
flex-grow: 1;
width: 100%;
`;

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

@ -6,6 +6,8 @@ const StyledSection = styled.div`
gap: ${({ theme }) => theme.betweenSiblingsGap};
width: 100%;
margin-bottom: ${({ theme }) => theme.spacing(3)};
flex-shrink: 1;
overflow: hidden;
`;
export { StyledSection as NavigationDrawerSection };

7
packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx
View File

@ -17,7 +17,8 @@ export type ContextProviderName =
| 'tabList'
| 'releases'
| 'test'
| 'showPageActivityContainer';
| 'showPageActivityContainer'
| 'navigationDrawer';
const createScrollWrapperContext = (id: string) =>
createContext<ScrollWrapperContextValue>({
@ -47,6 +48,8 @@ export const ReleasesScrollWrapperContext =
createScrollWrapperContext('releases');
export const ShowPageActivityContainerScrollWrapperContext =
createScrollWrapperContext('showPageActivityContainer');
export const NavigationDrawerScrollWrapperContext =
createScrollWrapperContext('navigationDrawer');
export const TestScrollWrapperContext = createScrollWrapperContext('test');
export const getContextByProviderName = (
@ -77,6 +80,8 @@ export const getContextByProviderName = (
return TestScrollWrapperContext;
case 'showPageActivityContainer':
return ShowPageActivityContainerScrollWrapperContext;
case 'navigationDrawer':
return NavigationDrawerScrollWrapperContext;
default:
throw new Error('Context Provider not available');
}