Add the user profile to the left nav

zio/stable
Paul Frazee 2023-01-26 22:40:39 -06:00
parent 4b33cdb7ec
commit cd96c94d3a
1 changed files with 34 additions and 5 deletions

View File

@ -3,6 +3,7 @@ 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 {UserAvatar} from '../../com/util/UserAvatar'
import {colors} from '../../lib/styles'
import {useStores} from '../../../state'
import {usePalette} from '../../lib/hooks/usePalette'
@ -21,9 +22,10 @@ interface NavItemProps {
href: string
icon: JSX.Element
iconFilled: JSX.Element
isProfile?: boolean
}
export const NavItem = observer(
({label, count, href, icon, iconFilled}: NavItemProps) => {
({label, count, href, icon, iconFilled, isProfile}: NavItemProps) => {
const store = useStores()
const pal = usePalette('default')
const isCurrent = store.nav.tab.current.url === href
@ -34,7 +36,11 @@ export const NavItem = observer(
state.hovered && {backgroundColor: pal.colors.backgroundLight},
]}>
<Link style={styles.navItem} href={href}>
<View style={styles.navItemIconWrapper}>
<View
style={[
styles.navItemIconWrapper,
isProfile && styles.navItemProfile,
]}>
{isCurrent ? iconFilled : icon}
{typeof count === 'number' && count > 0 && (
<Text type="button" style={styles.navItemCount}>
@ -42,7 +48,10 @@ export const NavItem = observer(
</Text>
)}
</View>
<Text type={isCurrent ? 'xl-bold' : 'xl'} style={styles.navItemLabel}>
<Text
type={isCurrent ? 'xl-bold' : 'xl'}
style={styles.navItemLabel}
numberOfLines={1}>
{label}
</Text>
</Link>
@ -54,8 +63,23 @@ export const NavItem = observer(
export const DesktopLeftColumn = observer(() => {
const store = useStores()
const pal = usePalette('default')
const avi = (
<UserAvatar
handle={store.me.handle}
displayName={store.me.displayName}
avatar={store.me.avatar}
size={40}
/>
)
return (
<View style={[styles.container, pal.border]}>
<NavItem
isProfile
href={`/profile/${store.me.handle}`}
label={store.me.displayName || store.me.handle}
icon={avi}
iconFilled={avi}
/>
<NavItem
href="/"
label="Home"
@ -92,10 +116,11 @@ const styles = StyleSheet.create({
width: '230px',
height: '100%',
borderRightWidth: 1,
paddingTop: 20,
paddingTop: 5,
},
navItem: {
padding: '1rem',
paddingVertical: 10,
paddingHorizontal: 10,
flexDirection: 'row',
alignItems: 'center',
},
@ -105,6 +130,10 @@ const styles = StyleSheet.create({
justifyContent: 'center',
marginRight: 5,
},
navItemProfile: {
width: 40,
marginRight: 10,
},
navItemCount: {
position: 'absolute',
top: -5,