Add profile menuitem to main menu (close #47)

2 files changed, 49 insertions, 3 deletions

diff --git a/src/view/lib/icons.tsx b/src/view/lib/icons.tsx
index f79c8e603..bfcbb26bd 100644
--- a/src/view/lib/icons.tsx
+++ b/src/view/lib/icons.tsx
@@ -200,6 +200,35 @@ export function CogIcon({
 
 // Copyright (c) 2020 Refactoring UI Inc.
 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
+export function UserIcon({
+  style,
+  size,
+  strokeWidth = 1.5,
+}: {
+  style?: StyleProp<ViewStyle>
+  size?: string | number
+  strokeWidth?: number
+}) {
+  return (
+    <Svg
+      fill="none"
+      viewBox="0 0 24 24"
+      width={size || 32}
+      height={size || 32}
+      strokeWidth={strokeWidth}
+      stroke="currentColor"
+      style={style}>
+      <Path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
+      />
+    </Svg>
+  )
+}
+
+// Copyright (c) 2020 Refactoring UI Inc.
+// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
 export function UserGroupIcon({
   style,
   size,
diff --git a/src/view/shell/mobile/Menu.tsx b/src/view/shell/mobile/Menu.tsx
index 3a6bbbc0a..b06c1da9e 100644
--- a/src/view/shell/mobile/Menu.tsx
+++ b/src/view/shell/mobile/Menu.tsx
@@ -11,7 +11,13 @@ import {observer} from 'mobx-react-lite'
 import VersionNumber from 'react-native-version-number'
 import {s, colors} from '../../lib/styles'
 import {useStores} from '../../../state'
-import {HomeIcon, BellIcon, CogIcon, MagnifyingGlassIcon} from '../../lib/icons'
+import {
+  HomeIcon,
+  BellIcon,
+  UserIcon,
+  CogIcon,
+  MagnifyingGlassIcon,
+} from '../../lib/icons'
 import {UserAvatar} from '../../com/util/UserAvatar'
 import {Text} from '../../com/util/text/Text'
 import {ToggleButton} from '../../com/util/forms/ToggleButton'
@@ -117,7 +123,7 @@ export const Menu = observer(
             Search
           </Text>
         </TouchableOpacity>
-        <View style={[styles.section, pal.border]}>
+        <View style={[styles.section, pal.border, {paddingTop: 5}]}>
           <MenuItem
             icon={
               <HomeIcon style={pal.text as StyleProp<ViewStyle>} size="26" />
@@ -135,6 +141,17 @@ export const Menu = observer(
           />
           <MenuItem
             icon={
+              <UserIcon
+                style={pal.text as StyleProp<ViewStyle>}
+                size="30"
+                strokeWidth={2}
+              />
+            }
+            label="Profile"
+            url={`/profile/${store.me.handle}`}
+          />
+          <MenuItem
+            icon={
               <CogIcon
                 style={pal.text as StyleProp<ViewStyle>}
                 size="30"
@@ -208,7 +225,7 @@ const styles = StyleSheet.create({
   menuItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 8,
+    paddingVertical: 6,
     paddingLeft: 6,
     paddingRight: 10,
   },