Sticky desktop header (#3077)

src/view/com/home/HomeHeader.tsx

@@ -52,7 +52,7 @@ export function HomeHeader(
   )
 
   return (
-    <HomeHeaderLayout>
+    <HomeHeaderLayout tabBarAnchor={props.tabBarAnchor}>
       <TabBar
         key={items.join(',')}
         onPressSelected={props.onPressSelected}

src/view/com/home/HomeHeaderLayout.web.tsx

@@ -1,13 +1,10 @@
 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'
-import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
-import {useShellLayout} from '#/state/shell/shell-layout'
 import {Logo} from '#/view/icons/Logo'
-import {Link, TextLink} from '../util/Link'
+import {Link} from '../util/Link'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
@@ -16,41 +13,42 @@ import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
 import {CogIcon} from '#/lib/icons'
 
-export function HomeHeaderLayout({children}: {children: React.ReactNode}) {
+export function HomeHeaderLayout(props: {
+  children: React.ReactNode
+  tabBarAnchor: JSX.Element | null | undefined
+}) {
   const {isMobile} = useWebMediaQueries()
   if (isMobile) {
-    return <HomeHeaderLayoutMobile>{children}</HomeHeaderLayoutMobile>
+    return <HomeHeaderLayoutMobile {...props} />
   } else {
-    return <HomeHeaderLayoutTablet>{children}</HomeHeaderLayoutTablet>
+    return <HomeHeaderLayoutDesktopAndTablet {...props} />
   }
 }
 
-function HomeHeaderLayoutTablet({children}: {children: React.ReactNode}) {
+function HomeHeaderLayoutDesktopAndTablet({
+  children,
+  tabBarAnchor,
+}: {
+  children: React.ReactNode
+  tabBarAnchor: JSX.Element | null | undefined
+}) {
   const pal = usePalette('default')
-  const {headerMinimalShellTransform} = useMinimalShellMode()
-  const {headerHeight} = useShellLayout()
   const {_} = useLingui()
 
   return (
-    // @ts-ignore the type signature for transform wrong here, translateX and translateY need to be in separate objects -prf
-    <Animated.View
-      style={[pal.view, pal.border, styles.tabBar, headerMinimalShellTransform]}
-      onLayout={e => {
-        headerHeight.value = e.nativeEvent.layout.height
-      }}>
-      <View style={[pal.view, styles.topBar]}>
-        <TextLink
-          type="title-lg"
+    <>
+      <View style={[pal.view, pal.border, styles.bar, styles.topBar]}>
+        <Link
           href="/settings/following-feed"
+          hitSlop={10}
+          accessibilityRole="button"
           accessibilityLabel={_(msg`Following Feed Preferences`)}
-          accessibilityHint=""
-          text={
-            <FontAwesomeIcon
-              icon="sliders"
-              style={pal.textLight as FontAwesomeIconStyle}
-            />
-          }
-        />
+          accessibilityHint="">
+          <FontAwesomeIcon
+            icon="sliders"
+            style={pal.textLight as FontAwesomeIconStyle}
+          />
+        </Link>
         <Logo width={28} />
         <Link
           href="/settings/saved-feeds"
@@ -61,32 +59,38 @@ function HomeHeaderLayoutTablet({children}: {children: React.ReactNode}) {
           <CogIcon size={22} strokeWidth={2} style={pal.textLight} />
         </Link>
       </View>
-      {children}
-    </Animated.View>
+      {tabBarAnchor}
+      <View style={[pal.view, pal.border, styles.bar, styles.tabBar]}>
+        {children}
+      </View>
+    </>
   )
 }
 
 const styles = StyleSheet.create({
+  bar: {
+    // @ts-ignore Web only
+    left: 'calc(50% - 300px)',
+    width: 600,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+  },
   topBar: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingHorizontal: 18,
-    paddingVertical: 8,
-    marginTop: 8,
-    width: '100%',
+    paddingTop: 16,
+    paddingBottom: 8,
   },
   tabBar: {
     // @ts-ignore Web only
     position: 'sticky',
-    zIndex: 1,
-    // @ts-ignore Web only -prf
-    left: 'calc(50% - 300px)',
-    width: 600,
     top: 0,
     flexDirection: 'column',
     alignItems: 'center',
     borderLeftWidth: 1,
     borderRightWidth: 1,
+    zIndex: 1,
   },
 })

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -23,6 +23,7 @@ export function HomeHeaderLayoutMobile({
   children,
 }: {
   children: React.ReactNode
+  tabBarAnchor: JSX.Element | null | undefined
 }) {
   const pal = usePalette('default')
   const {_} = useLingui()

src/view/screens/Home.tsx

@@ -123,8 +123,7 @@ function HomeScreenReady({
       return (
         <HomeHeader
           key="FEEDS_TAB_BAR"
-          selectedPage={props.selectedPage}
-          onSelect={props.onSelect}
+          {...props}
           testID="homeScreenFeedTabs"
           onPressSelected={onPressSelected}
           feeds={pinnedFeedInfos}