1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
import React from 'react'
import {Pressable, StyleSheet, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {Link} from '../../com/util/Link'
import {Text} from '../../com/util/text/Text'
import {colors} from '../../lib/styles'
import {useStores} from '../../../state'
import {usePalette} from '../../lib/hooks/usePalette'
import {
HomeIcon,
HomeIconSolid,
BellIcon,
BellIconSolid,
MagnifyingGlassIcon,
CogIcon,
} from '../../lib/icons'
interface NavItemProps {
label: string
count?: number
href: string
icon: JSX.Element
iconFilled: JSX.Element
}
export const NavItem = observer(
({label, count, href, icon, iconFilled}: NavItemProps) => {
const store = useStores()
const pal = usePalette('default')
const isCurrent = store.nav.tab.current.url === href
return (
<Pressable
style={state => [
// @ts-ignore Pressable state differs for RNW -prf
state.hovered && {backgroundColor: pal.colors.backgroundLight},
]}>
<Link style={styles.navItem} href={href}>
<View style={styles.navItemIconWrapper}>
{isCurrent ? iconFilled : icon}
{typeof count === 'number' && count > 0 && (
<Text type="button" style={styles.navItemCount}>
{count}
</Text>
)}
</View>
<Text type={isCurrent ? 'xl-bold' : 'xl'} style={styles.navItemLabel}>
{label}
</Text>
</Link>
</Pressable>
)
},
)
export const DesktopLeftColumn = observer(() => {
const store = useStores()
const pal = usePalette('default')
return (
<View style={[styles.container, pal.border]}>
<NavItem
href="/"
label="Home"
icon={<HomeIcon />}
iconFilled={<HomeIconSolid />}
/>
<NavItem
href="/search"
label="Search"
icon={<MagnifyingGlassIcon />}
iconFilled={<MagnifyingGlassIcon strokeWidth={4} />}
/>
<NavItem
href="/notifications"
label="Notifications"
count={store.me.notificationCount}
icon={<BellIcon />}
iconFilled={<BellIconSolid />}
/>
<NavItem
href="/settings"
label="Settings"
icon={<CogIcon strokeWidth={1.5} />}
iconFilled={<CogIcon strokeWidth={2} />}
/>
</View>
)
})
const styles = StyleSheet.create({
container: {
position: 'absolute',
left: 'calc(50vw - 530px)',
width: '230px',
height: '100%',
borderRightWidth: 1,
paddingTop: 20,
},
navItem: {
padding: '1rem',
flexDirection: 'row',
alignItems: 'center',
},
navItemIconWrapper: {
flexDirection: 'row',
width: 30,
justifyContent: 'center',
marginRight: 5,
},
navItemCount: {
position: 'absolute',
top: -5,
left: 15,
backgroundColor: colors.red3,
color: colors.white,
fontSize: 12,
fontWeight: 'bold',
paddingHorizontal: 4,
borderRadius: 6,
},
navItemLabel: {
fontSize: 19,
},
})
|
