forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Sticky desktop header (#3077)
+43
-39
+1
-1
src/view/com/home/HomeHeader.tsx
+1
-1
src/view/com/home/HomeHeader.tsx
+40
-36
src/view/com/home/HomeHeaderLayout.web.tsx
+40
-36
src/view/com/home/HomeHeaderLayout.web.tsx
···
1
1
import React from 'react'
2
2
import {StyleSheet, View} from 'react-native'
3
-
import Animated from 'react-native-reanimated'
4
3
import {usePalette} from 'lib/hooks/usePalette'
5
4
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
6
5
import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile'
7
-
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
8
-
import {useShellLayout} from '#/state/shell/shell-layout'
9
6
import {Logo} from '#/view/icons/Logo'
10
-
import {Link, TextLink} from '../util/Link'
7
+
import {Link} from '../util/Link'
11
8
import {
12
9
FontAwesomeIcon,
13
10
FontAwesomeIconStyle,
···
16
13
import {msg} from '@lingui/macro'
17
14
import {CogIcon} from '#/lib/icons'
18
15
19
-
export function HomeHeaderLayout({children}: {children: React.ReactNode}) {
16
+
export function HomeHeaderLayout(props: {
17
+
children: React.ReactNode
18
+
tabBarAnchor: JSX.Element | null | undefined
19
+
}) {
20
20
const {isMobile} = useWebMediaQueries()
21
21
if (isMobile) {
22
-
return <HomeHeaderLayoutMobile>{children}</HomeHeaderLayoutMobile>
22
+
return <HomeHeaderLayoutMobile {...props} />
23
23
} else {
24
-
return <HomeHeaderLayoutTablet>{children}</HomeHeaderLayoutTablet>
24
+
return <HomeHeaderLayoutDesktopAndTablet {...props} />
25
25
}
26
26
}
27
27
28
-
function HomeHeaderLayoutTablet({children}: {children: React.ReactNode}) {
28
+
function HomeHeaderLayoutDesktopAndTablet({
29
+
children,
30
+
tabBarAnchor,
31
+
}: {
32
+
children: React.ReactNode
33
+
tabBarAnchor: JSX.Element | null | undefined
34
+
}) {
29
35
const pal = usePalette('default')
30
-
const {headerMinimalShellTransform} = useMinimalShellMode()
31
-
const {headerHeight} = useShellLayout()
32
36
const {_} = useLingui()
33
37
34
38
return (
35
-
// @ts-ignore the type signature for transform wrong here, translateX and translateY need to be in separate objects -prf
36
-
<Animated.View
37
-
style={[pal.view, pal.border, styles.tabBar, headerMinimalShellTransform]}
38
-
onLayout={e => {
39
-
headerHeight.value = e.nativeEvent.layout.height
40
-
}}>
41
-
<View style={[pal.view, styles.topBar]}>
42
-
<TextLink
43
-
type="title-lg"
39
+
<>
40
+
<View style={[pal.view, pal.border, styles.bar, styles.topBar]}>
41
+
<Link
44
42
href="/settings/following-feed"
43
+
hitSlop={10}
44
+
accessibilityRole="button"
45
45
accessibilityLabel={_(msg`Following Feed Preferences`)}
46
-
accessibilityHint=""
47
-
text={
48
-
<FontAwesomeIcon
49
-
icon="sliders"
50
-
style={pal.textLight as FontAwesomeIconStyle}
51
-
/>
52
-
}
53
-
/>
46
+
accessibilityHint="">
47
+
<FontAwesomeIcon
48
+
icon="sliders"
49
+
style={pal.textLight as FontAwesomeIconStyle}
50
+
/>
51
+
</Link>
54
52
<Logo width={28} />
55
53
<Link
56
54
href="/settings/saved-feeds"
···
61
59
<CogIcon size={22} strokeWidth={2} style={pal.textLight} />
62
60
</Link>
63
61
</View>
64
-
{children}
65
-
</Animated.View>
62
+
{tabBarAnchor}
63
+
<View style={[pal.view, pal.border, styles.bar, styles.tabBar]}>
64
+
{children}
65
+
</View>
66
+
</>
66
67
)
67
68
}
68
69
69
70
const styles = StyleSheet.create({
71
+
bar: {
72
+
// @ts-ignore Web only
73
+
left: 'calc(50% - 300px)',
74
+
width: 600,
75
+
borderLeftWidth: 1,
76
+
borderRightWidth: 1,
77
+
},
70
78
topBar: {
71
79
flexDirection: 'row',
72
80
justifyContent: 'space-between',
73
81
alignItems: 'center',
74
82
paddingHorizontal: 18,
75
-
paddingVertical: 8,
76
-
marginTop: 8,
77
-
width: '100%',
83
+
paddingTop: 16,
84
+
paddingBottom: 8,
78
85
},
79
86
tabBar: {
80
87
// @ts-ignore Web only
81
88
position: 'sticky',
82
-
zIndex: 1,
83
-
// @ts-ignore Web only -prf
84
-
left: 'calc(50% - 300px)',
85
-
width: 600,
86
89
top: 0,
87
90
flexDirection: 'column',
88
91
alignItems: 'center',
89
92
borderLeftWidth: 1,
90
93
borderRightWidth: 1,
94
+
zIndex: 1,
91
95
},
92
96
})
+1
src/view/com/home/HomeHeaderLayoutMobile.tsx
+1
src/view/com/home/HomeHeaderLayoutMobile.tsx