only move down tab bar, leave buttons

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -111,9 +111,12 @@ export function HomeHeaderLayoutMobile({
       {
         translateY: isWeb
           ? 0
-          : interpolate(scrollY?.value ?? 0, [-2, 0], [-1, 0], {
+          : interpolate(
-              extrapolateRight: Extrapolation.CLAMP,
+              scrollY?.value ?? -headerHeight.value,
-            }),
+              [-headerHeight.value, 0],
+              [headerHeight.value / 2, 0],
+              {extrapolateRight: Extrapolation.CLAMP},
+            ),
       },
     ],
   }))
@@ -129,29 +132,17 @@ export function HomeHeaderLayoutMobile({
   console.log(headerHeight.value)
 
   return (
-    <Animated.View
-      pointerEvents="box-none"
-      style={[styles.tabBar, animatedContainerStyle]}>
-      {native(
-        <View
-          style={[
-            a.absolute,
-            {height: frameHeight},
-            {bottom: '100%', left: 0, right: 0},
-            t.atoms.bg,
-          ]}
-        />,
-      )}
     <Animated.View
       style={[
         t.atoms.bg,
         t.atoms.border_contrast_medium,
+        styles.tabBar,
         headerMinimalShellTransform,
       ]}
       onLayout={e => {
         headerHeight.value = e.nativeEvent.layout.height
       }}>
-        <View style={[styles.topBar]}>
+      <View style={[styles.topBar, a.z_10]}>
         <View style={[{width: 100}]}>
           <TouchableOpacity
             testID="viewHeaderDrawerBtn"
@@ -245,14 +236,22 @@ export function HomeHeaderLayoutMobile({
                   marginRight: -6,
                 },
               ]}>
-                <FeedsIcon
+              <FeedsIcon size="lg" fill={t.atoms.text_contrast_medium.color} />
-                  size="lg"
-                  fill={t.atoms.text_contrast_medium.color}
-                />
             </Link>
           )}
         </View>
       </View>
+      <Animated.View style={[a.relative, animatedContainerStyle]}>
+        {native(
+          <View
+            style={[
+              a.absolute,
+              {height: frameHeight},
+              {bottom: '100%', left: 0, right: 0},
+              t.atoms.bg,
+            ]}
+          />,
+        )}
         {children}
       </Animated.View>
     </Animated.View>