forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Add the user profile to the left nav
+34
-5
+34
-5
src/view/shell/web/left-column.tsx
+34
-5
src/view/shell/web/left-column.tsx
···
3
3
import {observer} from 'mobx-react-lite'
4
4
import {Link} from '../../com/util/Link'
5
5
import {Text} from '../../com/util/text/Text'
6
+
import {UserAvatar} from '../../com/util/UserAvatar'
6
7
import {colors} from '../../lib/styles'
7
8
import {useStores} from '../../../state'
8
9
import {usePalette} from '../../lib/hooks/usePalette'
···
21
22
href: string
22
23
icon: JSX.Element
23
24
iconFilled: JSX.Element
25
+
isProfile?: boolean
24
26
}
25
27
export const NavItem = observer(
26
-
({label, count, href, icon, iconFilled}: NavItemProps) => {
28
+
({label, count, href, icon, iconFilled, isProfile}: NavItemProps) => {
27
29
const store = useStores()
28
30
const pal = usePalette('default')
29
31
const isCurrent = store.nav.tab.current.url === href
···
34
36
state.hovered && {backgroundColor: pal.colors.backgroundLight},
35
37
]}>
36
38
<Link style={styles.navItem} href={href}>
37
-
<View style={styles.navItemIconWrapper}>
39
+
<View
40
+
style={[
41
+
styles.navItemIconWrapper,
42
+
isProfile && styles.navItemProfile,
43
+
]}>
38
44
{isCurrent ? iconFilled : icon}
39
45
{typeof count === 'number' && count > 0 && (
40
46
<Text type="button" style={styles.navItemCount}>
···
42
48
</Text>
43
49
)}
44
50
</View>
45
-
<Text type={isCurrent ? 'xl-bold' : 'xl'} style={styles.navItemLabel}>
51
+
<Text
52
+
type={isCurrent ? 'xl-bold' : 'xl'}
53
+
style={styles.navItemLabel}
54
+
numberOfLines={1}>
46
55
{label}
47
56
</Text>
48
57
</Link>
···
54
63
export const DesktopLeftColumn = observer(() => {
55
64
const store = useStores()
56
65
const pal = usePalette('default')
66
+
const avi = (
67
+
<UserAvatar
68
+
handle={store.me.handle}
69
+
displayName={store.me.displayName}
70
+
avatar={store.me.avatar}
71
+
size={40}
72
+
/>
73
+
)
57
74
return (
58
75
<View style={[styles.container, pal.border]}>
76
+
<NavItem
77
+
isProfile
78
+
href={`/profile/${store.me.handle}`}
79
+
label={store.me.displayName || store.me.handle}
80
+
icon={avi}
81
+
iconFilled={avi}
82
+
/>
59
83
<NavItem
60
84
href="/"
61
85
label="Home"
···
92
116
width: '230px',
93
117
height: '100%',
94
118
borderRightWidth: 1,
95
-
paddingTop: 20,
119
+
paddingTop: 5,
96
120
},
97
121
navItem: {
98
-
padding: '1rem',
122
+
paddingVertical: 10,
123
+
paddingHorizontal: 10,
99
124
flexDirection: 'row',
100
125
alignItems: 'center',
101
126
},
···
104
129
width: 30,
105
130
justifyContent: 'center',
106
131
marginRight: 5,
132
+
},
133
+
navItemProfile: {
134
+
width: 40,
135
+
marginRight: 10,
107
136
},
108
137
navItemCount: {
109
138
position: 'absolute',