fix: Invisible content after closing the settings on mobile (#15971)

## Description

- This PR address https://github.com/twentyhq/twenty/issues/15958
- updated settings and main with condition to navigate to
defaultHomePagePath for main page
- updated search with context before opening search hence it resolve the
issue of search showing blank on settings page


## Before


https://github.com/user-attachments/assets/26eb50a0-fb59-4f70-9647-b8150dfdfa40




## After



https://github.com/user-attachments/assets/436fd869-fc0f-4921-98b9-d5eafa67a07f

---------

Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>
This commit is contained in:
Harshit Singh
2025-11-25 00:21:04 +05:30
committed by GitHub
parent 04562b11fb
commit 7109abc311
@@ -1,8 +1,14 @@
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { useOpenRecordsSearchPageInCommandMenu } from '@/command-menu/hooks/useOpenRecordsSearchPageInCommandMenu';
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
import { useDefaultHomePagePath } from '@/navigation/hooks/useDefaultHomePagePath';
import { useOpenSettingsMenu } from '@/navigation/hooks/useOpenSettings';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
import { useNavigate } from 'react-router-dom';
import { useRecoilState } from 'recoil';
import {
type IconComponent,
@@ -17,6 +23,8 @@ import { currentMobileNavigationDrawerState } from '../states/currentMobileNavig
type NavigationBarItemName = 'main' | 'search' | 'tasks' | 'settings';
export const MobileNavigationBar = () => {
const navigate = useNavigate();
const { defaultHomePagePath } = useDefaultHomePagePath();
const [isCommandMenuOpened] = useRecoilState(isCommandMenuOpenedState);
const { closeCommandMenu } = useCommandMenu();
const { openRecordsSearchPage } = useOpenRecordsSearchPageInCommandMenu();
@@ -26,6 +34,14 @@ export const MobileNavigationBar = () => {
const [currentMobileNavigationDrawer, setCurrentMobileNavigationDrawer] =
useRecoilState(currentMobileNavigationDrawerState);
const { openSettingsMenu } = useOpenSettingsMenu();
const { alphaSortedActiveNonSystemObjectMetadataItems } =
useFilteredObjectMetadataItems();
const [, setContextStoreCurrentObjectMetadataItemId] =
useRecoilComponentState(
contextStoreCurrentObjectMetadataItemIdComponentState,
MAIN_CONTEXT_STORE_INSTANCE_ID,
);
const activeItemName = isNavigationDrawerExpanded
? currentMobileNavigationDrawer
@@ -49,12 +65,31 @@ export const MobileNavigationBar = () => {
(previousIsOpen) => activeItemName !== 'main' || !previousIsOpen,
);
setCurrentMobileNavigationDrawer('main');
if (isSettingsPage) {
navigate(defaultHomePagePath);
}
},
},
{
name: 'search',
Icon: IconSearch,
onClick: openRecordsSearchPage,
onClick: () => {
setIsNavigationDrawerExpanded(false);
closeCommandMenu();
if (isSettingsPage) {
const firstObjectMetadataItem =
alphaSortedActiveNonSystemObjectMetadataItems[0];
if (firstObjectMetadataItem !== undefined) {
setContextStoreCurrentObjectMetadataItemId(
firstObjectMetadataItem.id,
);
}
}
openRecordsSearchPage();
},
},
{
name: 'settings',