Hide feeds topbar on scroll (#3108)

1 files changed, 17 insertions, 2 deletions

diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx
index 6145081af..9818b56f6 100644
--- a/src/view/com/home/HomeHeaderLayout.web.tsx
+++ b/src/view/com/home/HomeHeaderLayout.web.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
+import Animated from 'react-native-reanimated'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile'
@@ -12,6 +13,8 @@ import {
 import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
 import {CogIcon} from '#/lib/icons'
+import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
+import {useShellLayout} from '#/state/shell/shell-layout'
 
 export function HomeHeaderLayout(props: {
   children: React.ReactNode
@@ -33,6 +36,8 @@ function HomeHeaderLayoutDesktopAndTablet({
   tabBarAnchor: JSX.Element | null | undefined
 }) {
   const pal = usePalette('default')
+  const {headerMinimalShellTransform} = useMinimalShellMode()
+  const {headerHeight} = useShellLayout()
   const {_} = useLingui()
 
   return (
@@ -60,9 +65,19 @@ function HomeHeaderLayoutDesktopAndTablet({
         </Link>
       </View>
       {tabBarAnchor}
-      <View style={[pal.view, pal.border, styles.bar, styles.tabBar]}>
+      <Animated.View
+        onLayout={e => {
+          headerHeight.value = e.nativeEvent.layout.height
+        }}
+        style={[
+          pal.view,
+          pal.border,
+          styles.bar,
+          styles.tabBar,
+          headerMinimalShellTransform,
+        ]}>
         {children}
-      </View>
+      </Animated.View>
     </>
   )
 }