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

fix #7085 breadcrumb fix for mobile viewport (#7419)

Browse Source 
ISSUE
Closes https://github.com/twentyhq/twenty/issues/7085

DEMO 


https://github.com/user-attachments/assets/39692906-c02e-4e4c-9205-82447fa142df

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
NitinPSingh
2024-10-31 22:47:13 +05:30
committed by GitHub
parent 74291e531c
commit e5641c5c53
9 changed files with 122 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx
View File

@ -1,5 +1,6 @@
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { useOpenSettingsMenu } from '@/navigation/hooks/useOpenSettings';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { useRecoilState } from 'recoil';
import {
@ -23,6 +24,8 @@ export const MobileNavigationBar = () => {
const [currentMobileNavigationDrawer, setCurrentMobileNavigationDrawer] =
useRecoilState(currentMobileNavigationDrawerState);
const { openSettingsMenu } = useOpenSettingsMenu();
const activeItemName = isNavigationDrawerExpanded
? currentMobileNavigationDrawer
: isCommandMenuOpened
@ -62,10 +65,7 @@ export const MobileNavigationBar = () => {
Icon: IconSettings,
onClick: () => {
closeCommandMenu();
setIsNavigationDrawerExpanded(
(previousIsOpen) => activeItemName !== 'settings' || !previousIsOpen,
);
setCurrentMobileNavigationDrawer('settings');
openSettingsMenu();
},
},
];

19
packages/twenty-front/src/modules/navigation/hooks/useOpenSettings.ts Normal file
View File

@ -0,0 +1,19 @@
import { currentMobileNavigationDrawerState } from '@/navigation/states/currentMobileNavigationDrawerState';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { useRecoilState } from 'recoil';
export const useOpenSettingsMenu = () => {
const [, setIsNavigationDrawerExpanded] = useRecoilState(
isNavigationDrawerExpandedState,
);
const [, setCurrentMobileNavigationDrawer] = useRecoilState(
currentMobileNavigationDrawerState,
);
const openSettingsMenu = () => {
setIsNavigationDrawerExpanded(true);
setCurrentMobileNavigationDrawer('settings');
};
return { openSettingsMenu };
};