Add the user profile to the left nav

src/view/shell/web/left-column.tsx

@@ -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,