diff --git a/src/components/Navigation/TopBar.tsx b/src/components/Navigation/TopBar.tsx index ef2d2adabe3b..549f6f66561a 100644 --- a/src/components/Navigation/TopBar.tsx +++ b/src/components/Navigation/TopBar.tsx @@ -40,7 +40,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, const displaySearch = !isAnonymousUser && shouldDisplaySearch; return ( - + scrollOffset.get(); const distanceScrolled = currentOffset - scrollOffset.get(); + if (isScrollingDown && contentOffset.y > TOO_CLOSE_TO_TOP_DISTANCE) { topBarOffset.set(clamp(topBarOffset.get() - distanceScrolled, variables.minimalTopBarOffset, StyleUtils.searchHeaderDefaultOffset)); } else if (!isScrollingDown && distanceScrolled < 0 && contentOffset.y + layoutMeasurement.height < contentSize.height - TOO_CLOSE_TO_BOTTOM_DISTANCE) { diff --git a/src/pages/home/sidebar/SidebarLinks.tsx b/src/pages/home/sidebar/SidebarLinks.tsx index e2df0ff6f33a..2e84f9805f6a 100644 --- a/src/pages/home/sidebar/SidebarLinks.tsx +++ b/src/pages/home/sidebar/SidebarLinks.tsx @@ -9,9 +9,9 @@ import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; +import {confirmReadyToOpenApp, setSidebarLoaded} from '@libs/actions/App'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; -import * as App from '@userActions/App'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type {Report} from '@src/types/onyx'; @@ -44,7 +44,7 @@ function SidebarLinks({insets, optionListItems, isLoading, priorityMode = CONST. const {shouldUseNarrowLayout} = useResponsiveLayout(); useEffect(() => { - App.confirmReadyToOpenApp(); + confirmReadyToOpenApp(); }, []); useEffect(() => { @@ -91,10 +91,10 @@ function SidebarLinks({insets, optionListItems, isLoading, priorityMode = CONST. onSelectRow={showReportPage} shouldDisableFocusOptions={shouldUseNarrowLayout} optionMode={viewMode} - onFirstItemRendered={App.setSidebarLoaded} + onFirstItemRendered={setSidebarLoaded} /> {!!isLoading && optionListItems?.length === 0 && ( - + )} diff --git a/src/styles/index.ts b/src/styles/index.ts index 1c808291f98a..e2d7bf67a7d1 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3743,7 +3743,7 @@ const styles = (theme: ThemeColors) => }, narrowSearchHeaderStyle: { - paddingTop: 1, + paddingTop: 12, backgroundColor: theme.appBG, flex: 1, }, @@ -5415,7 +5415,8 @@ const styles = (theme: ThemeColors) => width: '100%', backgroundColor: theme.transparent, overflow: 'hidden', - marginBottom: -1, + position: 'absolute', + bottom: -1, }, progressBar: { diff --git a/src/styles/variables.ts b/src/styles/variables.ts index f087a9a19373..49bca86efdf3 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -274,9 +274,9 @@ export default { inlineImagePreviewMinSize: 64, inlineImagePreviewMaxSize: 148, - minimalTopBarOffset: -106, + minimalTopBarOffset: -124, searchHeaderDefaultOffset: 0, - searchListContentMarginTop: 116, + searchListContentMarginTop: 124, searchTopBarZIndex: 9, searchTopBarHeight: 52, searchRouterInputMargin: 52,