Add the user profile to the left nav
parent
4b33cdb7ec
commit
cd96c94d3a
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue